extjs 页面布局设计（高分寻高手）
1.如图片所示，希望能给出设计的代码，例子简单的布局就行，数据不要求多只要一个就可以，
2.关于ext的语法我已经掌握和了解，希望在给代码的时候能给出一些注释。难理解的地方。
3.布局只要简单些就行，但是和图片不要差别太大。谢谢：）

分数我会追加到400分每天追加100.要是分数少，可以提出我会继续追加。

项目让我设计我只设计出大概的轮廓，但是与要求有些差距，因此寻找高手希望给出个代码例子。
如下图:


------解决方案--------------------
很漂亮，可惜我不会
努力！
------解决方案--------------------
ext里面的demo 包里有这样的例子的把 好像看到过 去网上下一个看看
------解决方案--------------------
你这个布局不是挺好的吗？


------解决方案--------------------
这样的效果在EXT的DEMO里就有类似的啊！
------解决方案--------------------
你去下ext手册吧，然后详细的谈一下他布局的那一块

那里有详细的说明
------解决方案--------------------
其实这个布局的代码好写，主要是怎么更优化，怎么更OO一些！哈哈


------解决方案--------------------
下面的代码,可以实现按你说的布局(treeview和grid我就没弄了,统一用panel实现的)
你把代码拷贝到你页面引入的JS文件中看看效果先.
这CSDN,上传个图片都这么麻烦......

Ext.onReady(function(e){
//路径由你自己的EXT路径决定
Ext.BLANK_IMAGE_URL = "../framework/ext2.0/resources/images/default/s.gif";
Ext.QuickTips.init();
//TOP显示
var top = new Ext.Panel({
//这里可以自己写HTML实现,不需要EXT的代码
region : 'north',
height : 60,
html : '你可以自己用HTML实现'
});
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];
//CENTER显示
var center = new Ext.Panel({
//这里是除了top之外的部分
tbar : [{
text : 'Btn 1',
iconCls : '' //这里设置按钮前面的图标
},'-',{
text : 'Btn 2'
},'->',{
text : '刷新'
},'-',{
text : '帮助'
},'-',{
text : '退出'
}],
region : 'center',
layout : 'border',
items : [{
//左边的树
region : 'west',
width : 200,
//layout : 'accordion',
title : 'Title',
collapsible : true,
split : true,
items : [{
region : 'north',
height : 200,
html : 'treeview'
},{
region : 'center',
title : '未读信息',
collapsible : true
}]
},{
region : 'center',
xtype : 'tabpanel',
activeTab : 0,
items : [{
title : '办公桌面',
layout : 'column',
autoScroll : true,
items : [{
columnWidth : .33,
border : false,
bodyStyle : 'padding:10 10 10 10;',
items : [{
title : '123',
iconCls : '', //指定小图标
tools : tools,
collapsible : true
}]
},{
columnWidth : .33,
border : false,
bodyStyle : 'padding:10 10 10 10;',
items : [{
title : '321',
collapsible : true
}]
},{
columnWidth : .33,
border : false,
bodyStyle : 'padding:10 10 10 10;',
items : [{
title : '231',
collapsible : true
}]
},{
columnWidth : .33,
border : false,
bodyStyle : 'padding:10 10 10 10',
items : [{
title : '111',
collapsible : true
}]
}]
}]
}]
//items : [left,sub_center]
});
var viewport = new Ext.Viewport({
layout : 'border',
items : [top,center]
});
});
------解决方案--------------------