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标记

enter image description here

我真的很感谢你的帮助。非常感谢你宝贵的时间！

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。

不是从商店中提取已修改的记录，对它们进行编码，手动执行ajax请求以将它们保存到服务器，然后手动提交它们，而是可以调用此sync方法，它将处理所有这些行动适合你。

如果您有不同的网址来处理商店load和sync方法触发的不同创建，阅读，更新，销毁操作，您可以使用商店＆＃39; s代理api配置将您的网址映射到涵盖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()也会选择对checkcolumn的更改。

问题3

我无法完全告诉导致该问题的原因，但您的validateedit事件可能会发生异常，您的处理程序应该返回true或false。

正如我先前所说，我误解了你最初提出这个问题的原因。我认为您正在尝试进行某种验证，而正在进行编辑。现在我知道你在完成所有编辑完成后试图从商店获取所有修改过的记录以便将它们保存到数据库中，因为在ExtJS 4中，一个商店通常会保存到数据库中我提到的sync方法。

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

在某些4.07版本中，您遇到的实际问题可能是商店的getter方法（getModifiedRecords，getUpdatedRecords）出现问题，请查看this post和{ {3}}

所以尽管如此，我能给你的最佳建议是：1）尝试使用store sync方法将修改后的数据保存到数据库中; 2）升级到ExtJS 4.1，有 a在你应该能够利用的4.07和4.1之间理顺的错误，我切断了大约75％的覆盖，当我切换到4.1时，我用它来使事情有效。

Answer 2

EditedGrid.plugins[0].completeEdit();

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

Answer 3

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

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

3 个答案: