Ext4.2.1 Model-Store-controller交互實例
這篇博客總結了富客戶端應用程序設計中，Ext MVC application architecture 概念的實際應用。針對Model、Store、Controller和Action四個核心模塊進行關鍵部位該如何使用和交互的介紹。按照設計的先后順序給出對應類和腳本。每個類和腳本都有注釋，這個信息很重要。</span>
Model層</b></span>
兩個Model：分別對應主表，和主表的從表</span>
主 model，對應主表
Ext.define('AM.model.material.apply.ListModel', {
extend: 'Ext.data.Model',
requires:['AM.model.material.apply.DetailModel'],
fields:
[
{name: 'id'}, //索引
{name: 'sqyj'}, //申請依據
{name: 'sqdw'}, //申請單位
{name: 'sqdwmc'}, //申請單位名稱
{
name: 'sqsj',// 申請時間
type: 'date',
dateFormat:'Y-m-d H:i:s'
},
{
name: 'sqlb', // 申請類別 0-維護保養 1-裝備修理 2-戰備補充
type:'int'
},
{
name: 'status',// 狀態(已下達/未下達/已處理)
type:'int'
},
//擁有者
{name:'owner'},
//創建時間
{
name:'cjsj',
type:'date',
dateFormat:'Y-m-d H:i:s'
}
],
hasMany:
{
model:'AM.model.material.apply.DetailModel',name:'qcsqmxbs'
}
});</pre>
</span>
明細表 model 對應主表的明細表或叫從表
Ext.define('AM.model.material.apply.DetailModel',
{
extend:'Ext.data.Model',
fields:
[
{name: 'id'}, //索引
{name: 'qcsqb'}, //器材申請
{name: 'qcdm'}, //器材代碼
{name: 'qcmc'}, //器材名稱
{
name: 'sqlb', //類別(器材/物資)
type: 'int'
},
{name: 'qcsl'}, //器材數量
{name: 'jldw'}, //計量單位
{name: 'zbmc'}, //裝備名稱
{name: 'zbdm'}, //裝備代碼
//狀態
{
name:'status',
type:'int'
},
//擁有者
{name:'owner'},
//創建時間
{
name:'cjsj',
type:'date',
dateFormat:'Y-m-d H:i:s'
}
],
validations:
[
//用于設置字段為必填項（0為有效值，空字符串未無效值），若字段沒有值或為無效值則不通過驗證
{type:'presence',field:'qcmc'},
{type:'float',field:'qcsl'}
],
idProperty:'id',
foreignKey:'qcsqb'
});</pre>
</span>
Store層
與兩個Model對應的Store
主表、從表對應的Store
Ext.define('AM.store.material.apply.ListStore',
{
extend:'Ext.data.Store',
model:'AM.model.material.apply.ListModel',//使用到的對應的Model
autoLoad:false,
pageSize:25,
sorters:
[
{
property:'sqsj',
direction:'DESC'
}
],
proxy:
{
type:'ajax', //代理模式！
api:
{
create:'material/apply!add.action', //與對應Action的方法的交互方式！
read: 'material/apply!list.action',
update:'material/apply!update.action',
destroy:'material/apply!destroy.action'
},
reader:
{
type:'json',
root:'items',
totalProperty: 'results',
successProperty: 'success',
messageProperty: 'message'
},
writer: Ext.create('FH.util.JsonWriter',
{
//writeAllFields:false
}),
listeners:
{
exception: function(proxy, response, operation)
{
Ext.MessageBox.show(
{
title: '請求處理錯誤',
msg: Ext.isString(operation.getError())? operation.getError() : '請確認網絡或服務是否正常',
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});</pre>
</span></span>
視圖層：View</b></span>
對應的兩個View如下。這里值得一說的是在ExtJS-4的新特性和規范中，視圖與Store和Model的關系由controller來控制。所以，在你看到的所有的 view 中，基本只有界面組件和一些事件監聽的代碼，很少能看到有Store和Model的出現。這點要注意。
這個功能頁面的主視圖
Ext.define('AM.view.material.apply.ListView',
{
extend:'Ext.container.Container',
id:'MaterialApplyListView',
alias:'widget.MaterialApplyListView', //對應left菜單里viewId
require:
[
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.RowExpander',
'Ext.selection.CheckboxModel'
],
layout:'border',
closable:'true',
initComponent:function ()
{
//其中包含大量的邏輯腳本，一般不會少于300行
//只為了說明使用方式，這里省略代碼。
}
});</pre>
</span></span>DetailView代碼如下：
對應從表的明細界面，附屬于這個功能的主界面
Ext.define('AM.view.material.apply.DetailView',
{
extend:'Ext.window.Window',
require:[
'Ext.selection.CellModel',
'Ext.grid.',
'Ext.data.',
'Ext.util.*'
],
title:'XXX明細',
resizable:false,
closable:false,
width:'900',
height:'480',
modal:'true',
layout:'border',
initComponent:function ()
{
//其中包含大量的邏輯腳本，一般不會少于300行
//只為了說明使用方式，這里省略代碼。
}
});</pre>
</span></span></div>
重要的Controller
由于這一段代碼在這里總是報出有非法字符，而后日志則被攔截，所以代碼段以圖片的形勢給出
</span>
后臺Action</b></span>
Yangcl 
zhou_enke 
jopen