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',
&nb