ExtJS布局练习例

/*//Viewport
function()
{
var vport=new Ext.Viewport(
{
enableTabScroll:false,
layout:"fit",//border
items:[
{title:"面板",html:"esfsdf",
tbar:[{text:"按钮1"},{text:"按钮2"}],
bbar:[{text:"按钮1"},{text:"按钮2"}]
}
]
}
);
}*/

/*//Viewport--窗口布局
function()
{
var vport=new Ext.Viewport(
{
enableTabScroll:true,
layout:"border",
items:[
{
title:"面板",
region:"north",//位置
collapsible:false,//是否允许隐藏
width:300,
html:"<h1>XXXXXXXX管理系统</h1>"
},
{
title:"面板",
region:"south",
collapsible:true,
width:300,
html:"<h1>XXXXXXXX管理系统</h1>"
},
{
title:"面板",
region:"east",
collapsible:true,
width:300,
html:"<h1>XXXXXXXX管理系统</h1>"
},
{
title:"菜单",
region:'west',
width:200,
collapsible:true,
html:'菜单栏'
},
{
xtype:'tabpanel',
region:'center',
items:[
{title:'面板1'},
{title:'面板2'}
]
}
]
}
);
}*/

/*//布局--感性认识
function()
{
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
width:400,
height:200,
layout:'column',//column:设定比例,fit:单个子元素自动充满,border:,form:子元素原有大小自动排列,card,table
items:[
{columnWidth:0.5,title:'面板1',height:100,collapsible:true,html:'aaa'},
{columnWidth:0.5,title:'面板2',height:100,collapsible:true,html:'bbb'},
{columnWidth:0.5,title:'面板2',height:100,collapsible:true,html:'ccc'}
]
}
);
}*/
/*//布局-border:将容器分为五个区域:east,south,west,north,center
function()
{
var vport=new Ext.Viewport(
{
enableTabScroll:true,
layout:"border",
items:[
{
title:"顶部面板",
region:"north",//位置
collapsible:false,//是否允许隐藏
height:50,
html:""
},
{
title:"底部面板",
region:"south",
collapsible:true,
height:50,
html:""
},
{
title:"右部面板",
region:"east",
collapsible:true,
width:100,
html:""
},
{
title:"左部面板",
region:'west',
width:100,
collapsible:true,
html:'菜单栏'
},
{
xtype:'tabpanel',
region:'center',
items:[
{title:'面板1'},
{title:'面板2'}
]
}
]
});
}*/
/*//布局-column:把整个容器看成一列,然后向容器放入子元素时,可通过在子元素中指定columnWidth或width来设定子元素所占的列宽，
//columnWidth:百分比，width:实际尺寸
//可混合用，混合用时:比例表示占剩余部分的百分比
function()
{
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'column',
width:500,
height:100,
items:[
{title:'列1',width:100},
{title:'列1',width:100},
{title:'列1',width:100},
{title:'列1',width:100},
{title:'列1',columnWidth:1}
]
}
);
}*/
/*//布局-fit:一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）
function()
{
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
title:'容器组件',
layout:'fit',
width:500,
height:100,
items:[
{title:'子元素1'},
{title:'子元素2'},
{title:'子元素3'},
{title:'子元素4'},
{title:'子元素5'}
]
}
);
}*/
/*//布局-form:是一种专门用于管理表单中输入字段的布局
function()
{
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
{
renderTo:'paneldiv',
title:'容器组件',
layout:'form',
width:300,
height:200,

defaultType:'textfield',//设置表单字段的默认类型
hideLabels:false,//是否隐藏表单内的标签
labelAlign:"right",//标签对齐方式
items:[
{fieldLabel:"请输入姓名",name:'name'},
{fieldLabel:"请输入地址",name:'address'},
{fieldLabel:"请输入电话",name:'tel'},
{fieldLabel:"请输入电话",name:'time',xtype:'datefield'}
]
}
);
}*/
/*//布局-accordion-可折叠的布局,注意其中用到了layoutConfig.
function()
{
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
{
renderTo:'paneldiv',
title:'容器组件',
layout:'accordion',
width:500,
height:200,
layoutConfig:{animate:false},
items:[
{title:'元素1',html:''},
{title:'元素2',html:''},
{title:'元素3',html:''},
{title:'元素4',html:''}
]
}
);
}*/
//布局-table:按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列
//用rowspan或colspan指定子元素所横跨的单元格数
function()
{
var panel=new Ext.Panel(
{
renderTo:'paneldiv',
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:''}
]
}
);
}