體驗 EXTJS4 的 MVC

EXT4終於發布了，厭倦了EXT3.x產生的臃腫的HTML代碼？ EXT4在這方面的確做了很大的最佳化。其中帶了資源佔用減少和效能的提升。而EXT4引入的MVC模式更是將視圖與代碼邏輯分離。除了文法上與舊版有些許不同外。上手倒還是很快。但很快遇到的問題也接踵而至。

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

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等類的原始碼後。發現錯誤資訊可以統一使用 偵聽exception事件來完成。

遇到的第二個問題是，如果您要刪除store中的一些記錄可以使用 Store.remove(records)來完成。然後調用 sync 與伺服器同步。但如果伺服器同步失敗……後果是本地已經刪除的 記錄無法恢複。最後，我只得重寫了兩個方法。1、在remve的時候將記錄儲存在要刪除的記錄列表中。在 onDestroyRecords(私人方法 在伺服器返回後調用)。再刪除這個列表中的記錄。代碼如下：

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 = [];        }    },