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

列印頁面

上一個

下一個