extjs的viewport问题。。求高手解答。在线等 - Web 开发 / Ajax
代码如下：
Ext.onReady(function() {
new Ext.Viewport({
layout : 'border',
items : [{
region : 'north',
html : '<h1 class="x-panel-header">IT管理系统</h1>',
autoHeight : true,
border : false,
margins : '0 0 5 0'
},{
region : 'west',
collapsible : true,
title : '菜单',
xtype : 'treepanel',
width : 200,
autoScroll : true,
split : true,
loader : new Ext.tree.TreeLoader(),
root : new Ext.tree.AsyncTreeNode({
expanded : true,
children : [ {
text : '数据管理',
children : [{
text : '新建设备记录',
leaf : true,
url : 'addITInfo.jsp'
},{
text : '设备记录维护',
leaf : true,
url : 'iTInfoList.jsp'
}]
}, {
text : '用户管理',
children : [{
text : '新建用户',
leaf : true,
url : 'addUserinfo.jsp'
},{
text : '维护用户数据',
leaf : true,
url : 'userList.jsp'
}]
}, {
text : '单位管理',
children : [{
text : '新建单位',
leaf : true,
url : 'bbbbb'
},{
text : '维护单位数据',
leaf : true,
url : 'aaaaaa'
}]
} ]
}),
rootVisible : false
},{
region : 'center',
xtype : 'tabpanel',
items : {
title : '首页',
autoLoad : 'tUserList.action'
}
} ]
});
});
怎么才能点击左右的子节点在右侧面板中加载我已经写好的页面。
求高手解答
[解决办法]
Ext.onReady(function() {
var addPanel = function(btn, event) {
var n;
n = tabPanel.getComponent(btn.id);
if (n) {
tabPanel.setActiveTab(n);
return;
}
n = tabPanel.add({
id : btn.id,
title : btn.text,
html : '<iframe width=100% height=100% src=' + btn.id + '.jsp />',
closable : 'true'
});
tabPanel.setActiveTab(n);
}
var item1 = new Ext.Panel({
title : '数据管理',
cls : 'empty',
items : [new Ext.Button({
id : 'addITInfo',
text : '新建设备记录',
width : '100%',
listeners : {
click : addPanel
}
}),
new Ext.Button({
id : 'iTInfoList',
text : '设备记录维护',
width : '100%',
listeners : {
click : addPanel
}
})]
});
var item2 = new Ext.Panel({
title : '用户管理',
cls : 'empty',
items : [new Ext.Button({
id : 'addUserinfo',
text : '新建用户',
width : '100%',
listeners : {
click : addPanel
}
}),
new Ext.Button({
id : 'userList',
text : '维护用户数据',
width : '100%',
listeners : {
click : addPanel
}
})]
});
var item3 = new Ext.Panel({
title : '单位管理',
cls : 'empty',
items : [new Ext.Button({
id : 'addUserinfo',
text : '新建单位',
width : '100%',
listeners : {
click : addPanel
}
}),
new Ext.Button({
id : 'userList',
text : '维护单位数据',
width : '100%',
listeners : {
click : addPanel
}
})]
});
var top = new Ext.TabPanel({
region : 'north',
html : '<h1 class="x-panel-header">IT管理系统</h1>',
autoHeight : true,
border : false
});
var accordion = new Ext.Panel({
region : 'west',
split : true,
width : 210,
items : [item1, item2, item3]
});
var tabPanel = new Ext.TabPanel({
region : 'center',
enableTabScroll : true,
deferredRender : false,
activeTab : 0,
items : [{
title : '首页',
html : "欢迎使用IT管理系统"
}]
});
var viewport = new Ext.Viewport({
layout : 'border',
items : [top,accordion, tabPanel]
});
});
按照LZ要求改了改。。
没用treepanel。。用的是按钮
