一般而言，组件是我们可以在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'
});
//this is the Panel we'll be adding to
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true, layout: 'hbox', defaults: {
flex: 1
},
items: {
html: 'First Panel',
style: 'background-color: #5E99CC;'
}
});
//now we add the first panel inside the second
mainPanel.add(aboutPanel);
}
});
</script>
</head>
<body>
</body>
</html>
隐藏和显示容器
语法
container.hide(); container.show();
销毁容器
语法
container.destroy();
作者：terry，如若转载，请注明出处：https://www.web176.com/senchatouch/1641.html
