EXTJS4 的 MVC模式的優(yōu)點(diǎn)與不足

EXT4終于發(fā)布了，厭倦了EXT3.x生成的臃腫的HTML代碼？ EXT4在這方面的確做了很大的優(yōu)化。其中帶了資源占用減少和性能的提升。而EXT4引入的MVC模式更是將視圖與代碼邏輯分離。除了語(yǔ)法上與舊版有些許不同外。上手倒還是很快。但很快遇到的問(wèn)題也接踵而至。

在EXT4中 CRUD操作甚至能讓你從煩人的FORM提交解放出來(lái)。直接一條 ?Store.sync()搞定。非常方便。但馬上我便遇到了第一個(gè)問(wèn)題。倘若提交失敗，服務(wù)器返回的錯(cuò)誤信息如何顯示？如果只是單條記錄的操作，您可以使用 Model的 save方法來(lái)完成。例如：

var?rs?=?Ext.ModelManager.create(values,'OA.model.ChangePasswordModel');

			rs.save({
				success:function(r,o)
				{
					var?o=Ext.decode(o.response.responseText);??
					Ext.Msg.show({
						title:'溫馨提示',
						msg:o.message,
						icon:Ext.Msg.INFO,
						buttons:Ext.Msg.OK,
						fn:function()
						{
							win.close();
						},scope:this
					})
				},
				failure:function(r,o)
				{
					var?o?=?o.request.scope.reader.jsonData;
					Ext.Msg.show({
						title:'溫馨提示',
						msg:o["message"],
						icon:Ext.Msg.ERROR,
						buttons:Ext.Msg.OK
					})
				},scope:this
			});			

如果是多條記錄的刪除操作呢?

在閱讀了 Store Bath Proxy等類的源代碼后。發(fā)現(xiàn)錯(cuò)誤信息可以統(tǒng)一使用 偵聽(tīng)exception事件來(lái)完成。

遇到的第二個(gè)問(wèn)題是，如果您要?jiǎng)h除store中的一些記錄可以使用 Store.remove(records)來(lái)完成。然后調(diào)用 sync 與服務(wù)器同步。但如果服務(wù)器同步失敗……后果是本地已經(jīng)刪除的 記錄無(wú)法恢復(fù)。最后，我只得重寫了兩個(gè)方法。1、在remve的時(shí)候?qū)⒂涗洷４嬖谝獎(jiǎng)h除的記錄列表中。在 onDestroyRecords(私有方法 在服務(wù)器返回后調(diào)用)。再刪除這個(gè)列表中的記錄。代碼如下：

remove:?function(records,?/*?private?*/?isMove)?{
????????if?(!Ext.isArray(records))?{
????????????records?=?[records];
????????}

????????/*
?????????*?Pass?the?isMove?parameter?if?we?know?we're?going?to?be?re-inserting?this?record
?????????*/
????????isMove?=?isMove?===?true;
????????var?me?=?this,
????????????sync?=?false,
????????????i?=?0,
????????????length?=?records.length,
????????????isPhantom,
????????????index,
????????????record;

????????for?(;?i?<?length;?i++)?{
????????????record?=?records[i];
????????????index?=?me.data.indexOf(record);

????????????if?(me.snapshot)?{
????????????????me.snapshot.remove(record);
????????????}

????????????if?(index?>?-1)?{
????????????????isPhantom?=?record.phantom?===?true;
????????????????if?(!isMove?&&?!isPhantom)?{
????????????????????//?don't?push?phantom?records?onto?removed
????????????????????me.removed.push(record);
????????????????}

????????????????sync?=?sync?||?!isPhantom;
????????????}
????????}

????????me.fireEvent('datachanged',?me);
????????if?(!isMove?&&?me.autoSync?&&?sync)?{
????????????me.sync();
????????}
????},
????onDestroyRecords:?function(records,?operation,?success){

????????if?(success)?{
????????????var?me?=?this,
????????????????i?=?0,
????????????????length?=?records.length,
????????????????data?=?me.data,
????????????????snapshot?=?me.snapshot,
????????????????record;

????????????for?(;?i?<?length;?++i)?{
????????????????record?=?me.getById(records[i].get(records[i].idProperty||'id'));
????????????????if(null?!==?record)
????????????????{
	????????????????record.unjoin(me);
	????????????????data.remove(record);
	????????????????if?(snapshot)?{
	????????????????????snapshot.remove(record);
	????????????????}
????????????????}else{
????????????????	console.log(records[i]);
????????????????}
????????????}
????????????me.removed?=?[];
????????}
????},