Extjs 4.0.7，编辑网格 - 如何获取更新的单元格值？ [英] Extjs 4.0.7, Editor Grid - how to get updated cell value?
问题描述
我需要在控制器中获取（检索）更新的单元格值。 （MVC）
所以我试过这个，
var modified = 。this.getItemGrid（）getStore（）getUpdatedRecords（）;
console.log（modified）; // return [] empty array
var modified = this.getItemList_Store（）。getUpdatedRecords（）;
console.log（modified）; // return []空数组
但总是返回空数组，即使我更新了一些单元格值。 / p>
任何人都知道我在做错什么？
这是我的部分视图代码，
Ext.define（App.view.orders.ItemList_view，{
extends：Ext.grid.Panel，
别名：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.selM odel = Ext.create（Ext.selection.CheckboxModel）;
//this.selModel = Ext.create（Ext.selection.CellModel）; //它也不工作。
this.callParent（arguments）;
}，
。
。
。
谢谢！
非常感谢您的回答！我有一些关于编辑器网格的问题。
它与Ext3有很大的不同。所以我现在很困惑：（
Q1。如何收集编辑的记录数据（一次点击按钮）？
一旦网格单元被更改，事件触发
但是我想要收集编辑的网格记录，一旦我点击更新编辑的单元格按钮，我想更新所有在一起一次。
在Ext3中，我这样做，
（按钮）单击：function（）{
var modified = mygridStore.getModifiedRecords（）;
var recordsToSend = [];
Ext.each（modified，function（record） {
recordsToSend.push（record.data）;
}）;
var grid = Ext.getCmp（'grid'）;
grid.el.mask （'更新'，'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。我不知道如何找出改变的检查栏。
我尝试过这个，但是我没有为检查栏工作更改复选框）
// grid coumn
{
xtype：'checkcolumn'，header：My检查列，宽度：50，dataIndex：CH
}
在
'myGrid'中：$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ b console.log（edit）;
}，
checkchange：function（plugin，edit）{
console.log（edit）;
console.log（edit.value）;
}
}
Q3。当我单击要编辑的单元格时，在-_- ;;
中显示一些HTML标签
我非常感谢您的帮助。非常感谢您的宝贵时间！
编辑器（单元格编辑器或行编辑器）不要将其值提交到商店，直到完成编辑 - 这意味着按 ENTER 或通过单击页面上的其他位置来模糊活动单元格编辑器，或单击保存按钮在行编辑器表单上。
如果您在编辑器中阅读更新值的目的是执行某种验证，我建议只要听 validateedit 事件在网格的控制器中，如这里。
此事件传递给您的处理程序的第二个参数包含大量关于编辑的数据然后可以执行验证。如果编辑不通过验证，您可以从处理程序返回 false ，并且单元编辑器中的值将恢复为原始值。 validateedit 事件从编辑器网格本身触发，因此您可以在控制器中添加一个事件处理程序，如下所示：
Ext.define（'MyApp.controller.MyController'，{
init：function（）{
this.control （{
'mygridpanel'：{
validateedit：function（plugin，edit）{
//愚蠢验证函数
if （edit.value！='A Valid Value'）{
return false;
}
}，
}，
} ）;
}，
}）;
但是，您应该查看上面的链接，查看我命名的第二个参数中可用的所有不同对象编辑。
validateedit 事件在之前被触发记录被提交到商店 - 在用户已经点击 ENTER 或模糊编辑器之后，即编辑器关闭时。
如果您尝试在之前获取单元格的值，它将开始关闭，因为除了验证之外的某些原因，您可以获得active celleditor的值如下：
// myGrid是您的Ext.grid.Panel实例的引用
if（ myGrid.editingPlugin.editing）{
var value = myGrid.editingPlugin.getActiveEditor（）。field.value
console.log（'value：'+ value）;
}
如果没有活动编辑器，那么<code> myGrid.editingPlugin .getActiveEditor（）。field 会抛出一个错误，这就是为什么我围绕它包装一个条件。
另外我应该做一个，在编辑器网格中验证，我发现在网格列的编辑器定义中只需放置一个验证器配置是最简单的。这将给您所有的方便的验证CSS，而用户设置字段的值，并提醒他，如果在尝试保存该值之前有一个问题。
要了解我的意思，请尝试在这个例子。鼠标悬停在编辑器单元格上，您将收到错误消息。
编辑
似乎我误解了你的原始问题，我会分解上面你的问题的答案，但是，
问题1
一旦您完成编辑（点击 ENTER 或），您调用 mygridStore.getModifiedRecords（） 应该正常工作，因为记录将被提交到商店。我看到它不起作用，我会稍等一下。
我应该指出，ExtJS4有一个 store.sync（） 方法如下 here 。
而不是从存储中提取修改的记录，对它们进行编码，手动执行ajax请求将其保存到服务器，然后手动提交它们，您可以调用这个 sync 方法，它将为您处理所有这些操作。
如果您有不同的URL来处理不同的创建，读取，更新，销毁您商店的加载和 sync 方法触发的操作，您可以使用该商店的代理 api config将您的URL映射到覆盖的这些操作此处。或者您可以设置您的服务器端控制器，以便区分您的商店的加载请求（读取操作默认为HTTP GET）和它的同步请求（创建，更新和删除操作默认为HTTP POST）。
在服务器端可能有很多不同的方法来做，我通常做的方式是拥有一个SQL存储过程，用于GET请求，一个用于任何给定存储的POST请求。我将商店名称作为额外的参数，然后我的服务器端控制器根据是GET还是POST请求运行相应的存储过程。
问题2
细胞编辑不支持 checkcolumn 编辑。你必须制作一个不同的处理程序来收听更改，例如：
checkchange：function（column，rowIndex，检查）{
var record = store.getAt（rowIndex），
state = checked？ 'checked'：'unchecked'
console.log（'The record：'）;
console.log（record）
console.log（'Column：'+ column.dataIndex）;
console.log（'只是'+状态）
}
你的调用 mygridStore.getModifiedRecords（）应该能够检查更改，然而，他们在被检查后立即承诺到网格的商店。 store.sync（）也会收到对checkcolumn的更改。
问题3
我无法完全了解导致该问题的原因，但可能会导致您的 validateedit 事件，你的处理程序应该返回true或false。
如前所述，我误解了你最初问这个问题的原因。我认为您正在尝试进行某种验证，而正在进行编辑。现在我明白，所有的编辑完成后，您都试图从存储中获取所有修改的记录，以便将其保存到数据库中，因此在ExtJS 4中，存储通常会保存到数据库中 sync 方法，我提到。
换句话说，你不需要 validateedit 事件或 checkchange 事件以获取修改记录的列表。
实际在某些4.07版本中，您可能遇到的问题可能会导致商店的getter方法（ getModifiedRecords ， getUpdatedRecords ）的麻烦，看看这篇文章和这是一个。
所以所有这一切说，我可以给你的最好的建议是1）尝试商店同步将修改后的数据保存到数据库中的方法，2）升级到ExtJS 4.1，在4.07和4.1之间有很多错误的错误，您应该可以利用这个优势，当我切换到4.1时，我删除了大约75％的覆盖值，以使事情变得有效。
I need to get(retrieve) updated cell value in controller. (MVC)
So I tried this,
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!
[EDIT]
Thank you very much for your answer! I have some more question about editor grid.
Its much different from Ext3. so I'm very confusing now :(
Q1. How to collect edited record data (once click button)?
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.
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();
}
});
}
How can I change the code for Extjs4 ?
Q2. I don't know still how to find out for changed 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);
}
}
Q3. When I click the cell to edit, the show some HTML tag in -_-;;
I really appreciate for your help. and thank you very much for your valuable time!
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 .
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.
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;
}
},
},
});
},
});
But you should check out the link above to see all the different objects available in that second argument I named edit.
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.
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);
}
If there is no active editor then myGrid.editingPlugin.getActiveEditor().field would throw an error, that's why I wrapped a conditional around it.
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.
EDIT
It seems I misunderstood you original question, I'll break down my answers to your questions above though,
Question 1
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.
I should point out that ExtJS4 has a store.sync() method as covered here.
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.
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).
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.
Question 2
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)
}
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.
Question 3
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.
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.
In other words, you don't need the validateedit event or checkchange event to get a list of modified records.
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.
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屋！
