Sencha Touch - Componentes

Componente

Em termos normais, componente é algo em que podemos trabalhar no Sencha Touch. É a menor parte de um aplicativo que, combinada, forma o aplicativo inteiro. Cada elemento no Sencha Touch é um componente. O componente possui vários recursos, como eles podem ser mostrados ou ocultos, podem ser recolhidos e podem ser renderizados na página.

Recipiente

O contêiner no Sencha Touch também é um componente, porém um tipo especial de componente, pois permite adicionar outros componentes dentro dele. Como o nome sugere, container é o componente que contém vários componentes dentro dele. Junto com todas as funcionalidades de um componente, o container possui várias outras funcionalidades, como pode adicionar e remover componentes e decidir o layout.

Criação de um container

Sintaxe

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

Exemplo

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

Isso produzirá o seguinte resultado -

Adicionando componente

Syntax

container.add(component);

Exemplo de adição de componente ao contêiner

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

Isso produzirá o seguinte resultado -

Ocultar e mostrar contêiner

Syntax

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

Destruir contêiner

Syntax

container.destroy();

↰ Previous page