<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</title>
<link rel="stylesheet" type="text/css"
href="/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext/ext-all.js"></script>
<script type="text/javascript">
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'],
['张三','测试四','2007-6-1'],
['李四','测试五','2007-7-1'],
['刘六','测试六','2007-8-1'],
['张三','测试七','2007-9-1'],
['李四','测试八','2007-10-1'],
['王五','测试九','2007-11-1'],
['刘六','测试六','2007-8-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);
}
});
</script>
</head>
<body>
<div id="north-div">
<div id='toolbar-div'></div>
</div>
<div id="west-div"></div>
<div id='center-center'></div>
<div id='center-south'></div>
<div id="south-div"></div>
</body>
</html>