Form and column: extjs Layout

For a container component, suchEXT. Formpanel, its internal space is nothing more than divided by horizontal or vertical; if you need a more complex layout, re-divide the sub-areas obtained for the first time.

 

Form means that the number of rows in the container is divided horizontally. The number of rows is the same as the number of sub-elements in the container (directly sub-elements, but not the elements inside the sub-elements, each element occupies one row;
Column indicates that containers are divided vertically, and the number of columns obtained is the same as the preceding one.

 

The following describes how to use form and column.
 For example, let's implement a logon interface:

 

 

 

 

 

  VaR  Login  =    New  Ext. formpanel ({

Labelalign:  '  Top  '  ,

Frame:  True  ,

Title:  '  Login  '  ,

ID:  '  Login  '  ,

Bodystyle: '  Padding: 5px 5px 0  '  ,

Width:  400  ,

Items :[{

Layout:  '  Column  '  ,  //  Divide the entire space into two columns  
  
Items :[{

HTML:  '   '     //  Put a logo in the left column  
  
},{

Columnwidth :.  5  ,

Layout:  '  Form  '  ,  //  The right column is further divided into the upper and lower rows  
 
Items :[{

Xtype:  '  Textfield  '  ,

Fieldlabel:  '  Username  '  ,  //  The first line is the username input box.  
  
Name:  '  Name  ' ,

ID:  '  Name  '  ,

Anchor:  '  100%  '   

},{

Xtype:  '  Textfield  '  ,

Fieldlabel:  '  Password '  ,  //  The second line is the password input box.  
  
Name:  '  Pass  '  ,

ID:  '  Pass  '  ,

Anchor:  '  100%  ' ,

Inputtype:  '  Password  '   

}]

}]

}],

Buttons :[{

Text:  '  OK  '  ,  //  User name and password confirmation button  
  
Handler:  Function  (){

 VaR  Name  =  Ext. Get (  '  Name  '  ). Dom. value;

  VaR  Pass  =  Ext. Get (  '  Pass  '  ). Dom. value;

  If (Name  =  '  Good  '  &&  Pass  =  '  Good  '  ){

  //  Login correct, do something  
  
}  Else {

Ext. MessageBox. Alert (  '  Warning!  '  ,  '  Incorrect Login  '  );

}



},{

Text:  '  Reset  '  ,  //  Reset user name and password  
 
Handler:  Function  (){

Ext. Get (  '  Name  '  ). Dom. Value  =  ''  ;

Ext. Get (  '  Pass  '  ). Dom. Value  =  '' ;

}

}]

});

Login. Render (document. Body );

Login. getel (). Center ();

 

 

 

 

 

 

 

 This sectionCodeRows 8th to 30th are related to the topic "layout" of this article. These lines of code divide a formpanel into two columns, with an image logo on the left. The right column is subdivided into the upper and lower lines. The above line is the username input box, and the following line is the password input box. Such a simple example shows the nesting of the layout, which can be recursively nested to create a very complex layout method. But remember, the simpler the web page, the better.

 

Starting from line 1, a button for Event Response (buttons) is added to ensure the integrity of the login code ).

 

The last two lines of code indicate that the logon interface is displayed and centered.

 

From: http://www.phpchina.com/html/01/64001_itemid_31806.html