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

博主你好,我把你的例子抄了一遍,但是在运行后loadMask没有hide,经过调试发现问题出现在Ajax加载js后执行上.
var module = eval(response.responseText);
firefox的错误信息如下:

sp has no properties
apply(function(), undefined, Object)ext-base.js (line 9)
success(Object tId=0 status=200 statusText=OK, Object method=GET url=module1.js scope=Object)mainModule.js (line 68)
apply(function(), Object tab1=Object tab2=Object tab3=Object body=Object, [Object tId=0 status=200 statusText=OK, Object method=GET url=module1.js scope=Object], undefined)ext-base.js (line 9)
Connection(Object tId=0 status=200 statusText=OK)ext-all.js (line 17)
getViewWidth(Object conn=XMLHttpRequest tId=0, Object scope=Object argument=Object timeout=30000, undefined)ext-base.js (line 10)
getViewWidth()ext-base.js (line 10)
[Break on this error] Ext={version:"2.0.2"};window["undefined"]=window["undefined"];Ext.apply=function...

请问该如何解决.还有我想问一个model1.js里面的this.main.doLayout()是哪里来的?貌似不是从Observable继承来的.

不好意思,是我自己写漏了一个字母.

this.main是这个模块的主窗口，也就是一个TabPanel里面的一个Tab，实际上就是Ext.Panel。doLayout()是Ext.Panel的公共方法。

这种方法很不错，很适合初期开发的时候使用，搂主不妨做一个完整的例子来演示，更能说明问题

谢谢!我明白了.
刚刚对这个例子进行修改.
左边是一个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]
请问这么解决这个问题呢?

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

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

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

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

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

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

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

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