題記:研究使用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基本相同。
那么有什么不同呢,說幾點我的理解,未必正確僅供參考:
1、Ext是先解析再執行,那么js文件加載進來的要解析,會添加進總體控制中,在chrome中可對controller中的代碼斷點調試。
2、用Ext.application加載的模塊是脫離控制的,文件沒有進入no domain隊列,所以沒有調試入口。
還有幾個問題沒有解決:
1、在view中怎么更具data(也可以說是store)動態控制呈現的元素與行為邏輯。
2、怎樣動態指定view的id,實現多tab展示。