ExtJS Layout 总结

ExtJS Layout 总结

ExtJS3 Layout

1.column Layout 列布局

在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。
columnWidth表示使用百分比的形式指定列宽度。
width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。

Ext.onReady( function (){
     var  window  =   new  Ext.Window({
        layout:  " column " ,
        title:  " Hello World " ,
        id:  " helloWorldWindow " ,
        bodyStyle:  " padding:10px; " ,
        width:  550 ,
        height:  300 ,
        x:  100 ,
        y:  100 ,
        items: [
            {    
                columnWidth: . 6 ,
                baseCls:  " x-plain " ,
                frame:  true ,
                layout:  " form " ,
                bodyStyle:  " padding:5px; " ,
                items: [
                    {xtype:  " textfield " , fieldLabel:  " UserName " },
                    {xtype:  " textfield " , fieldLabel:  " Age " }    
                ]
            },
            {    
                columnWidth: . 3 ,
                baseCls:  " x-plain " ,
                bodyStyle:  " padding:5px; " ,
                items: [
                    {xtype:  " textarea " }
                ]
            },
            {    
                columnWidth: . 1 ,
                baseCls:  " x-plain " ,
                bodyStyle:  " padding:5px; " ,
                layout:  " form " ,
                items: [
                    {
                        xtype:  " button " ,
                        text:  " Ok " ,
                        handler:  function () {
                            alert( " OK " );
                        }
                    },
                    {
                        xtype:  " button " , 
                        text:  " Cancel " ,
                        handler:  function () {
                            alert( " Cancel " );
                        }
                    }    
                ]
            }
        ]
    });
    
    window.render(Ext.getDom( " tt " ));
    window.show();
});

2.fit Layout 

Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只会显示第一个子元素。

Ext.onReady(
     function (){
         var  win  =   new  Ext.Window({
            title:  " Hello World " ,
            renderTo: Ext.getDom( " tt " ),
            width:  400 ,
            height:  250 ,
            x:  150 ,
            y:  50 ,
            layout:  " fit " ,
            items: [
                {xtype: " panel " , title: " O " },
                {xtype: " panel " , title: " K " }
            ]
        });
        
        win.show();
    }
);

3. border Layout

一、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。

Ext.onReady(
     function () {
         new  Ext.Viewport({
            layout: " border " ,
            items:[
            {
                region: " north " ,
                height: 80 ,
                xtype:  " label " ,
                 // style: "border: 1px solid red;padding:1px;",
                frame:  true ,
                text:  " cdred.net study club "
            },
            {
                region: " south " ,
                height: 20 ,
                xtype:'label',
                text:'Status show zone..'
            },
            {
                region: " center " ,
                title: " 中央面板 "
            },
            {
                region: " west " ,
                width: 200 ,
                title: " 系统栏目 " ,
                collapsible:  true
            },
            {
                region: " east " ,
                width: 150 ,
                collapsed:  true ,
                collapsible:  true ,
                title: " 在线好友 "
            }
                
                ]
        
        }); 
    }
);

4.accordion Layout

Accordion布局由类Ext.layout.Accordion定义，表示可折叠的布局，点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板。
layoutConfig：true表示在执行展开折叠时启动动画效果，默认值为false。

** 注意如果你是用 panel之类的 必须拥有 title:'' 属性

Ext.onReady( function (){
     var  panel  =   new  Ext.Panel({
        title: " 人员信息 " ,
        renderTo:Ext.getDom( " tt " ),
        frame: true ,
        width: 250 ,
        height: 300 ,
        layout: " accordion " ,
        layoutConfig: {
            animate:  true  
        },
        items:[
            {xtype: " panel " , title: " O " , html: " 这是子元素1中的内容 " },
            {xtype: " panel " , title: " K " , html: " 这是子元素2中的内容 " },
            {xtype: " panel " , title: " L " , html: " 这是子元素3中的内容 " }
        ]
    });
});

5 form Layout

Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。
hideLabels：tru表示隐藏标签，默认为false。
labelAlign：标签队齐方式left、right、center,默认为left。

在实际应用中，Ext.form.FormPanel这个类默认布局使用的是Form布局，因此我们直接使用FormPanel即可。

Ext.onReady(
     function () {
         var  panel  =   new  Ext.Panel({
            layout: " form " ,
            title:  " HelloWorld " ,
            renderTo:Ext.getDom( " tt " ),
            width:  400 ,
            height: 250 ,
            frame:  true ,
            hideLabel:  true ,
            collapsible:  true ,
            bodyStyle:  " padding:20px; " ,
            defaultType: " textfield " ,
            items:[
                {fieldLabel: " Hello " },
                {fieldLabel: " World " }
            ]
        });
    }
);

6 table Layout

