ext单页面框架结构

rainytooo

最近开发项目用到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数据) 异步加载使用的是第三方的DWRTreeLoadervar 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.TreeNodevar 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() ){// 获取这个模块的idvar moduleId = nodeattr.module_name;var n = contentPanel.getComponent(moduleId);// 如果不存在 在TabPanel上添加一个tab id为模块的idif(!n){// 如果数组里初始化过此moduleif( 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);}});