打造Ext2.0模块化单页系统（二）

打造Ext2.0模块化单页系统（一）
http://microboat.iteye.com/blog/182682

上回说到模块基类的定义和主程序类定义，接下来我们看看具体某个模块的定义。
这里为了演示目的，借用API上的Array Grid Example
先看代码：

Ext.extend(demo.module, {
    init: function(){
        var myData = [
            ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
            ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
            ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
            ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
            ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
        ];
        
        var store = new Ext.data.SimpleStore({
            fields: [
               {name: 'company'},
               {name: 'price', type: 'float'},
               {name: 'change', type: 'float'},
               {name: 'pctChange', type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ]
        });
        store.loadData(myData);
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
                {header: "Change", width: 75, sortable: true, renderer: this.change, dataIndex: 'change'},
                {header: "% Change", width: 75, sortable: true, renderer: this.pctChange, dataIndex: 'pctChange'},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height:350,
            width:600,
            title:'Array Grid'
        });
        
        this.main.add(grid);
        this.main.doLayout();
    },
    change: function(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    },
    pctChange: function(val){
        if(val > 0){
            return '<span style="color:green;">' + val + '%</span>';
        }else if(val < 0){
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }
});

这个模块是在面板中显示一个数据列表，前面我们说过，模块的界面渲染部分放在统一的init方法中。
首先定义数据源，然后定义grid，其中2列的渲染调用这个模块的2个方法。
this.main.add(grid);
把grid加入这个模块的主面板，还记得this.main是什么吗？
完成后还需要把this.main重新渲染一下，让它根据新加入的内容重新计算宽度和高度。
this.main.doLayout();

好了，把这段js命名为module1.js并放在程序的modules目录下，当主程序的TabPanel中的第一个Tab被激活时就会自动加载这段js并执行，最终在Tab中显示一个数据表格。

这2篇文章只是提供一种模块化单页系统的思路，其实现较为简洁，例子也比较简单，在实际开发中可能会有更复杂的需求，比如说把一个大模块再划分为更细的模块来动态加载，几个模块之间的数据互访和方法互调，但只要本着这种思路，我们就可以把一个复杂的需求细化成多个小模块来实现。

评论

24 楼 qianniao08 2013-04-10  

好耶。。解决问题

23 楼 goodboy 2008-12-09  

左侧菜单能不能改进一下，现在的不好看，如能改成伸缩面板性质的好一点阿

22 楼 379548695 2008-10-28  

dm841128 写道

博主：你好，我按照你写的程序修改了一下，怎么一直报
demo.module = function(main){  
    this.main = main;  
    this.init();  
}  
这个里面的this.init()错，具体错误是“对象不支持此属性或方法”

仔细看下你有没有init()方法。

21 楼 dm841128 2008-10-24  

博主：你好，我按照你写的程序修改了一下，怎么一直报
demo.module = function(main){  
    this.main = main;  
    this.init();  
}  
这个里面的this.init()错，具体错误是“对象不支持此属性或方法”

20 楼 LeoZhang 2008-10-24  

var grid = new Ext.grid.GridPanel({  
             store: store,  
             columns: [  
                 {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},  
                 {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},  
                 {header: "Change", width: 75, sortable: true, renderer: this.change, dataIndex: 'change'},  
                 {header: "% Change", width: 75, sortable: true, renderer: this.pctChange, dataIndex: 'pctChange'},  
                 {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}  
             ],  
             stripeRows: true,  
             autoExpandColumn: 'company',  
             height:350,  
             width:600,  
             title:'Array Grid'  
         });  
           
         this.main.add(grid); 

请教一下，这里this.main.add(grid); 添加了个grid，如果我想除了添加grid外，再想添加个FormPanel，应该如何操作呢？

19 楼 znjq 2008-04-29  

不是hide而是autodestroy的话，会泄露

18 楼 applebomb 2008-04-29  

这样做是挺好，我就是这样做的，左边一个根据数据库菜单资源生成的树，对应右边激活相应的TAB，页面不缓存，且已经实现加载对应JS，嵌套页面WINDOW调用，返回数值等功能。例如用户查选择框就是一个单独的页面调用，但是调试起来就很麻烦，必须得用上firebug和IE Develop toolbar。

还有一个问题，就是这样动态加载，似乎所有ext-gen-id都没有释放过（用过了还是能拿到该id），用久了会不会资源泄露？期待结果

17 楼 oliverswan 2008-04-26  

您好microboat，我初学Ext，请问Ext做界面的话用什么做后台啊，一般是jsp&servlet么?如果和Struts，Tapestry等Web框架整合的话，容易做到么？能不能提供个思路啊？谢谢！

16 楼 moonzhao 2008-04-23  

麻烦楼主给做个demo样例吧，做惯了传统的frame框架，jsp之间怎么传值之类的。ext的模式实在是不好理解。挺迫切的。感谢楼主了。

15 楼 huaandylau 2008-04-22  

针对上次出现的问题,找到了出错原因所在, 即在原先的单页模式中, 每次加载一个js, 会把该js中的compoment add到main中(负责加载的父窗口), 上次我所实现的, 是重复加载同一个grid, 只是每次加载的数据不同, 这样, 造成每加载一次, main中就增加一个grid, 所以造成我只看到第一次加载的grid数据, 其实, 第二次,第三次等结果是依次排列在下面的

