日期:2014-05-16  浏览次数:20447 次

ExtJs非Iframe框架加载页面实现 解决自适应高度
最近开发项目用到ext,不想使用iframe,在参考了大量文章以后使用eval的方式,来模块化js代码,实现框架页

主页面的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();});

/**以下代码用来给叶子节点添加事件**/