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