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-components

Sencha Touch-コンポーネント

成分

容器

コンテナの作成

構文

例

コンポーネントを追加する

コンテナの非表示と表示

コンテナを破壊する

目次