Sencha Touch - Components

Component

In normal terms, component is something on which we can work upon in Sencha Touch. It is the smallest part of an application which while combined makes the whole application. Every element in Sencha Touch is a component. Component has various features such as they can be shown or hidden, they can be collapsible and they can get rendered onto the page.

Container

Container in Sencha Touch is also a component, however a special type of component as it allows you to add another components inside it. As the name suggests, container is the component which contains various components inside it. Along with all the functionalities of a component, the container has various other functionalities such as it can add and remove components and decide the layout.

Creation of a container

Syntax

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

Example

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

This will produce following result −

Adding component

Syntax

container.add(component);

Example of adding component to the container

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

This will produce following result −

Hide and show container

Syntax

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

Destroy container

Syntax

container.destroy();
sencha_touch_core_concepts.htm
Advertisements