Extjs 4.0.7，编辑器网格 - 如何获取更新的单元格值？

Question

我需要在控制器中获取（检索）更新的单元格值。 (MVC)

所以我尝试了这个，

var modified = this.getItemGrid().getStore().getUpdatedRecords();
console.log(modified); // return [] empty array

var modified = this.getItemList_Store().getUpdatedRecords();
console.log(modified); // return [] empty array

但即使我更新了一些单元格值，它也总是返回空数组。

有人知道我做错了什么吗？

这是我的部分视图代码，

Ext.define("App.view.orders.ItemList_view", {
    extend: "Ext.grid.Panel",
    alias: "widget.itemList_view",
    plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })
    ],
    initComponent: function () {
        this.store = "ItemList_store";
        this.columns = [
            {
                xtype: 'checkcolumn', text: "Ship", width: 50, dataIndex: "DR"
            },
            { header: "test", width: 100, dataIndex: "test",
                editor: {
                    xtype : 'textfield'
                }
            }
        ];

        this.selModel = Ext.create("Ext.selection.CheckboxModel");
        //this.selModel = Ext.create("Ext.selection.CellModel"); // It does not works either.

        this.callParent(arguments);
    },
    .
    .
    .

谢谢！

[编辑]

非常感谢您的回答！我还有一些关于编辑器网格的问题。

