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数据) 异步加载使用的是第三方的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" 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.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 + '" 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() ){// 获取这个模块的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);}});