ExtJS 清單資料編輯

         在ExtJs中，GridPanel一般用于展示清單資料。同時利用一些附加的插件也能編輯資料。類似于asp.net中的DataGridView控件.

展示資料比較簡單，利用Store則可以自動展示，隻要在伺服器端将資料Json化即可；

下面在Extjs中編輯清單資料

一、單條編輯

        單條資料的編輯利用了Ext.ux.grid.RowEditor插件達到目的

var gridEditor = new Ext.ux.grid.RowEditor({ listeners: {
        'canceledit': function () {
            var re = FieldGrid.getSelectionModel().getSelected();
            var id = re.get("Id");
            if (id == null) {
                var r = FieldStore.getAt(0);
                if (Ext.isDefined(r)) {
                    FieldStore.remove(r);
                }
            }
        },
        'beforeedit': function () {
        },
          //指派      

'beforerecordsubmit': function (r, cm, ri) {
            r.set('Content', cm.getCellEditor(1, ri).getValue());
            r.set('Description', cm.getCellEditor(2, ri).getValue());
        }
    }
    });      

新增時：

gridEditor.stopEditing();
FieldStore.insert(0, new FieldStore.recordType);
FieldGrid.getView().refresh();
FieldGrid.getSelectionModel().selectRow(0);
gridEditor.startEditing(0);      

在store中。定義如下：

var FieldStore = new Ext.data.Store({
            url: ‘url’,
            remoteSort: true,
            reader: new Ext.data.JsonReader({
                root: 'data',
                totalProperty: 'total',
                id: 'Id',
                fields: [
                    {
                        name: 'Id',
                        type: 'string'// ID
                    },
                    {
                        name: 'Name',
                        type: 'string'
                    } ,
                    {
                        name: 'Description',
                        type: 'string'
                    } ,
                    {
                        name: 'CreateTime',
                        type: 'date'
                    }
                ]
            }),
            listeners: {
                'update': function (thiz, record, operation) {
                    var model = record.data;
                    if (operation == Ext.data.Record.EDIT
                        && !record.getChanges().Id) {
                        Ext.Ajax.request({
                            url: ‘url’,
                            params: model,
                            success: function (response, opts) {
                                var result = Ext.util.JSON.decode(response.responseText);
                                if (result.success) {
                                    if (!record.get('Id'))
                                        record.set('Id', result.id);
                                    thiz.commitChanges();
                                } else {
                                    alert(result.msg);
                                    thiz.rejectChanges();
                                    if (!record.get('Id')) //新增
                                        thiz.remove(record);
                                }
                            }
                        });
                    }
                }
            }
        }
    );      

在更新時，利用了store元件的update事件進行更新。

效果圖：

二、批量編輯資料

      在開發過程中，一些業務往往需要一次性儲存，如憑證，單據資料，如下圖；批量儲存資料，這時需要使用EditorGridPanel元件。來定義可編輯的地方。

1、grid以利用Cm來定義列及列的相關屬性.定義如下:

var Cm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), Sm,
    {
        header: "ID",
        dataIndex: 'Id',
        name: 'Id',
        sortable: true,
        hidden: true
    },
    {
        header: "數量",
        dataIndex: 'Quantity',
        sortable: true,
         80,
        editor: {
            xtype: 'numberfield',
            allowBlank: false,
            name: 'Quantity'
        }
    },
    {
        header: "時間(分鐘)",
        dataIndex: 'WorkingHour',
        sortable: true,
         80,
        editor: {
            xtype: 'numberfield',
            allowBlank: false,
            name: 'Workinghour'
        }

    }
]);      

在送出時，

var submit = new Ext.ux.SubmitBtn({
    handler: function () {
        //grid失去焦點，會将編輯的資料儲存到store，如果不采用些，則最後的資料如果直接送出時，則會丢失
        if (RouteSheetFormGrid.activeEditor != null) {
            RouteSheetFormGrid.activeEditor.completeEdit();
        }
        
        //将所有修改後的資料儲存到數組中。
        var arrItems = new Array();
        Store.each(
            function (r) {
                arrItems.push(r.data);
            }
        );

        if (form.getForm().isValid()) {
            form.getForm().submit({
                url: 'url',
                params: {
                    //以json方式送出到背景
                    'record': Ext.encode(arrItems)
                },
                success: function (form, action) {
                    win.destroy(); // 關閉視窗
                },
                failure: function (form, action) {
                    alert(action.result.msg);
                }
            }); // formSubmitArgs
            // 引用之前定義的請求參數變量
        }
    }
});      

由于送出時，對象已json化。在背景，需要将json對象化。