Sencha Touch - Componenti

Componente

In termini normali, il componente è qualcosa su cui possiamo lavorare in Sencha Touch. È la parte più piccola di un'applicazione che, sebbene combinata, rende l'intera applicazione. Ogni elemento in Sencha Touch è un componente. Il componente ha varie caratteristiche come possono essere mostrati o nascosti, possono essere comprimibili e possono essere visualizzati sulla pagina.

Contenitore

Anche il contenitore in Sencha Touch è un componente, tuttavia un tipo speciale di componente in quanto consente di aggiungere altri componenti al suo interno. Come suggerisce il nome, il contenitore è il componente che contiene vari componenti al suo interno. Insieme a tutte le funzionalità di un componente, il contenitore ha varie altre funzionalità come può aggiungere e rimuovere componenti e decidere il layout.

Creazione di un contenitore

Sintassi

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

Esempio

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

Questo produrrà il seguente risultato:

Aggiunta di un componente

Syntax

container.add(component);

Esempio di aggiunta di componenti al contenitore

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

Questo produrrà il seguente risultato:

Nascondi e mostra il contenitore

Syntax

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

Distruggi il container

Syntax

container.destroy();