PDA

View Full Version : record.set not updating grid.



Dmoney
29 Dec 2011, 7:59 AM
I have a form bound to a grid when I click on a record the data is displayed in the form. and the record can be edited. when I submit an edit I use the following in my controller:



form = Ext.getCmp('contentForm').getForm();
record = form.getRecord(),
values = form.getValues();
if(values.contentID){
record.set(values);
Ext.getCmp('contentList').store.sync();
//Ext.getCmp('contentList').store.commitChanges();
} else{
Ext.getCmp('contentList').store.add(values);
Ext.getCmp('contentList').store.sync();
Ext.getCmp('contentList').store.load();
}



on an edit I shouldn't have to load the store again but record.set is not updating the record in the grid. If I load the store again I can see the changes, if I click on the record I can see the the data displayed in the form is the new edited data. But the record in the grid continues to display the data as it was before the edit. unless I load the store again.

I'm expecting record.set() to update the record in the grid. It should also show the record as dirty until I call store.commitChanges(); But that's not what I'm seeing.

mitchellsimoens
29 Dec 2011, 9:15 AM
Is the store's datachanged event firing? The grid should be listening to the datachanged event on the store to change it's rows.

bee
27 Jan 2012, 1:21 AM
Can you please elaborate more ?

Dmoney
27 Jan 2012, 9:23 AM
Sorry this is part of a large project and I havent had time to isolate the problem and create an example. In my large application though the datachanged event does not appear to fire.

robertb216
8 Feb 2012, 9:16 PM
Dmoney's description is accurate, the record.set(values) command is not refreshing the grid although the store is correctly updated. If the user selects the row again from the grid or sorts from the column header, the modified field is marked as dirty. This code was working correctly in 4.0.7 but when I upgraded to 4.1 beta2, the problem appeared. I'm guessing the store's datachanged event isn't firing... any suggestions on a quick fix ???

Controller:

Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',


views: [ 'user.List',
'user.Edit'
],


stores: [ 'Users' ],
models: [ 'User' ],


init: function() {
this.control({
'userlist': {
itemdblclick: this.editUser
},
'useredit button[action=save]': {
click: this.updateUser
}
});
},


editUser: function(grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();


}


});

burnnat
9 Feb 2012, 7:33 AM
Just a thought... perhaps this is related to EXTJSIV-5136 (http://www.sencha.com/forum/showthread.php?174095-4.1b1-Model-set%28-Object-%29-calls-endEdit%28%29-with-empty-modifiedFieldNames-arg)?

mankz
13 Feb 2012, 1:08 PM
Can you produce a simple test case? Since this only involves a grid and a store it should be trivial :)

burnnat
13 Feb 2012, 1:49 PM
Here's a test case I worked up. There are two buttons on the grid; they both increment the age of "Lisa", but the "Single Param" button uses the single-argument format for record.set(), while the "Double Param" uses the two-argument format. If you click them, you'll note that the "Double Param" button updates the value in the grid, but the "Single Param" does not.


Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone', 'age'],
data:{
'items':[
{ name: 'Lisa', email: "lisa@simpsons.com", phone: "555-111-1224", age: 14 },
{ name: 'Bart', email: "bart@simpsons.com", phone: "555-222-1234", age: 16 },
{ name: 'Homer', email: "home@simpsons.com", phone: "555-222-1244", age: 42 },
{ name: 'Marge', email: "marge@simpsons.com", phone: "555-222-1254", age: 38 }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
tbar: [{
text: 'Single Param',
handler: function() {
var rec = store.first();
rec.set({
age: rec.get('age') + 1
});
}
}, {
text: 'Double Param',
handler: function() {
var rec = store.first();
rec.set('age', rec.get('age') + 1);
}
}],
store: store,
columns: [
{ header: 'Name', dataIndex: 'name', flex: 1 },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone', flex: 1 },
{ header: 'Age', dataIndex: 'age', flex: 1 }
],
height: 200,
width: 500,
renderTo: Ext.getBody()
});
});

powellke
4 Apr 2013, 6:28 AM
This problem still exists in version 4.2.0.663. I have confirmed that the datachanged event is not getting fired when I call set with a new value.

mankz
6 Apr 2013, 4:46 AM
@ powellke: Can you please provide a fresh test case to use with Ext 4.2?

powellke
17 Apr 2013, 5:44 PM
When I dropped in the test case provided by burnnat, it worked fine. But my grid was still not working. My grid uses the buffered renderer, grouping feature, and filters feature. I commented them out and my grid starting updating correctly. It quit working when I added the grouping feature back in.

If you add the grouping feature to burnnat's code, but don't group by any column, the age won't update in the grid when you click either the Single Param or Double Param button. When you group by a column, the correct value shows up in the grid with the cell dirty marker in the corner and it will update when you click the buttons. Uncheck "Show in groups" and the grid quits updating when clicking the buttons.