ext单页面实现框架页

最近开发项目用到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();});

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

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