ExtJS 的9种布局详解8(三)

七、fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

例一：

 例二： 如果容器组件中有多个子元素，则只会显示一个元素，如下面的代码：

Ext.onReady(function(){
new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        layout:"fit",
        width:500,
        height:100,
        items:[{title:"子元素1",html:"这是子元素1中的内容"},
            {title:"子元素2",html:"这是子元素2中的内容"}
        ]
    });
});

Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"fit", width:500, height:100, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"} ] }); });

 

例三：如果不使用布局Fit，代码如下：

Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        width:500,
        height:200,
        items:[{title:"子元素1",html:"这是子元素1中的内容"},
                {title:"子元素2",html:"这是子元素2中的内容"}
        ]
    });
});

Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", width:500, height:200, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"} ] }); });

 

八、form

是一种专门用于管理表单中输入字段的布局

 

Ext.onReady(function() {
    var win = new Ext.Window({
        title: "form Layout",
        height: 150,
        width: 230,
        plain: true,
        bodyStyle: 'padding:15px',
        items:{
            xtype: "form",
            labelWidth: 30,
            defaultType: "textfield",
            frame:true,
            items:[
                {
                    fieldLabel:"姓名",
                    name:"username",
                    allowBlank:false //必填项(非空)
                },
                {
                    fieldLabel:"呢称",
                    name:"nickname"
                },
                {
                    fieldLabel: "生日",
                    xtype:'datefield',
                    name: "birthday",
                    width:127
                }
            ]
        }
    });
    win.show();
});

Ext.onReady(function() { var win = new Ext.Window({ title: "form Layout", height: 150, width: 230, plain: true, bodyStyle: 'padding:15px', items:{ xtype: "form", labelWidth: 30, defaultType: "textfield", frame:true, items:[ { fieldLabel:"姓名", name:"username", allowBlank:false //必填项(非空) }, { fieldLabel:"呢称", name:"nickname" }, { fieldLabel: "生日", xtype:'datefield', name: "birthday", width:127 } ] } }); win.show(); });

 
 

九、table

按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

例一：

Ext.onReady(function(){
    var panel=new Ext.Panel( {
       renderTo:'hello',
       title:'容器组件',
       layout:'table',
       width:500,
       height:200,
       layoutConfig:{columns:3},//将父容器分成3列
       items:[
        {title:'元素1',html:'ssssssssss',rowspan:2,height:100},
        {title:'元素2',html:'dfffsddsdfsdf',colspan:2},
        {title:'元素3',html:'sdfsdfsdf'},
        {title:'元素4',html:''}
       ]
    });
});

Ext.onReady(function(){ var panel=new Ext.Panel( { renderTo:'hello', title:'容器组件', layout:'table', width:500, height:200, layoutConfig:{columns:3},//将父容器分成3列 items:[ {title:'元素1',html:'ssssssssss',rowspan:2,height:100}, {title:'元素2',html:'dfffsddsdfsdf',colspan:2}, {title:'元素3',html:'sdfsdfsdf'}, {title:'元素4',html:''} ] }); });

 

Ext.onReady(function(){
    new Ext.Panel({
        renderTo:"hello",
        title:"容器组件",
        layout:"fit",
        width:500,
        height:100,
        items:[{title:"子元素",html:"这是子元素中的内容"}]
    });
});

Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"容器组件", layout:"fit", width:500, height:100, items:[{title:"子元素",html:"这是子元素中的内容"}] }); });

 

上面的代码指定父容器使用Fit布局，因此子将自动填满整个父容器。