ExtJS的4.0.7，编辑网格 - 如何得到更新单元格的值？(Extjs 4.0.7, Edito

我需要获得（检索）的控制器更新单元格的值。（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请求的方式。我有商店名称作为额外PARAM，然后我的服务器端控制器运行基于它是否是一个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之间理顺的bug 4.1你应该能够好好把握，我切出我所用，使事情工作的时候切换到4.1覆盖约75％。

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, Editor Grid - how to get updated cell value?