PDA

View Full Version : Grid cell is not updated after edition with combobox



K4T
3 Jun 2012, 10:48 AM
Hello, coders! I have grid panel which show list of tasks. Data inside column called Assigned To can be edited by double click on it with combobox filled with user names taken from Users store. Model`s field assignedTo is associated field (assignedToId) and I don`t have any idea how to update it when it was edited successfully by changing column value which is bind to that field. Now, after edition, every new tasks data is saved in database but value of edited cell (Assigned To) is not updated inside grid view. If I refresh whole page it will work, because all data will be reloaded from database. How to refresh association data after edition?

Here you can see it how it looks in browser:
35879

Framgments from console logs with task model:



How task looks before edit (image #1):

constructor


assignedToBelongsToInstance: constructor

data: Object

id: 1 //equal with assignedToId - OK!
name: "Jan Kowalski"
__proto__: Object

dirty: false
...

data: Object

assignedToId: 1 //LOOK AT THAT ID
id: 45
title: "Task 06"
__proto__: Object

How task looks after edit (image #2):

constructor


assignedToBelongsToInstance: constructor

data: Object

id: 1 //still old value which is not equal with new one - how to refresh???
name: "Jan Kowalski"
__proto__: Object

dirty: false
...

data: Object

assignedToId: 3 //LOOK! NEW VALUE!
id: 45
title: "Task 06"
__proto__: Object






Task Model:

fields: [
{name: 'id', type: 'int'},
{name: 'title', type: 'string'},
...
{name: 'assignedToId', type: 'int'},
],


associations: [
{ type: 'belongsTo', model: 'Tasks.model.User', primaryKey: 'id', foreignKey: 'assignedToId', getterName: 'getAssignedTo', setterName: 'setAssignedTo', associatedName: 'assignedTo', associationKey: 'assignedTo' }
],


proxy: {
....
}


User Model:


fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
],


hasMany: {model: 'Tasks.model.Task', name: 'tasks'},


proxy: {
...
}


Here is how I render column Assigned To

Tasks Grid View Code:


buildAssignedToColumn: function() {
return {
header: 'Assigned To',
dataIndex: 'assignedToId',
editor: new Ext.form.field.ComboBox({ //combobox for editing assigned users to task
store: Ext.create('Tasks.store.Users'),
name: 'assignedToId',
displayField: 'name',
valueField: 'id'
}),
renderer: function(value, meta, record, rowIndex, colIndex, store, view) {
return record.getAssignedTo().get('name'); //getting associated data - user name
}
}
},


Here is task update method from Tasks Controller which is executed when tasks was edited:


update: function(task) {
var me = this;

task.save({
success: function(task, operation) {
me.showDetails(null, task); //refresh details panel
},
failure: function(task, operation) {
...
}
});
},


Thank you for your time.

vietits
3 Jun 2012, 4:06 PM
It's due to the editor updates data in the main record only. Data in associated records are not updated. What I mean is after editing, the editor updates assignedToId field in main record, but the id and name fields in associated record won't be updated whereas you render the column by getting data from associated records.

K4T
3 Jun 2012, 11:37 PM
Exactly.But how to solve this? How to update associated record when field assignedToId was changed? I waste 3 days on it :/

vietits
4 Jun 2012, 1:44 AM
You have to do the updating associated records and this will depend on each situation. With your case, you can return a record with associated records when updating the modified record or you can download the associated records from server basing on the value of assignedToId or get data from an existing store, etc.

With your specific case, I think the best solution is using a store to load the list of users then use this store for combobox and the source to get the name of user assigned to the task when rendering the column. No need to use associations.


var usersStore = Ext.create('Tasks.store.Users');
....
buildAssignedToColumn: function() {
return {
header: 'Assigned To',
dataIndex: 'assignedToId',
editor: new Ext.form.field.ComboBox({ //combobox for editing assigned users to task
// store: Ext.create('Tasks.store.Users'),
store: usersStore,
name: 'assignedToId',
displayField: 'name',
valueField: 'id'
}),
renderer: function(value, meta, record, rowIndex, colIndex, store, view) {
// return record.getAssignedTo().get('name'); //getting associated data - user name
var user = usersStore.getById(value);
return user ? user.get('name') : 'unknown';
}
}
},

K4T
5 Jun 2012, 9:25 AM
That is a great solution! But could you tell me how to update that associated record using new assignedToId value? I need it too, because I have to show updated task`s details inside Task Details Panel. I tried task.setAssignedTo() method inside task.save() success callback but it didnt work as I expected.

K4T
8 Jun 2012, 11:56 PM
bump