Table布局由类Ext.layout.TableLayout定义，类以于html中的table，可以对行或列进行合并。
layoutConfig使用columns指定父容器分成3列，
rowspan合并行数目。
colspan合并列数目。

Ext.onReady(exe);

function  exe() {
     var  panel  =   new  Ext.Panel({
        title:  " Hello World " ,
        layout:  " table " ,
        width:  500 ,
        height:  300 ,
        bodyStyle:'padding:20px;',
        layoutConfig: {
            columns:  3
        },
        items: [
            {xtype: " panel " , title: " hello " , html: " hello context " , rowspan: 2 , height:  100 },
            {xtype: " panel " , title: " world " , html: " world context " , colspan: 2 },
            {xtype: " panel " , title: " cheng " , html: " cheng context " },
            {xtype: " panel " , title: " du " , html: " du context " }
        ]
    });
    
    panel.render(Ext.getDom( " tt " ));
}

7 card Layout

Ext.onReady( function () {
     var  i  =   0 ;
     var  navHandler  =   function (direction){
        i  +=  direction;
        Ext.getCmp( " card " ).getLayout().setActiveItem(i);
         if  (i  ==   2 ) {
            Ext.getCmp( " move-next " ).setDisabled( true );
        }  else   if  (i  ==   0 ) {
            Ext.getCmp( " move-prev " ).setDisabled( true );
        }  else  {
            Ext.getCmp( " move-next " ).setDisabled( false );
            Ext.getCmp( " move-prev " ).setDisabled( false );
        }
        
    };
     var  card  =   new  Ext.Panel({
        id:  " card " ,
        title : 'Example Wizard',
        layout : 'card',
        activeItem :  0 , 
        bodyStyle : 'padding:15px',
        defaults : {
            border :  false
        },

        bbar : [{
                    id : 'move - prev',
                    text : 'Back',
                    handler : navHandler.createDelegate( this , [ - 1 ]),
                    disabled :  true
                }, ' -> ', 
                {
                    id : 'move - next',
                    text : 'Next',
                    handler : navHandler.createDelegate( this , [ 1 ])
                }],

        items : [{
                    id : 'card - 0 ',
                    html : ' < h1 > Welcome to the Wizard !</ h1 >< p > Step  1  of  3 </ p > '
                }, {
                    id : 'card - 1 ',
                    html : ' < p > Step  2  of  3 </ p > '
                }, {
                    id : 'card - 2 ',
                    html : ' < h1 > Congratulations !</ h1 >< p > Step  3  of  3   -  Complete </ p > '
                }]
    });
    card.render(Ext.getDom( " tt " ));
});

8 absolute Layout

Ext.onReady(exe);

function  exe() {
     var  form  =   new  Ext.form.FormPanel({
                title : 'Absolute Layout',
                frame :  true ,
                layout : 'absolute',
                x:  100 ,
                y:  40 ,
                height:  500 ,
                layoutConfig : {
                    extraCls : 'x - abs - layout - item'
                },
                defaultType : 'textfield',
                items : [{
                            x :  0 ,
                            y :  5 ,
                            xtype : 'label',
                            text : 'Send To:'
                        }, {
                            x :  60 ,
                            y :  0 ,
                            name : 'to',
                            anchor : ' 100 % '

                        }, {
                            x :  0 ,
                            y :  35 ,
                            xtype : 'label',
                            text : 'Subject:'
                        }, {
                            x :  60 ,
                            y :  30 ,
                            name : 'subject',
                            anchor : ' 100 % '

                        }, {
                            x :  0 ,
                            y :  60 ,
                            xtype : 'textarea',
                            name : 'msg',
                            anchor : ' 100 %   100 % '

                        }]
            });
            
            form.render(Ext.getDom( " tt " ));
}

附上 测试的 html 

<% @ page language = " java "  import = " java.util.* "  pageEncoding = " UTF-8 " %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
   < head >
    
     < title > Vanlin http://www.blogjava.net/vanlin </ title >
     < meta  http-equiv ="pragma"  content ="no-cache" >
     < meta  http-equiv ="cache-control"  content ="no-cache" >
     < meta  http-equiv ="expires"  content ="0" >     
     < meta  http-equiv ="keywords"  content ="keyword1,keyword2,keyword3" >
     < meta  http-equiv ="description"  content ="This is my page" >
     < link  rel ="stylesheet"  type ="text/css"  href ="resources/css/ext-all.css" >
     < script  type ="text/javascript"  src ="adapter/ext/ext-base.js" ></ script >
     < script  type ="text/javascript"  src ="ext-all.js" ></ script >
     < script  type ="text/javascript"  src ="test_layout_anchor.js" ></ script >
   </ head >
  
   < body >
     < div  id ="tt"  style ="border: 1px thin blue; padding: 10px; margin: 20px;" ></ div >
   </ body >
</ html >