ExtJs 帶參數的MVC

題記：研究使用ext兩個星期了，從痛苦中逐漸走向明朗。

展現列表的子列表的數據時須要將當前的數據傳給下一個mvc。

好比用戶列表，點擊一個用戶查看該用戶的日誌列表。

首先是controller，放一個方法，注意showLog方法的兩個參數，還有mvcConfig參數是個人自定義參數，供下一個mvc去調用。用Ext.applation動態添加controller。

Ext.define("admin.controller.collection.MembController", {
    extend: "Ext.app.Controller",
    views: ["collection.membList"],
    models: ["collection.MembModel"],
    stores: ["collection.MembStore"],
    init: function () {

        if (!Ext.getCmp('membList')) {           

            var tab = Ext.create('custom.panelTab');
            var view = Ext.create('admin.view.collection.membList');
            tab.createTab(view);
        } else {

            Ext.getCmp('membList').show();
        }

    },
    //查看日誌
    showLog: function (grid, rowIndex) {
        var me = this;
        var ctrl = Ext.create('admin.controller.collection.MembController');
        var record = this.getStore().getAt(rowIndex);

        var rowData = grid.store.data.items[rowIndex].data;
        
        //添加controller
        Ext.application({
            extend: 'Ext.app.Application',
            appFolder: "app/",//文件路徑
            name: 'admin',
            controllers: ['collection.SingleLogController'],
            mvcConfig: {
                userId: rowData.id
            }
        });
    }
});

在view中綁定點擊事件，這個比較基礎

Ext.define('admin.view.collection.membList', {
    extend: 'Ext.grid.Panel',
    requires: ['mc.date'],
    xtype: 'grid',
    title: '成員管理',
    id: 'membList',
    closable: true,
    store: 'collection.MembStore',
    initComponent: function () {
        var me = this;
        var ctrl = Ext.create('admin.controller.collection.MembController');

        Ext.apply(me, {
            columns: [
                {
                    header: '編號',
                    dataIndex: 'id',
                    width: 60,
                },
                {                    
                    header: '姓名',
                    dataIndex: 'username',
                    width: 120,
                },
                {
                    header: '操做',
                    xtype: 'actioncolumn',
                    width: 50,
                    sortable: false,
                    menuDisabled: true,
                    items: [
                        {
                            icon: 'resources/css/ext/images/icons/fam/user_suit.png',
                            tooltip: '工做日誌',
                            scope: this,
                            handler: ctrl.showLog
                        }

                    ]
                }
            ]
        });

        me.callParent(arguments);
    }
});

接下來就是日誌的controller處理了。

Ext.define('admin.controller.collection.SingleLogController', {
    extend: 'Ext.app.Controller',
    views: ['collection.memberLogList'],
    models: ['collection.LogModel'],
    stores: ['collection.SingleLogStore'],
    init: function () {

        var mvcConfig = this.getApplication().mvcConfig;
        
        //console.log('系統日誌');
        if (!Ext.getCmp('memberLogList')) {
            
            var tab = Ext.create('custom.panelTab');
            var view = Ext.create('admin.view.collection.memberLogList');
            var store = view.getStore();

            store.setProxy({
                type: 'jsonp',
                url: ajaxConfig.member.logList,//+ "?id=" + mvcConfig.userId
                extraParams: {//參數

                    //memberId: mvcConfig.userId                    
                    "params": "{member:" + mvcConfig.userId + "}"
                }, reader: {
                    totalProperty: 'total',
                    root: 'results'
                }
            });
            //store.load();因爲第一次是自動加載執行，因此不須要手動載入

            tab.createTab(view);
        } else {
            var view = Ext.getCmp('memberLogList');
            var store = view.getStore();

            store.setProxy({
                type: 'jsonp',
                url: ajaxConfig.member.logList,//+ "?id=" + mvcConfig.userId
                extraParams: {//參數

                    //memberId: mvcConfig.userId                    
                    "params": "{member:" + mvcConfig.userId + "}"
                }, reader: {
                    totalProperty: 'total',
                    root: 'results'
                }
            });
            store.reload();
            Ext.getCmp('memberLogList').show();
        }
    },

});

注意自定義參數的獲取，與store對數據的控制。

因爲Ext的mvc是按文件系統（fileSystem）化分邏輯的，因此上面的代碼段是分別放在不一樣的js文件中的，路徑和類名的對應關係注意一下。

再說一下Ext的機制，模塊按需加載，模塊的組件間按配置與邏輯引入。首先是Ext.applation是最頂級的管理者，全部的組件（或者叫應用，英文原稱Application），而後每一個mvc從本身的application開始。好比點擊某個dom要建立一個應用，能夠點擊以後執行下面代碼：

var app = $(this).attr('data-app');
Ext.create(app);

很顯然我用的是jquery來做爲輔助實現，這裏的app是「admin.app.collection.log」，而後Ext會加載js文件，文件內容以下：

Ext.define('admin.app.collection.log', {
    extend: 'Ext.app.Application',
    name: 'admin',
    controllers: ['collection.LogController'],
    mvcConfig: {
        userId:1
    }
});

這就建立了一個application，而後再由application加載配置的controller，文件式加載就完成了。上面第一個代碼塊中的Ext.application與上面js文件中的Ext.define基本相同。

那麼有什麼不一樣呢，說幾點個人理解，未必正確僅供參考：

一、Ext是先解析再執行，那麼js文件加載進來的要解析，會添加進整體控制中，在chrome中可對controller中的代碼斷點調試。

二、用Ext.application加載的模塊是脫離控制的，文件沒有進入no domain隊列，因此沒有調試入口。

 

還有幾個問題沒有解決：

一、在view中怎麼更具data（也能夠說是store）動態控制呈現的元素與行爲邏輯。

二、怎樣動態指定view的id，實現多tab展現。