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'
               });

               //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();

sencha_touch_core_concepts.htm

打印页面

上一个

下一个