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

 

 

评论

2 楼 pk272205020 2010-04-19  

哈哈,写得不错

1 楼 onlydo 2010-03-18  

source 不错。