extjs - 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有很大的不同。所以我现在很困惑:(

Q1。如何收集编辑的记录数据（单击按钮）？

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

在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的代码？

Q2。我仍然不知道如何查找更改后的检查列。

我尝试了这个，但是我不能用于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);
    }
}

Q3。当我单击单元格进行编辑时，在-_-中显示一些HTML标记；



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

Answer 1

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

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

此事件传递给您的处理程序的第二个参数包含有关编辑的大量数据，您可以使用这些数据执行验证。如果编辑未通过您的验证，则可以从处理程序中返回false，单元编辑器中的值将恢复为原始值。 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事件。

如果由于某种原因（例如验证除外）而试图在关闭之前，获取celleditor的值，则可以像这样获取活动celleditor的值：

// 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请求以将其保存到服务器，然后手动提交，您将调用此 load方法，它将为您处理所有这些操作。

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

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

问题2

单元格编辑不支持 mygridStore.getModifiedRecords()编辑。您必须创建一个其他处理程序来侦听此更改，如下所示：

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)
}

您对 store.sync()的调用也应该能够提取支票更改，但是，它们在被检查后立即提交到网格的存储中。 validateedit还将获取对checkcolumn的更改。

问题3

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

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

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

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

因此，话虽如此，我能为您提供的最佳建议是：1）试用将存储已修改数据的stores 方法保存到数据库中； 2）升级到ExtJS 4.1，在此之间存在很多错误。您应该可以利用的4.07和4.1，当我切换到4.1时，我削减了大约75％的使工作正常运行的替代项。