Open smlsunxie opened 10 years ago
各自完成相關的 controller,做一次以後新增防呆都不用各自動手囉!
controller init add container refs
將原在 utilities 的函式移至 commonController 透過 mixins 的特性加入到標準維護的 controller,跟使用 utilities 的差別在於 mixins 特性將可以操作 this 為對象 controller 對於控制上將會更加方便,相關程式說明如下:
Ext.define('foodprint.controller.commonController', {
extend: 'Ext.Base',
respondFailure: function(action, config) { }, // 原 utilities
respondSuccess: function(action, config) { }, // 原 utilities
doMainEditorUpdate: function() { }, // 主要 editor Update
doMainEditorCreate: function() { }, // 主要 editor Create
doMainEditorDelete: function() { },// 主要 editor Delete
doMainEditorSave: function() { }, // 主要 editor Save
doSubEditorUpdate: function() { }, // 子單身 editor Update
doSubEditorDelete: function() { }, // 子單身 editor Delete
doSubEditorSave: function() { }, // 子單身 editor Save
onMainFormValidityChange: function(basic, valid, eOpts) { }, // 主要 editor
doSubEditorCreate: function() { }, // 子單身 editor Create
readMainForm: function(config) { }, // 主要 editor 讀取 grid 資料到 form
submitUpdate: function(config) { }, //與後端溝通 Update
submitDelete: function(config) { }, //與後端溝通 Delete
submitCreate: function(config) { }, //與後端溝通 Create
validityChange: function(basic, valid,config) { }, // 主要與子單身共用表單驗證
activeListTab: function() { }, //切換至清單頁籤
activeViewerTab: function() { }, //切換至編輯頁籤
readSubForm: function(obj, record, item, index, e, eOpts) { }, // 子單身 editor 讀取 grid 資料到 form
cleanSubEditor: function() { } // 清除子單身表單
});
上述說明每個函式的使用時機,實作細節請看原始碼。
利用上面的 commonController 在透過 mixins 的特性,我們可以簡化 controller 的撰寫,以 itemController 為例:
Ext.define('foodprint.controller.ItemEditorController', {
extend: 'Ext.app.Controller',
mixins: {
commonController: 'foodprint.controller.commonController'
},
models: [
'Operation',
'Item',
'Workstation',
'ItemRoute'
],
stores: [
'OperationStore',
'WorkstationStore',
'ItemStore',
'ItemRouteDeepStore'
],
views: [
'ItemEditorCt'
],
refs: [
{
ref: 'itemGrid',
selector: 'itemeditorct #itemGrid'
},
{
ref: 'itemForm',
selector: 'itemeditorct #itemForm'
},
{
ref: 'commonImageUploader',
selector: 'itemeditorct commonimageuploader'
},
{
ref: 'itemToolbar',
selector: 'itemeditorct #itemToolbar'
},
{
ref: 'itemRouteToolbar',
selector: 'itemeditorct #itemViewer commoneditortoolbar'
},
{
ref: 'itemRouteGrid',
selector: 'itemeditorct #itemRouteGrid'
},
{
ref: 'itemRouteForm',
selector: 'itemeditorct #itemRouteForm'
}
],
//若無特殊的處理,直接 binding commonController 中的函式
init: function(application) {
this.control({
'itemeditorct #itemToolbar button[itemId=commonCreateBtn]':{
click:this.doMainEditorCreate
},
'itemeditorct #itemToolbar button[itemId=commonDeleteBtn]':{
click:this.doMainEditorDelete
},
'itemeditorct #itemToolbar button[itemId=commonSaveBtn]':{
click:this.doMainEditorSave
},
'itemeditorct #itemToolbar button[itemId=commonUpdateBtn]':{
click:this.doMainEditorUpdate
},
'itemeditorct grid[itemId=itemGrid]':{
itemdblclick:this.readItemForm
},
'itemeditorct #itemRouteToolbar button[itemId=commonCreateBtn]':{
click:this.itemRouteCreate
},
'itemeditorct #itemRouteToolbar button[itemId=commonDeleteBtn]':{
click:this.doSubEditorDelete
},
'itemeditorct #itemRouteToolbar button[itemId=commonSaveBtn]':{
click:this.doSubEditorSave
},
'itemeditorct #itemRouteToolbar button[itemId=commonUpdateBtn]':{
click:this.doSubEditorUpdate
},
'itemeditorct #itemViewer form[itemId=itemForm]':{
validitychange:this.onMainFormValidityChange
},
'itemeditorct #itemViewer grid[itemId=itemRouteGrid]':{
itemdblclick:this.readItemRouteForm
}
});
this.mainEditor = {
grid:this.getItemGrid,
form:this.getItemForm,
toolbar:this.getItemToolbar,
domainName:'item'
};
this.subEditor = {
grid:this.getItemRouteGrid,
form:this.getItemRouteForm,
toolbar:this.getItemRouteToolbar,
domainName:'itemRoute'
};
},
// 需要特殊處理的部份可宣告個別的函式,在呼叫 commonController中的函式前後進行特別處理
readItemForm: function(obj, record, item, index, e, eOpts) {
this.readMainForm(this.mainEditor);
this.getItemRouteGrid().loadItemRoute(record.data.id);
},
itemRouteCreate: function() {
this.doSubEditorCreate();
var item_id = this.mainEditor.form().down('numberfield[name=id]').getValue();
var store = this.mainEditor.grid().getStore();
this.subEditor.form().getForm().setValues({
'item.id': item_id,
sequence:store.getCount()+1
});
},
readItemRouteForm: function(obj, record, item, index, e, eOpts) {
var item_id = this.mainEditor.form().down('numberfield[name=id]').getValue();
this.subEditor.form().getForm().setValues({
'item.id': item_id
});
this.readSubForm(obj, record, item, index, e, eOpts);
}
});
上述調整,可以將重覆的程式碼大量減少,如此一來可以有一致的防護與動作,需要加新特性只要是共用的只要寫一次,所有的 controller 都可以快速套用
上述類別使用於 controller 範例
所有與後端的溝通還有 editor 主要的元件互動,皆定義於共用元件,如此一來只要使用共用元件將會有一致的防呆,訊息輸出,還有操作回饋,未來需要加強驗證,只要在共用元件調整即可同步致所有對應的 controller。