HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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

❮ 上一节 下一节 ❯