目前的一种处理方式是在event handle时, 先将container中已经加载的compoment remove
然后, 重新加载

14 楼 microboat 2008-04-21  

有空我会做个你这种界面的样例。

13 楼 goodboy 2008-04-20  

看看搂主的源代码，这里的1应该是变量吧，如果用1，打开哪一个tab也是module1.js的数据阿

12 楼 huaandylau 2008-04-20  

goodboy  能具体说明吗?

11 楼 goodboy 2008-04-20  

huaandylau 写道

可能上次表述有问题, 右边整体是个tabpanel(沿用了你的例子), 定义了一个panel作为子tab页, 该tab根据左边的机构树节点来载入相应的grid


问题是子tab页第一次载入grid后, 好像就缓存了该grid, 无论我点击左边任何一个节点,
右边tab页加载的grid都不会刷新数据, 一直显示为第一次加载的grid数据

部分代码如下

		
nodeClick : function(node, event) {	

			Ext.get("nodeId").value=node.id;

			this.loadMask.show();
				Ext.Ajax.request( {					
			method : 'GET',
			url : 'extjs/module/module1.js',

				scope : this,
				success : function(response) {
					var module = eval(response.responseText);
					this[this.tab1.id]=new module(this.tab1);					
					this.body.activate(this.tab1);
					this.body.doLayout();
					this.loadMask.hide();
						},
				failure : function(response) {
					Ext.Msg.alert("错误", this.tab1.id + " 加载失败!");
					// Ext.Msg.show("错误",t.id.toString());
					this.loadMask.hide();
				}
					});
				}
});

附上问题截图

url : 'extjs/module/module1.js',

这里的问题

10 楼 huaandylau 2008-04-20  

可能上次表述有问题, 右边整体是个tabpanel(沿用了你的例子), 定义了一个panel作为子tab页, 该tab根据左边的机构树节点来载入相应的grid


问题是子tab页第一次载入grid后, 好像就缓存了该grid, 无论我点击左边任何一个节点,
右边tab页加载的grid都不会刷新数据, 一直显示为第一次加载的grid数据

部分代码如下

		
nodeClick : function(node, event) {	

			Ext.get("nodeId").value=node.id;

			this.loadMask.show();
				Ext.Ajax.request( {					
			method : 'GET',
			url : 'extjs/module/module1.js',

				scope : this,
				success : function(response) {
					var module = eval(response.responseText);
					this[this.tab1.id]=new module(this.tab1);					
					this.body.activate(this.tab1);
					this.body.doLayout();
					this.loadMask.hide();
						},
				failure : function(response) {
					Ext.Msg.alert("错误", this.tab1.id + " 加载失败!");
					// Ext.Msg.show("错误",t.id.toString());
					this.loadMask.hide();
				}
					});
				}
});

附上问题截图

9 楼 goodboy 2008-04-18  

仔细看了一下，经过测试是可行的，但是事实上很多系统不会这样做的，不会把各种模块都列出来的吧，如果采用点击左侧菜单节点激活tab同时加载js应该如何实现呢

8 楼 microboat 2008-04-18  

能把你的界面截个图看看吗？如果右面是个grid，只要把数据源重新读取一下就可以啊。

7 楼 huaandylau 2008-04-18  

microboat  看了你的思路, 受益非浅, 按照这个思路, 我也做了一遍
但碰到一个新的问题, 就是单页(一个tab页)刷新的问题

我现在在做组织机构的维护界面, 左边是一个机构树, 右边是一个grid
机构是层级的, 点击一个机构, 右边显示该机构下的子机构列表

实现中, 发现tabpanel在set activate 一个tab页之后, 好像就把tab给缓存了, 表现上只是加载了第一次的数据

每次点击左边的机构, 在服务端log中都清晰的看到符合条件的记录从数据库加载

我也尝试了很多办法, 都没有效果, 想在次请教你和其他js高手,  有没有解决这个问题的办法

6 楼 microboat 2008-04-17  

既然这个面板是可以关闭的，那么当面板关闭后这个模块的主面板也就不存在了，重新打开的面板虽然和原来的id相同，但已经不是同一个东东了，所以模块初始化时会找不到this.main。

5 楼 aGuang 2008-04-16  

谢谢!我明白了.
刚刚对这个例子进行修改.
左边是一个tree菜单[west],右边[center]是一个TabPanel.想做的功能是点击菜单加载某个模块然后显示在tabpanel里面的一个面板,功能算是实现了.但是发现关闭如果关闭这个面板后再点击菜单面板的数据就不显示了.问题在tabActive 的事件处理里,if (this[t.id]) {return false;},就是处理不要重复加载.因之前有缓存起来
var module = eval(response.responseText);
this[t.id] = new module(t);
我把它改成 if (this[t.id]) {this[t.id].init();return;},即重新初始化,但是出错了...
[Exception... "'Error listening for "mousedown". Element "ext-gen179" doesn't exist.' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
请问这么解决这个问题呢?