html与ext布局,Ext布局类的介绍与使用

NestedLayoutPanel的布局例子

状态栏

Ext.onReady(function(){

var tb=new Ext.Toolbar('north-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 layout = new Ext.BorderLayout(document.body,{

north:{toolbar:tb,initialSize:28},

west:{

split:true,

initialSize:200,

titlebar: true,

collapsible: true,

minSize: 100,

maxSize: 400,

title:'树列表',

},

center: {},

south: {initialSize:28}

});

layout.beginUpdate();

var innerLayout=new Ext.BorderLayout('center-div',{

center:{

titlebar: true,

title:'条目列表',

},

south:{

split:true,

collapsible:true,

titlebar:true,

initialSize:200,

minSize: 100,

maxSize:400,

title:'内容',

collapsedTitle:'内容'

}

});

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'],

['张三','测试七','2007-9-1'],

['李四','测试八','2007-10-1'],

['王五','测试九','2007-11-1'],

['刘六','测试十','2007-8-1'],

['张三','测试十一','2007-9-1'],

['李四','测试十二','2007-10-1'],

['王五','测试十三','2007-11-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 grid = new Ext.grid.Grid('center-center', {

ds: ds,

cm: colModel,

autoExpandColumn:'title'

});

grid.render();

grid.getSelectionModel().selectFirstRow();

innerLayout.add('center', new Ext.GridPanel(grid));

innerLayout.add('south', new Ext.ContentPanel('center-south'));

layout.add('north', new Ext.ContentPanel('north-div'));

layout.add('west', new Ext.ContentPanel('west-div',{fitToFrame:true,resizeEl:'treelist'}));

layout.add('center', new Ext.NestedLayoutPanel(innerLayout));

layout.add('south', new Ext.ContentPanel('south-div'));

layout.restoreState();

layout.endUpdate();

layout.getRegion('west').on('collapsed',function(region){

region.collapsedEl.dom.style.background="url(../images/treelist.gif) center no-repeat";

},this);

var tree=new Ext.tree.TreePanel('treelist',{

animate:true

});

var root = new Ext.tree.TreeNode({

text: '文件夹',

allowDrag:false,

allowDrop:false

});

tree.setRootNode(root);

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

);

tree.render();

root.expand();

function onItemClick(item){

alert(item.text);

}

})