EXT最常用的布局
本人在做项目中，觉得这个布局最为常用（应该算是中国式的布局）所以记录下来，供大家参考！！！
Ext.onReady(function(){
var tb=new Ext.Toolbar('toolbar-div');//创建一个工具条
tb.add(new Ext.Toolbar.SplitButton({
text: '文件',
cls: 'x-btn-text-icon blist',
menu : {items: [
{text: '新建', handler: onItemClick},
{text: '保存', handler: onItemClick},
{text: '加载', handler: onItemClick}
]}}),
new Ext.Toolbar.MenuButton({
text: '编辑',
cls: 'x-btn-text-icon blist',
menu : {items: [
{text: '复制', handler: onItemClick},
{text: '粘贴', handler: onItemClick}
]}})
);
var root = new Ext.tree.TreeNode({
text: '文件夹',
allowDrag:false,
allowDrop:false
});
root.appendChild(
new Ext.tree.TreeNode({text:'收件箱',allowDrag:false}),
new Ext.tree.TreeNode({text:'发件箱',allowDrag:false}),
new Ext.tree.TreeNode({text:'联系人',allowDrag:false}),
new Ext.tree.TreeNode({text:'已删除的邮件',allowDrag:false})
);
var myData = [
['张三','测试','2006-1-1'],
['李四','测试一','2006-5-6'],
['王五','测试二','2007-12-1'],
['刘六','测试三','2006-12-1']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({}, [
{name:'sender'},
{name:'title'},
{name:'sendtime'}
])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([
{header:'发送人',width:100,sortable:true,dataIndex:'sender'},
{id:'title',header:'标题', width:100,sortable:true,dataIndex:'title'},
{header:'发送时间',width:75,sortable:true,dataIndex:'sendtime'}
]);
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el:'north-div',
tbar:tb,
height:26
}),
new Ext.tree.TreePanel({
region:'west',
contentEl:'west-div',
title:'树列表',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 0',
root:root
}),
{
region:'center',
layout:'border',
items:[
new Ext.grid.GridPanel({
region:'center',
el:'center-center',
title:'条目列表',
ds: ds,
cm: colModel,
autoScroll: true
}),
{
region:'south',
contentEl:'center-south',
title:'内容',
split:true,
collapsible:true,
titlebar:true,
height:200,
minSize: 100,
maxSize:400,
collapsedTitle:'内容'
}
]
},
new Ext.BoxComponent({
region:'south',
el:'south-div',
height:24
})
]
});
root.expand()
function onItemClick(item){
alert(item.text);
}
})