它与 Ext3 有很大不同。所以我现在很困惑:(

第一季度。如何收集已编辑的记录数据（单击按钮）？

网格单元格更改后触发的事件。 但是我想在单击“更新已编辑的单元格”按钮后收集已编辑的网格记录，并且我想一次全部更新。

在 Ext3 中，我确实是这样的，

(button) click : function(){
    var modified = mygridStore.getModifiedRecords();

    var recordsToSend = [];
    Ext.each(modified, function(record){
        recordsToSend.push(record.data);
    });

    var grid = Ext.getCmp('grid');
    grid.el.mask('Updating','x-mask-loading');
    grid.stopEditing();

    recordsToSend = Ext.encode(recordsToSend);

    Ext.Ajax.request({
        url : '/test/test',
        params : {
            data : recordsToSend
        },
        success : function(response){
            grid.el.unmask();
            alert(response.responseText);
            mygridStore.commitChanges();
        },
        failure : function(response){
            mygridStore.rejectChanges();
        }
    });
}

如何更改 Extjs4 的代码？

第二季度。我仍然不知道如何找出更改的校验列。

我试过这个，但我不适用于 checkcolumn（因为我在更改复选框后测试了）

// grid coumn
{
 xtype: 'checkcolumn', header: "My Check Column", width: 50, dataIndex: "CH"
}

-

// in control
'myGrid': {
    validateedit: function (plugin, edit) {
        console.log(edit);
    },
    checkchange: function (plugin, edit) {
        console.log(edit);
        console.log(edit.value);
    }
}

第三季度。当我单击要编辑的单元格时，会在 -_-;;;

中显示一些 HTML 标签

非常感谢您的帮助。非常感谢您宝贵的时间！

Answer 1

编辑器（单元格编辑器或行编辑器）在您完成编辑之前不会将其值提交到存储区 - 这意味着按下 ENTER 或通过单击页面上的其他位置或单击保存按钮来模糊活动的单元格编辑器在行编辑器表单上。

如果您在编辑器中读取更新值的目的是执行某种验证，我建议您只需在网格控制器中收听validateedit 事件，如here 所述。

此事件传递给您的处理程序的第二个参数包含大量有关编辑的数据，然后您可以使用这些数据执行验证。如果编辑没有通过您的验证，您可以从您的处理程序返回 false，并且 celleditor 中的值将恢复为原始值。 validateedit 事件是从编辑器网格本身触发的，因此您可以在控制器中为它添加一个事件处理程序，如下所示：

Ext.define('MyApp.controller.MyController', {

    init: function() {

        this.control({

            'mygridpanel': {

                validateedit: function(plugin, edit) {

                    // silly validation function    
                    if (edit.value != 'A Valid Value') {
                        return false;
                    }
                },

            },

        });

    },

});

但是您应该查看上面的链接以查看我命名为 edit 的第二个参数中可用的所有不同对象。

validateedit 事件在记录提交到存储之前立即触发 - 在用户已经单击 ENTER 或模糊编辑器之后，即在编辑器关闭时。

如果您尝试在它开始关闭之前获取单元格编辑器的值，例如出于验证以外的某些原因，您可以像这样获取活动单元格编辑器的值：

// myGrid is a reference to your Ext.grid.Panel instance
if (myGrid.editingPlugin.editing) {
    var value = myGrid.editingPlugin.getActiveEditor().field.value

    console.log('value: ' + value);
}

如果没有活动的编辑器，那么myGrid.editingPlugin.getActiveEditor().field 会抛出一个错误，这就是我在它周围加上一个条件的原因。

我应该提出的另一点是，对于编辑器网格中的验证，我发现将validator 配置放在网格列的editor 定义中是最简单的。这将在用户设置字段值时为您提供所有方便的验证 CSS，并在他尝试保存之前提醒他该值是否存在问题。

要了解我的意思，请尝试在this example 的日期列中输入字母。将鼠标悬停在编辑器单元格上，您将收到错误消息。

编辑

看来我误解了你原来的问题，不过我会分解我对你上面问题的回答，

问题 1

完成编辑（单击ENTER 或 ）后，您对mygridStore.getModifiedRecords() 的调用应该可以正常工作，因为该记录将已提交到存储。我发现它不起作用，我稍后会介绍。

我应该指出 ExtJS4 有一个 store.sync() 方法，正如 here 所涵盖的那样。

您可以调用 sync 方法，而不是从存储中提取修改的记录、对其进行编码、手动执行 ajax 请求以将它们保存到服务器然后手动提交它们，它会处理所有这些操作给你。

如果您有不同的 URL 来处理由商店的 load 和 sync 方法触发的不同创建、读取、更新、销毁操作，您可以使用商店的代理 api 配置将您的 URL 映射到这些涵盖here 的操作。或者，您可以设置服务器端控制器，以便能够区分商店的 load 请求（读取操作默认为 HTTP GET）和同步请求（创建、更新和删除操作默认为 HTTP POST）。

在服务器端可以有许多不同的方法来执行此操作，我通常这样做的方法是为任何给定的存储提供一个用于 GET 请求的 SQL 存储过程和一个用于 POST 请求的存储过程。我将商店名称作为额外参数包含在内，然后我的服务器端控制器根据它是 GET 还是 POST 请求运行适当的存储过程。

问题 2

单元格编辑不支持checkcolumn 编辑。你必须创建一个不同的处理程序来监听它的变化，像这样：

checkchange: function (column, rowIndex, checked) {
    var record = store.getAt(rowIndex),
        state = checked ? 'checked' : 'unchecked'

    console.log('The record:');
    console.log(record)
    console.log('Column: ' + column.dataIndex);
    console.log('was just ' + state)
}

您对mygridStore.getModifiedRecords() 的调用也应该能够获取检查更改，但是，它们在检查后会立即提交到网格的存储中。 store.sync() 也会接受对检查列的更改。

问题 3

我无法完全确定导致该问题的原因，但您的 validateedit 事件可能发生了一些奇怪的事情，您的处理程序应该返回 true 或 false。

正如我之前所说，我误解了您最初提出这个问题的原因。我以为您正在尝试进行某种验证同时进行编辑。现在我了解到，在完成所有编辑后，您正试图从存储中获取所有修改过的记录，以便将它们保存到数据库中，我被抛弃了，因为在 ExtJS 4 中，存储通常使用sync 我提到的方法。

换句话说，您不需要validateedit 事件或checkchange 事件来获取修改记录的列表。

在某些 4.07 版本中，您遇到的实际问题可能是商店的 getter 方法（getModifiedRecords、getUpdatedRecords）有问题，请查看this post 和this one。

综上所述，我能给你的最好建议是 1) 尝试使用 stores sync 将修改后的数据保存到数据库的方法和 2) 升级到 ExtJS 4.1，有很多 /em> 在您应该能够利用的 4.07 和 4.1 之间纠正的错误中，当我切换到 4.1 时，我删除了大约 75% 的覆盖以使事情正常工作。

Answer 2

listeners: {
    validateedit: function (editor, e) {
        //console.log(editor);
    var oldVal = editor.originalValue;
    var newVal = editor.value;
    }
}

Answer 3

EditedGrid.plugins[0].completeEdit();

这将使活动更改提交并调用编辑事件。