在没有刷新页面的情况下编辑后，在EXTJS网格中设置已编辑的行

Question

我在单击编辑操作链接时在EXTJS网格中编辑一行。单击行的编辑链接时，将打开一个新窗口，其中包含该行的所有数据以及“保存”和“取消”按钮。

单击“保存”按钮，它将记录保存在数据库中。但我希望该行也应该刷新而不刷新页面。

我是EXTJS的新手。

任何人都可以帮我做同样的事。

这是我的代码。

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.grid.plugin.BufferedRenderer'
]);

Ext.define('TestResult', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'ID',
            type: 'int'
        },
        {
            name: 'jobNo',
            type: 'int'
        },
        {
            name: 'stageCode',
            type: 'String'
        },
        {
            name: 'productTitle',
            type: 'String'
        },
        {
            name: 'brand',
            type: 'String'
        },
        {
            name: 'category',
            type: 'String'
        },
        {
            name: 'ftpDate',
            type: 'Date'
        }],
    idField: 'ID'
});

Ext.onReady(function() {
    var store = Ext.create('Ext.data.Store', {
        model: 'TestResult',
        autoLoad: true,
        autoSync: true,
        proxy: {
            type: 'ajax',
            url : 'data.jsp',
            reader :
            {
                type : 'json'
            },
            writer :
            {
                type : 'json'
            }
        }
    });

    var grid = Ext.create('Ext.grid.Panel', {
        width: 700,
        height: 500,
        title: 'Buffered Grid of records',
        store: store,
        loadMask: true,
        plugins: 'bufferedrenderer',
        selModel: {
            pruneRemoved: false
        },
        viewConfig: {
            trackOver: false
        },
        features: [{
            ftype: 'groupingsummary',
            groupHeaderTpl: 'Department: {name}',
            showSummaryRow: false
        }],
        // grid columns
        columns:[{
            text: 'ID',
            sortable: true,
            dataIndex: 'ID',
            groupable: false,
            locked: true,
            width: 70
        }, {
            text: 'Job No.',
            sortable: true,
            dataIndex: 'jobNo',
            groupable: false,
            locked: true,
            width: 120
        }, {
            text: 'Version',
            dataIndex: 'stageCode',
            groupable: false
        }, {
            text: 'Product Title',
            dataIndex: 'productTitle',
            groupable: false
        }, {
            text: 'Brand',
            dataIndex: 'brand',
            groupable: false
        }, {
            text: 'Category',
            dataIndex: 'category',
            width: 200,
            groupable: false
        }, {
            text: 'FTP Date',
            dataIndex: 'ftpDate',
            xtype: 'datecolumn',
            groupable: false
        },
        {
            xtype:'actioncolumn',
            header:'Edit',
            width:50,
            items: [{
                icon: 'assets/images/edit.png',  // Use a URL in the icon config
                tooltip: 'Edit',
                handler: function(grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    editForm.show();
                    editForm.down('form').loadRecord(rec);]
        }],
        renderTo: Ext.getBody()
    });

    var editForm = new Ext.Window({
        title: 'Edit Window',
       items:[
          { 
            xtype: 'form',
            url: 'UpdateController',
            items: [
                {
                    xtype: 'hidden',
                    fieldLabel: 'ID',
                    name: 'ID',
                    allowBlank: false,
                    readOnly: true
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Job No.',
                    name: 'jobNo',
                    allowBlank: false,
                    readOnly: true
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Version',
                    name: 'stageCode',
                    allowBlank: false,
                    readOnly: true
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Product Title',
                    name: 'productTitle',
                    allowBlank: false
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Category',
                    name: 'category',
                    allowBlank: false
                },
                {
                    xtype: 'textfield',
                    fieldLabel: 'Brand',
                    name: 'brand',
                    allowBlank: false
                },
                {
                    xtype: 'datefield',
                    fieldLabel: 'FTP Date',
                    name: 'ftpDate',
                    allowBlank: false
                }],
                 buttons : [{
                    text : 'Save',
                    handler: function()
                    {
                        this.up('form').getForm().submit(
                        {
                            success: function(f,a)
                            {
                                store.save();
                                var win = Ext.WindowManager.getActive();
                                if (win)
                                {
                                    win.hide();
                                }
                            },
                            failure: function(f,a)
                            {
                                //Ext.Msg.alert('Warning', 'Error');
                                Ext.Msg.alert('Warning', a.result.errormsg);
                                this.up('window').hide();
                            }
                        });
                    }
                },
                {
                    text: 'Cancel',
                    handler: function()
                    {
                        this.up('window').hide();
                    }
                }]
            }

       ]
    });
});

由于

Answer 1

在this.up('form').getForm().submit成功处理程序中，您可以使用Ext.form.Basic updateRecord方法更新加载到表单中的记录。

所以只需添加成功处理程序代码：

// update record with form data
f.updateRecord();

// mark record as synchronized with server (because you already sent data to server with form submit method)
f.getRecord().commit();