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,
        width: 80,
        editor: {
            xtype: 'numberfield',
            allowBlank: false,
            name: 'Quantity'
        }
    },
    {
        header: "時間(分鍾)",
        dataIndex: 'WorkingHour',
        sortable: true,
        width: 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對象化。