Secha Touch: Layouts

Layouts describe the sizing and positioning on Components in your app.

HBox Layout:

It can arrange components in a wide variety of horizontal combinations.
              layout: 'hbox'

VBox Layout:

It can arrange components in a wide variety of Vertical combinations.
              layout: 'vbox'

Card Layout:

Sometimes you want to show several information screens information on a small device screen. TabPanels and Carousels both enable you to see one screen of many at a time, and underneath they both use a Card Layout.

Card Layout takes the size of the Container it is applied to and sizes the currently active item so as to completely fill the Container. It then hides the rest of the items, allowing you to change which one is currently visible, but only showing one at once:

var panel = Ext.create('Ext.Panel', 

                 { 

                     layout: 'card', 

                     items: [ 

                                   { html: "First Item" }, 

                                   { html: "Second Item" }, 

                                   { html: "Third Item" }, 

                                   { html: "Fourth Item" } 

                              ] 

                 }); 

panel.setActiveItem(1);

In this example we created a Panel with a Card Layout and later set the second item as active (the active item index is zero-based, so 1 corresponds to the second item).

Fit Layout:

The Fit Layout is probably the simplest layout available. All it does is make a child component fit the full size of its parent Container.

           layout: 'fit'

Sencha Touch API

The environment package in Sencha Touch gives you an API which tells about the environment your application is running on.

Operating System:
We can detect the operating system your application is running on using Ext.os.name.It retruns the following values:

• Android
• iOS
• Blackberry
• Other

You can also use the Ext.os.is singleton to check if the current OS matches a certain operating system.

if (Ext.os.is.Android) 

{ 

      // ... 

} 

if (Ext.os.is.MacOS) 

{ 

     // ... 

}

We can also detect if the device is an iPhone or iPad using Ext.os.is

if (Ext.os.is.iPad) 

{

   // ... 

}

we can also detect version of the operation system your application is running on using Ext.os.version

Browser:

We can find information about the browser you are running your application on by using Ext.browser.name

It returns the following values:

• Safari
• Chrome
• Opera
• IE
• Other

You can also use Ext.browser.is to check the current browser.

if (Ext.browser.is.Chrome) 

{ 

     // ... 

}

Features:

You can use the Ext.feature singleton to check if a certain browser feature exists.

For example, if you want to check if the browser supports canvas, you check use the following code:

if (Ext.feature.has.Canvas) 

{

     // ... 

}