Extjs layout 总结

1.column Layout 列布局

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

 

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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布局会自动把子元素放到布局指定的位置。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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:'' 属性

 

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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即可。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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合并列数目。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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

 

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

-->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"));
}