Extjs 4.0.7，编辑器网格 - 如何获取更新的单元格值? [英] Extjs 4.0.7, Editor Grid - how to get updated cell value?
问题描述
我需要在控制器中获取(检索)更新的单元格值.(MVC)
I need to get(retrieve) updated cell value in controller. (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
但它总是返回空数组，即使我更新了一些单元格值.
but always it returns empty array even I updated some cell value.
有人知道我做错了什么吗?
anybody know what I am doing wrong?
这是我的部分视图代码，
Here is my part of view code,
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);
},
.
.
.
谢谢！
非常感谢您的回答！我还有一些关于编辑器网格的问题.
Thank you very much for your answer! I have some more question about editor grid.
它与 Ext3 有很大不同.所以我现在很困惑:(
Its much different from Ext3. so I'm very confusing now :(
第一季度.如何收集编辑过的记录数据(一次点击按钮)?
更改网格单元格后触发的事件.但是我想在单击更新编辑的单元格"按钮后收集编辑的网格记录，并且我想一次更新所有内容.
the event fired once the grid cell be changed. but I want collect edited grid record once I click the 'Update edited cell' button, and I want to update all together at the once.
在 Ext3 中，我喜欢这样，
In Ext3, I did like this,
(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 的代码?
How can I change the code for Extjs4 ?
第二季度.我仍然不知道如何找出更改的检查列.
我试过这个，但我对 checkcolumn 不起作用(因为我在更改复选框后进行了测试)
I tried this, but I does not work for checkcolumn (of cause I tested after change checkbox)
// 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 标记；;
非常感谢您的帮助.非常感谢您抽出宝贵的时间！
推荐答案
在您完成编辑之前，编辑器(单元格编辑器或行编辑器)不会将其值提交到存储区 - 这意味着按 ENTER 或通过单击页面上的其他地方或单击行编辑器表单上的保存按钮来模糊活动单元格编辑器.
The editors (cell editors or row editors) do not commit their values to the store until you complete the edit - which means pressing ENTER or blurring the active cell editor by clicking elsewhere on the page, or clicking the save button on the row editor form .
如果您在编辑器中读取更新值的目的是为了执行某种验证，我建议您只需监听网格控制器中的 validateedit 事件，如此处.
If your purpose for reading the updated value in your editor is to perform some kind of validation I would suggest simply listening to the validateedit event in your grid's controller, as described here.
此事件传递给您的处理程序的第二个参数包含大量有关编辑的数据，然后您可以使用这些数据执行验证.如果编辑没有通过您的验证，您可以从处理程序返回 false 并且 celleditor 中的值将恢复为原始值.validateedit 事件从编辑器网格本身触发，因此您可以在控制器中为它添加一个事件处理程序，如下所示:
The second argument that this event passes to your handler contains a lot of data about the edit that you can then perform validation with. If the edit doesn't pass your validation you can return false from your handler and the value in the celleditor will revert to it's original value. The validateedit event gets fired from the editor grid itself so you would add an event handler in your controller for it like this:
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 的第二个参数中可用的所有不同对象.
But you should check out the link above to see all the different objects available in that second argument I named edit.
validateedit 事件在记录提交到商店之前触发 - 在用户已经点击 ENTER 或模糊编辑器之后，即，当编辑器处于关闭.
The validateedit event is fired right before the record is committed into the store - after the user has already clicked ENTER or blurred the editor, i.e., while the editor is closing.
如果您试图在 开始关闭之前获取 celleditor 的值，例如出于验证以外的某种原因，您可以像这样获取活动 celleditor 的值:
If you are trying to get the celleditor's value before it starts to close, for some reason other than validation for example, you could get the active celleditor's value like this:
// 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 会抛出一个错误，这就是我在它周围包裹一个条件的原因.
If there is no active editor then myGrid.editingPlugin.getActiveEditor().field would throw an error, that's why I wrapped a conditional around it.
还有一点我应该说，为了在编辑器网格中进行验证，我发现最简单的方法是将 validator 配置放在网格列的 editor 定义中.这将在用户设置字段值时为您提供所有方便的验证 CSS，并在他尝试保存该值之前提醒他该值是否存在问题.
One other point I should make, for validation in editor grids, I found that it is easiest to just put a validator config in the grid column's editor definition. That will give you all the handy validation CSS while the user is setting the field's value and alert him if there is a problem with the value before he tries to save it.
要了解我的意思，请尝试在 这个例子.将鼠标悬停在编辑器单元格上，您将收到错误消息.
To get an idea of what I mean, try entering letters in the date column of this example. Mouse over the editor cell and you will get the error message.
编辑
看来我误解了你原来的问题，不过我会分解我对上述问题的回答，
It seems I misunderstood you original question, I'll break down my answers to your questions above though,
问题 1
完成编辑(单击 ENTER 或 )后，您对 mygridStore.getModifiedRecords() 的调用应该可以正常工作，因为记录已提交到店铺.我发现它不起作用，我稍后会介绍.
Once you have completed an edit (clicked ENTER or ), your call to mygridStore.getModifiedRecords() should be working fine because the record will have been committed to the store. I see that it was not working, I will cover that in a moment.
我应该指出 ExtJS4 有一个 store.sync() 方法，如此处.
I should point out that ExtJS4 has a store.sync() method as covered here.
您可以调用这个 sync 方法，而不是从存储中提取修改过的记录，对它们进行编码，手动执行 ajax 请求将它们保存到服务器，然后手动提交它们，它会处理为您执行所有这些操作.
Instead of extracting the modified records from the store, encoding them, manually doing an ajax request to save them to the server and then manually committing them you can call this sync method and it will take care of all of these actions for you.
如果您有不同的 URL 来处理由商店的 load 和 sync 方法触发的不同的创建、读取、更新、销毁操作，您可以使用商店的代理api 配置将您的 URL 映射到这些操作，如此处.或者您可以设置您的服务器端控制器，以便能够区分您商店的 load 请求(读取操作默认为 HTTP GET)和它的同步请求(创建、更新和删除操作默认为 HTTP POST).
If you have different URLs to handle the different create, read, update, destroy operations fired off by your store's load and sync methods, you can use the store's proxy api config to map your URLs to these operations as covered here. Or you can set-up your server side controller to be able to differentiate between your store's load request (read operations default to HTTP GET) and it's sync requests (create, update and delete operations default as HTTP POST).
在服务器端可能有许多不同的方法来执行此操作，我通常这样做的方法是为 GET 请求使用一个 SQL 存储过程，为任何给定存储使用一个 POST 请求.我将商店名称作为额外参数包含在内，然后我的服务器端控制器根据它是 GET 请求还是 POST 请求运行适当的存储过程.
There could be many different ways to go about doing this on the server side, the way I usually do it is to have one SQL stored procedure for GET requests and one for POST requests for any given store. I include the store name as an extra param and then my server side controller runs the appropriate stored procedure based on whether it is a GET or a POST request.
问题 2
单元格编辑不支持checkcolumn 编辑.你必须创建一个不同的处理程序来监听它的变化，就像这样:
Cell editing doesn't support checkcolumn edits. You have to make a different handler to listen to changes on that, something like this:
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 的更改.
Your call to mygridStore.getModifiedRecords() should be able to pick up the check changes also however, they get committed to the grid's store right away after being checked. store.sync() would also pick up changes to checkcolumn.
问题 3
我无法完全说出导致该问题的原因，但您的 validateedit 事件可能会发生一些奇怪的事情，您的处理程序应该返回 true 或 false.
I can't completely tell what is causing that problem but it may be something strange going on with your validateedit event, your handler should be returning true or false.
正如我之前所说，我误解了您最初提出这个问题的原因.我以为您正在尝试进行某种验证同时正在进行编辑.现在我知道您正在尝试在所有编辑完成后从商店中获取所有修改过的记录，以便将它们保存到数据库中，我被抛弃了，因为在 ExtJS 4 中，商店通常使用我提到的 sync 方法.
As I said earlier, I misunderstood the reason you originally asked this question. I thought you were trying to do some kind of validation while an edit was in progress. Now I understand that you are trying to get all of the modified records from the store after all the editing is completed in order to save them to the database, I was thrown off because in ExtJS 4 a store is usually saved to the database with the sync method as I mentioned.
换句话说，您不需要 validateedit 事件或 checkchange 事件来获取修改记录的列表.
In other words, you don't need the validateedit event or checkchange event to get a list of modified records.
在某些 4.07 版本中，您遇到的实际问题可能与商店的 getter 方法(getModifiedRecords、getUpdatedRecords)有关，请查看 这篇文章 和 这个.
The actual problem you are having might be trouble with the store's getter methods (getModifiedRecords, getUpdatedRecords) in some 4.07 versions, take a look at this post and this one.
综上所述，我能给你的最好建议是 1) 尝试使用 store sync 方法将修改后的数据保存到数据库中，以及 2) 升级到 ExtJS 4.1，有 syncem>很多在 4.07 和 4.1 之间解决的错误，您应该可以利用它们，当我切换到 4.1 时，我删除了大约 75% 的覆盖来使事情正常工作.
So with all that said, the best advice I can give you is 1) try out the stores sync method for saving modified data to the database and 2) upgrade to ExtJS 4.1, there were a lot of bugs that were straightened out between 4.07 and 4.1 which you should be able to take advantage of, I cut out about 75% of the overrides I was using to make things work when I switched over to 4.1.
这篇关于Extjs 4.0.7，编辑器网格 - 如何获取更新的单元格值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
