扩展Ext.viewport,形成一个基于iframe的框架布局
代码如下:
Ext.ux.IndexPage = Ext.extend(Ext.Viewport, {
welcomeUrl: "<iframe id='welcomeFrame' name='welcomeFrame' src='welcome.jsp' width='100%' height='100%' frameborder=0>",
topUrl: "<iframe id='topFrame' name='topFrame' src='top.jsp' width='100%' height='100%' frameborder=0>",
layout: "border",
menuTree: new Ext.tree.TreePanel({
title: "菜单树",
autoScroll: true,
border: false,
loader: new Ext.tree.TreeLoader({
dataUrl: "getMenu.action"
}),
root: new Ext.tree.AsyncTreeNode({
id: "0",
text: "菜单"
}),
animate: true,
enableDD: false,
rootVisible: true
}),
mainTab: new Ext.TabPanel({
plain: false,
activeTab: 0,
region: "center",
items: [{
title: "欢迎",
closable: false,
html: this.welcomeUrl
}]
}),
treeClick: function(node)
{
if (node.leaf)
{
var pageUrl = node.attributes.linkUrl;
if (pageUrl == undefined)
{
return;
}
if (pageUrl == "")
{
return;
}
var frameId = "frame_" + node.id;
var sheetId = "ext_sheet_" + frameId;
var oframe = Ext.get(frameId);
if (oframe == null)
{
var sframe = "<iframe id='" + frameId + "' name='" + frameId
+ "' src='" + pageUrl
+ "' width='100%' height='100%' frameborder=0>";
this.mainTab.add({
id: sheetId,
title: node.text,
closable: true,
html: sframe
});
}
else
{
oframe.dom.src = pageUrl;
}
var sheet = this.mainTab.getItem(sheetId);
this.mainTab.setActiveTab(sheet);
}
},
loadException: function(This, node, response)
{
var status = response.status;
var text = response.responseText;
switch (status)
{
case 404 :
alert("请求url不可用。");
break;
case 200 :
if (text.length > 0)
{
Ext.MessageBox.alert("错误", text);
}
break;
default :
Ext.MessageBox.alert("错误", status + "," + text);
break;
}
},
item2: new Ext.Panel({
title: 'Accordion Item 2',
html: '<empty panel>',
cls: 'empty'
}),
item3: new Ext.Panel({
title: 'Accordion Item 3',
html: '<empty panel>',
cls: 'empty'
}),
item4: new Ext.Panel({
title: 'Accordion Item 4',
html: '<empty panel>',
cls: 'empty'
}),
item5: new Ext.Panel({
title: 'Accordion Item 5',
html: '<empty panel>',
cls: 'empty'
}),
initComponent: function()
{
this.items = [{
region: "north",
height: 70,
collapsible: true,
minSize: 70,
border: false,
html: this.topUrl
}, {
region: "west",
title: "管理平台",
split: true,
width: 200,
collapsible: true,
items: [this.menuTree, this.item2, this.item3, this.item4,
this.item5],
layout: "accordion"
}, {
region: "center",
layout: "fit",
split: true,
items: [this.mainTab]
}, {
region: "south",
height: 20,
collapsible: true,
minSize: 20,
border: false,
html: "<img src='resources/images/bottom.jpg' width='100%' height='100%'>"
}];
Ext.ux.IndexPage.superclass.initComponent.call(this);
this.menuTree.on('click', this.treeClick,this);
}
});
Ext.reg("indexPage", Ext.ux.IndexPage);
使用方法:
var viewport = new Ext.ux.IndexPage();