ext学习_layout布局


		1.ExtJS一共包含十种布局，常用的布局有border、column、fit、form、card、tabel等布局
column布局：
[html]  
Ext.onReady(function(){  
    new Ext.Panel({  
        renderTo:"hello",  
        width:400,  
        height:200,  
        layout:"column",  
        items:[{columnWidth:.5,  
        title:"面板1"},  
        {columnWidth:.5,  
        title:"面板2"}]  
    });  
});  
[html]  
Ext.onReady(function(){  
    new Ext.Panel({  
        renderTo:"hello",  
        title:"容器组件",  
        layout:"column",  
        width:500,  
        height:100,  
        items:[  
            {title:"列1",width:100},  
            {title:"列2",width:200},  
            {title:"列3",width:100},  
            {title:"列4"}  
           ]  
        }  
    );  
});  
[html]  
Ext.onReady(function(){  
    new Ext.Panel({  
        renderTo:"hello",  
        title:"容器组件",  
        layout:"column",  
        width:500,  
        height:100,  
        items:[  
            {title:"列1",columnWidth:.2},  
            {title:"列2",columnWidth:.3},  
            {title:"列3",columnWidth:.3},  
            {title:"列4",columnWidth:.2}  
          ]  
        });  
});  
 
[html]  
Ext.onReady(function(){  
    new Ext.Panel({  
        renderTo:"hello",  
        title:"容器组件",  
        layout:"column",  
        width:500,  
        height:100,  
        items:[{title:"列1",width:200},  
        {title:"列2",columnWidth:.3},  
        {title:"列3",columnWidth:.3},  
        {title:"列4",columnWidth:.4}  
        ]   
    });  
});  
 
 
border布局：
[html]  
Ext.onReady(function(){  
    new Ext.Viewport({  
        layout:"border",  
        items:[  
            {region:"north",height:50,title:"顶部面板"},  
            {region:"south",height:50,title:"底部面板"},  
            {region:"center",title:"中央面板"},  
            {region:"west",width:100,title:"左边面板"},  
            {region:"east",width:100,title:"右边面板"}  
        ]  
    });  
});

补充：web前端 , JavaScript ,