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.

我试过这个,但我不用于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你的网格的控制器事件,描述在这里.

此事件传递给处理程序的第二个参数包含大量有关编辑的数据,然后您可以使用该数据执行验证.如果编辑未通过验证,您可以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或模糊的编辑器,即当编辑器关闭.

如果您在开始关闭之前尝试获取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,同时用户设置字段的值,并在他尝试保存之前,如果值存在问题则提醒他.

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

编辑

我似乎误解了你原来的问题,但我会打破你对上述问题的回答,

问题1

完成编辑(单击ENTER或)后,您的调用mygridStore.getModifiedRecords()应该正常,因为该记录将被提交到商店.我发现它不起作用,我马上就会介绍它.

我应该指出ExtJS4有一个store.sync()方法,如这里所述.

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

如果您有不同的URL来处理由商店load和sync方法触发的不同创建,读取,更新,销毁操作,您可以使用商店的代理api配置将URL映射到这些操作,如此处所述.或者,您可以设置服务器端控制器,以便能够区分商店的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事件来获取已修改记录的列表.

你遇到的实际问题可能是商店的getter方法(getModifiedRecords,getUpdatedRecords)在4.07版本中遇到麻烦,请看看这篇文章和这篇文章.

所以尽管如此,我能给你的最好的建议是:1)尝试sync将修改后的数据保存到数据库的商店方法和2)升级到ExtJS 4.1,有很多错误在4.07和4.1之间理顺了你应该能够利用它,我切换了大约75%的覆盖,当我切换到4.1时,我用它来使事情有效.