单页面框架

最近开发项目用到ext,不想使用iframe,在参考了大量文章以后使用eval的方式,来模块化js代码,实现框架页


主页面的js代码 main.js
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" 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 + '" 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   
                        + '" 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   
            ]   
    });   
});  
*******************************************************************************
ajax请求的js代码的路径是写到了节点node的属性里,在初始化树节点的时候就已经动态的写好了

一个子模块的示例 用户管理

useradmin.js
*************************************************************************************
// 用户管理模块   
Ext.extend(Ext.Panel, {   
    constructor: function(config) {   
        // 表格模型   
        var cm = new Ext.grid.ColumnModel([   
           {   
            id: 'username',   
            header: "姓名",   
            dataIndex: 'username',   
            width: 100   
               
         },{   
            id: 'email',   
            header: "电子邮件",   
            dataIndex: 'email',   
            width: 100   
         },{   
            id: 'createdate',   
            header: "注册时间",   
            dataIndex: 'createdate',   
            width: 100   
         },{   
            id: 'updatedate',   
            header: "修改时间",   
            dataIndex: 'updatedate',   
            width: 100   
         }]);   
        //console.log(basePath+'campaign/id/review');   
        // 数据来源储存   
        var user_store = new Ext.data.Store({   
            url: basePath+'users/ajaxserv',   
               
            reader: new Ext.data.JsonReader({   
                root: 'users',   
                totalProperty: 'totalCount',   
                id: 'id'  
            }, [   
                'username', 'email', 'createdate', 'updatedate'  
            ])   
        });   
       
        cm.defaultSortable = true;   
           
        user_store.load();   
        config = Ext.apply({   
            id: 'm_useradmin',   
            title: '用户管理',   
            autoScroll: true,   
            closable:true ,    
            items:[   
                new Ext.grid.GridPanel({   
                    store: user_store,   
                    cm: cm,   
                    stripeRows: true,   
                    height: 350,   
                    //width: 800,   
                    autoWidth : true,      
                    loadMask: {msg:'正在加载数据,请稍后'},   
                    title: '用户列表'  ,   
                    tbar: [{ text: '添加', iconCls: 'new-item', tooltip: { title:'添加用户', text:'在此系统中注册一个新的用户'} }],   
                    bbar: new Ext.PagingToolbar({   
                        pageSize: 25,   
                        store: user_store,   
                        displayInfo: true,   
                        displayMsg: '显示记录 {0} - {1} of {2}',   
                        emptyMsg: "没有任何记录"  
                    })   
                })   
            ]   
        }, config);   
        module.superclass.constructor.call(this, config);   
    }   
});  

**************************************************************************************

转:http://rainytooo.iteye.com/blog/617765