<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>