ExtJs非Iframe框架加载页面实现 解决自适应高度
主页面的js代码 main.js
// 页面加载开始
// 定义一个锁屏的遮罩 因为树菜单是异步读取的
var myMask_info = "加载数据中,请稍后...";
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:myMask_info});
// 模块的数组 用来缓存模块function的
var moduleArray = {};
Ext.onReady( function() {
Ext.QuickTips.init();
// 加载锁屏 loadmask
myMask.show();
// 动态获取树节点 这里ajax使用的是dwr(直接输出json数据) 异步加载使用的是第三方的DWRTreeLoader
var dwrloader = new Ext.ux.DWRTreeLoader({
dwrCall:AsyncMainSev.getUserFuncTreeJSON
});
// 主页面上初始化一个Tab面板
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
closable:true,
html:'<iframe id="frame_main" src="pages/main/child1.html" mce_src="pages/main/child1.html" width="100%" height="400" frameborder="0" scrolling="auto"></iframe>'
}]
});
var _tree = new Ext.tree.TreePanel({
id:'forum-tree',
region:'west',
title:'功能菜单',
split:true,
width: 325,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
rootVisible:false,
lines:false,
// selModel: new Ext.tree.MultiSelectionModel(),
autoScroll:true,
loader: dwrloader,
root: new Ext.tree.AsyncTreeNode({text:'root',hasChildren:true,id: '0'})
/*listeners: {
'checkchange': function(node, checked){
if(checked){
node.getUI().addClass('complete');
}else{
node.getUI().removeClass('complete');
}
}
}*/
});
//加载完成事件 隐藏掉锁屏loadmask
_tree.addListener("load",function(){myMask.hide();});
/**以下代码用来给叶子节点添加事件**/
var tree = Ext.getCmp('forum-tree');
/*
var sm = tree.getSelectionModel();
sm.on('selectionchange', function(sm, node){
//console.log(node.attributes.attributes.url);
// 测试iframe的方式 而注释掉
var n = contentPanel.getComponent(node.id);
if (!n) { ////判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true,
autoLoad:{url:node.attributes.attributes.url, scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
var n = contentPanel.getComponent(node.id);
if(!n){
n = contentPanel.add({
id:node.id,
title:node.text,
autoScroll:true,
closable:true,
html:'<iframe id="frame_main" src="' + node.attributes.attributes.url + '" mce_src="' + node.attributes.attributes.url + '" width="100%" height="400" frameborder="0" scrolling="auto"></iframe>'
});
}
contentPanel.setActiveTab(n);
});
*/
// 10-03-02 再次修改为tree.on方法 取消原来的在selectionmodel上做
/*
tree.on('click', function(node){
// 如果是叶子节点
if ( node.isLeaf() ){
// 得到节点对象Ext.tree.TreeNode
var n = contentPanel.getComponent(node.id);
// 如果不存在 在TabPanel上添加一个tab 挂载iframe页面
if(!n){
n = contentPanel.add({
id:node.id,
title:node.text,
autoScroll:true,
closable:true,
html:'<iframe id="frame_main" src="'
+ node.attributes.attributes.url
+ '" mce_src="'
+ node.attributes.attributes.url
+ '" width="100%" height="400" frameborder="0" scrolling="auto"></iframe>'
});
}
// 激活
contentPanel.setActiveTab(n);
}
});
*/
// 10-03-15 再次修改 实验性修改为之加载外部文件js 不使用框架页了
tree.on('click', function(node){
myMask.show();
var nodeattr = node.attributes.attributes;
// 如果是叶子节点
if ( node.isLeaf() ){
// 获取这个模块的id
var moduleId = nodeattr.module_name;
var n = contentPanel.getComponent(moduleId);
// 如果不存在 在TabPanel上添加一个tab id为模块的id
if(!n){
// 如果数组里初始化过此module
if( moduleArray[moduleId] != undefined ){
var module = moduleArray[moduleId];
var moduleInstance = new module();
var outCmp = contentPanel.add(moduleInstance);
contentPanel.setActiveTab(outCmp);
myMask.hide();
}else{
// ajax请求 来eval一段module的代码 并执行 然后加到tabpanel上
Ext.Ajax.request({
method: 'GET',
url: nodeattr.js_source,
success: function(response){
var module = eval(response.responseText);
moduleArray[moduleId] = module;
var moduleInstance = new module();
var outCmp = contentPanel.add(moduleInstance);
contentPanel.setActiveTab(outCmp);
myMask.hide();
}
});
}
}
// 获取js代码的绝对路径
}
});
// 开始渲染整个面板 并整合定义好的tree和TabPanel组建
var viewport = new Ext.Viewport( {
layout : 'border',
items : [ {
xtype: 'box',
region: 'north',
height: 30
},
_tree,
contentPanel
]
});
});
来自：http://hi.baidu.com/wastorode/blog/item/fdfd37aca0b588a3ca130c7a.html