Sencha Touch Introduction Series (ix) Sencha Touch Layout layout

The layout is used to describe the size and location of the components in your application, and in the Sencha touch we provide the following layouts: 1.HBox:

Hbox and horizontal box layout, which we call the horizontal layout, here is a demo code:

Ext.create (' Ext.container ', {

     Fullscreen:true,
     layout: ' Hbox ',
     items: [
         {
             xtype: ' Panel ',
             HTML: ' Message list ',
             flex:1
         },
         {
             xtype: ' Panel ',
             HTML: ' Message preview ',
             flex:2
         }
     ]
 };

As shown above, every layout is defined as a Hbox container, its subcomponents are arranged in a horizontal order, and their space ratios are allocated based on the flex attributes we configure for the subassembly. and fill the screen,

Here, we define a parent container container and set its layout layout property to Hbox, and then we define two panel subcomponents, which are arranged horizontally.

An output message list, an output message preview, because the flex value of the message list is 1,message Preview's Flex value is 2,

The percentage of the message list in the overall horizontal layout is 1/(1+2), and the preview ratio is 2/(1+2),

The overall effect is roughly as follows:

　　

2.VBox

VBox is vertical box, which we call the vertical layout, and VBox is similar to Hbox, except that the horizontal layout is replaced by a vertical vertical

We'll change the layout property of the above code to VBox, as follows:

Ext.create (' Ext.container ', {
     fullscreen:true,
     layout: ' VBox ',
     items: [
         {
             xtype: ' Panel ',
             HTML: ' Message list ',
             flex:1
         },
         {
             xtype: ' Panel ',
             HTML: ' Message preview ',
             flex:2
         }
     ]
 });

The display of the entire container becomes vertical:

　　

VBox and Hbox are somewhat similar to the liearnlayout layouts in Android native development, and Flex is similar to the layout_weight attribute;

VBox and Hbox implementation of the principle is relatively simple, mainly using the CSS3 in the Flexbox layout to achieve, interested students can go to research, here I provide two flexbox links:

Http://bbs.9ria.com/thread-195131-1-1.html

Http://www.w3cplus.com/css3/flexbox-basics.html

Everyone interested can go and see

3.Card Layout

Card layout We call it the cards layout, as the name implies, the layout of the layout property defined as a card layout of the container's subassemblies will be like cards stacked together, and full screen, the topmost component will cover other components, When we need to display other subcomponents, we can display them by activating the function:

　　

Here we demonstrate a sample code:

　　

var panel = ext.create (' Ext.panel ', {
     layout: ' card ',
     items: [
         {
             html: ' ","
         },
         {
             HTML: "Second item"
         },
         {
             HTML: ' Third item
         },
         {
             HTML: ' Fourth item
         }
     ]
 });
 
 Panel.setactiveitem (1);

We defined a panel component and defined it as a card layout, where we defined four subcomponents and activated the second component via Setactiveitem (1).

When you need to activate one of the subcomponents to display it, you can make the specified component appear by Setactiveitem (alias or sub component index)

The advantage of using the card layout component is that his subcomponents can configure some of the toggle animation effects that the system has defined when the switch is activated, and we will demonstrate in the actual project later

Layout: {
            type: "card",
            Animation: "Slide"
        }

Of course, you can also dynamically set the animation when you switch subcomponents, as follows:

　　

Parent Component object. Animateactiveitem ("Viewtab", {type: "Slide", Direction: "Right"});

4.Fit Layout

Fit is the meaning of padding, the role of fit layout is to fill the entire container into the interface full screen, and its role is the same as the fullscreen:true of the set components,

Set the component's Layout property directly to: Fit, without much complex content,

Here is the sample code

var panel = ext.create (' Ext.panel ', {
     width:200,
     height:200,
     layout: ' Fit ',
 
     items: {
         xtype: ' Panel ',
         HTML: ' Also 200px by 200px '
     }
 });

5.Docking

Docking layout, we call it a hover layout, with the above 4 different layouts, docking layout is set to the subassembly, by the subassembly configuration docked to implement, docked have top,bottom,left,right four kinds of attributes, respectively corresponding to the upper and lower , left and right four positions, equivalent to the fit position in CSS, when the subassembly is configured with this attribute, it will always show in your configured location and not affected by the parent component layout, let's look at the sample code:

　　

Ext.create (' Ext.container ', {
     fullscreen:true,
     layout: ' Hbox ',
     items: [
         {
             docked: ' Top ',
             Xtype: ' Panel ',
             height:20,
             HTML: ' This is docked to the top '
         },
         {
             xtype: ' Panel ',
             HTML: ' Message list ',
             flex:1
         },
         {
             xtype: ' Panel ',
             HTML: ' Message preview ',
             flex:2
         }
     ]
 });

Here we set a docked property for the first subassembly of container and set it to top, so no matter what the layout of its parent component is, it will always show up at the front of the interface, and the effect is as follows:

　　

If we set the docked of the above code to left, then it will display

Ext.create (' Ext.container ', {
    fullscreen:true,
    layout: ' VBox ',
    items: [
        {
            docked: ' Left ',
            Xtype: ' Panel ',
            width:100,
            HTML: ' This is docked to the left '
        },
        {
            xtype: ' Panel ',
            HTML: ' Message list ',
            flex:1
        },
        {
            xtype: ' Panel ',
            HTML: ' Message preview ',
            flex:2
        }
    ]
});

The effect is as follows:

The above is Sencha touch in a few common layout, the next point we will start through the actual project practice to explain the sencha touch of other knowledge