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