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 ] }); });

 

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); } });