Sencha Touch - Componentes

Componente

En términos normales, el componente es algo en lo que podemos trabajar en Sencha Touch. Es la parte más pequeña de una aplicación que, si bien combinada, hace toda la aplicación. Cada elemento de Sencha Touch es un componente. El componente tiene varias características, como que se pueden mostrar u ocultar, que se pueden plegar y se pueden representar en la página.

Envase

El contenedor en Sencha Touch también es un componente, sin embargo, un tipo especial de componente ya que le permite agregar otros componentes dentro de él. Como su nombre indica, el contenedor es el componente que contiene varios componentes en su interior. Junto con todas las funcionalidades de un componente, el contenedor tiene varias otras funcionalidades, como puede agregar y eliminar componentes y decidir el diseño.

Creación de un contenedor

Sintaxis

Ext.create('Ext.Panel', {
   html: 'About this app'
});

Ejemplo

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

Esto producirá el siguiente resultado:

Añadiendo componente

Syntax

container.add(component);

Ejemplo de agregar componente al contenedor

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

Esto producirá el siguiente resultado:

Ocultar y mostrar contenedor

Syntax

container.hide();
container.show();

Destruir contenedor

Syntax

container.destroy();

↰ Previous page