Ext js Viewport实例

Ext.onReady(function() {

//上边布局
var topPanel=new Ext.Panel({
region : 'north',
title : '时效管理系统',
html: '<img src="./images/logo.jpg" width=100% height=100%>',
split : true,
height : 130,
minSize : 100,
maxSize : 200,
collapsible : true
});

//功能树
var menu = new Ext.tree.TreePanel({
autoScroll : true,
animate : true,
enableDD : true,
border : false,
containerScroll : true,
rootVisible: true,
expanded: true,
loader : new Ext.tree.TreeLoader({
dataUrl : './js/treeData.js'
}),
root : new Ext.tree.AsyncTreeNode({
text : '系统菜单',
draggable : false,
id : '0'
}),
listeners:{
'click':function(node,event){
if (node.id == "0"){
return;
}
event.stopEvent();
var n = MainPanel.getComponent(node.id);
//判断是否打开面板
if(!n){
var tabUrl = node.attributes.href;
n = MainPanel.add({
'id':node.id,
'title':node.text,
closable:true,
//通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+tabUrl+'></iframe>'
});
}
MainPanel.setActiveTab(n);
}
}
});

//左边布局
var leftPanel = new Ext.Panel({
region : 'west',
title : '菜单栏',
id:'leftTree',
width : 230,
collapsible : true ,
split: false,
layoutConfig: {
animate: true
},
items:menu
});

//右边布局
var MainPanel = new Ext.TabPanel({
id : 'home',
region: 'center',
activeTab: 0,
autoDestroy:false,
listeners : {
remove : function(tp,c){
c.hide();
}
},
items:[{
id:'homePage',
title:'首页',
autoScroll:true
}]
});

var viewport = new Ext.Viewport({
layout : 'border',
items : [topPanel, leftPanel,MainPanel]
});

});

treeData.js
[{id:2,text:'上班时间配置',href:'work.do?method=query',leaf: true},
{id:3,text:'节假日配置',href:'work.do?method=query',leaf: true},
{id:4,text:'大客户信息配置',href:'work.do?method=query',leaf:true}
]