Sencha Touch - 组件
组件
通常来说,组件是我们可以在 Sencha Touch 中处理的东西。它是应用程序的最小部分,组合起来构成整个应用程序。Sencha Touch 中的每个元素都是一个组件。组件具有各种功能,例如可以显示或隐藏、可以折叠以及可以呈现到页面上。
容器
Sencha Touch 中的容器也是一个组件,但它是一种特殊类型的组件,因为它允许您在其中添加其他组件。顾名思义,容器是包含各种组件的组件。除了组件的所有功能外,容器还具有各种其他功能,例如它可以添加和删除组件并决定布局。
创建容器
语法
Ext.create('Ext.Panel', { html: 'About this app' });
示例
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" >
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript"> Ext.application({
name: 'Sencha', launch: function() {
Ext.create('Ext.Panel', {
fullscreen: true,layout: 'hbox',defaults: {
flex: 1
},
items: {
html: 'First Panel',style: 'background-color: #5E99CC;'
}
});
}
});</script>
</head>
<body>
</body>
</html>
这将产生以下结果 −
添加组件
语法
container.add(component);
向容器添加组件的示例
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" >
<script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
<script type = "text/javascript">
Ext.application({
name: 'Sencha',
launch: function() {
var aboutPanel = Ext.create('Ext.Panel', {
html: 'Newly added'
});
//这是我们将要添加的面板
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true, layout: 'hbox', defaults: {
flex: 1
},
items: {
html: 'First Panel',
style: 'background-color: #5E99CC;'
}
});
//现在我们将第一个面板添加到第二个面板内
mainPanel.add(aboutPanel);
}
});
</script>
</head>
<body>
</body>
</html>
这将产生以下结果 −
隐藏和显示容器
语法
container.hide(); container.show();
销毁容器
语法
container.destroy();
sencha_touch_core_concepts.html