PDA

View Full Version : Select new record after Sync



martinrame
21 Feb 2012, 4:27 AM
Hi, I have a grid panel, with a toolbar that allows Insert/Update/Delete operations, when the user clicks Insert, a form is shown to allow editing new data. Then, when the user clicks Ok, the data is sent to the server, the grid is updated and the form is closed.

What I can't make it work, is the selection of the newly created record, so far I'm using this code:


frm = win.down('form').getForm();
var store = this.getCustomersStore();
customer = frm.getValues();
store.insert(0, customer);
store.sync();
gridRef.getSelectionModel().select(customer, false);
win.destroy();

The line that should do the selection is "gridRef.getSelectionModel().select(customer, false);", but it does nothing.

How can I do what I want to?.

Thanks in advance,
martin.

vietits
21 Feb 2012, 5:31 AM
That's because the customer variable is not a record in your store. Below is my fix (in red color):


frm = win.down('form').getForm();
var store = this.getCustomersStore();
customer = frm.getValues();
store.insert(0, customer);
store.sync();
customer = store.getAt(0);
gridRef.getSelectionModel().select(customer, false);
win.destroy();

martinrame
21 Feb 2012, 5:55 AM
Thanks vietits, I tried your suggestion, but it doesn't work. There should be something else to check...

BTW, I've also read http://stackoverflow.com/questions/6919131/extjs-4-grid-how-to-select-a-newly-created-record, I have the same problem.

martinrame
21 Feb 2012, 6:19 AM
Here's more info.

The data returned by the server is this:


{
"success" : true,
"root" :
{ "id" : 563, "name" : "asda", "email" : "aa", "age" : "1", "active" : false, "gender" : 0 }
}

As you can see, the Id has a value of 563.

Then, when I call customer = store.getAt(0); I get this:


active: false
age: "1"
email: "aa"
gender: 0
id: 0
name: "asda"

This looks like the data assigned from the form, but I want to assign the data comming from the server. How can I do that?.

vietits
21 Feb 2012, 6:34 AM
This is because the code of getting record from store happens too early, before the store is updated with the information returned from server. Let try to fix this by catching the event 'write' of the store and place the code of setting selection there.


// register to handle 'write' event of the store with onStoreWrite
....
....
frm = win.down('form').getForm();
var store = this.getCustomersStore();
customer = frm.getValues();
store.insert(0, customer);
store.sync();
win.destroy();
...

onStoreWrite: function(store, operation){
if(operation.action == 'create'){
//customer = store.getAt(0);
//gridRef.getSelectionModel().select(customer, false);
gridRef.getSelectionModel().select(0, false);
}
}

martinrame
21 Feb 2012, 6:46 AM
Yes!, that did the trick.

Thank you very much.

martinrame
21 Feb 2012, 6:54 AM
Now, a related question.

The default behavior of Update is to keep the selected record after sync(), but after overriding the onStoreWrite function, the record is not selected anymore. I mean, it now works for Inserts but not for Updates.

Is there a way to call the defauld behavior from the onStoreWrite function for Updates, and keep using your suggested code for Inserts?.

Thanks in advance.

vietits
21 Feb 2012, 7:24 AM
Do you want to keep selected records before sync plus the record you insert? If so, you just modify the code of select record to keep existing selection.


onStoreWrite: function(store, operation){
if(operation.action == 'create'){
//customer = store.getAt(0);
//gridRef.getSelectionModel().select(customer, false);
gridRef.getSelectionModel().select(0, true);
}
}

Also note that the write event of the store is fired for creating, updating and destroying records. So the case you mentioned only happens when the sync action causes updating and creating actions happen at the same time.

martinrame
21 Feb 2012, 7:34 AM
No, after Insert, the inserted record is the only selected. After Update I want to keep the selection.

I didn't like the "getAt(0)" method for getting the last modified record.

This code works ok. What do you think about it?.



onJsonstoreWrite: function(store, operation, options) {
var customer = operation.getRecords();
gridRef.getSelectionModel().select(customer, false);
}

vietits
21 Feb 2012, 7:45 AM
onJsonstoreWrite: function(store, operation, options) {
var customer = operation.getRecords();
gridRef.getSelectionModel().select(customer, false);
}

This code will select all newly created records and updated records but it does not mean all existing selected records. Maybe there are some records have been selected but they are not modified so they are not included in operation.getRecords();

martinrame
21 Feb 2012, 7:48 AM
Well, in my application I'm letting the user select only one record to Update/Delete, so, I'm sure getSelectedRecords will return only that record.

vietits
21 Feb 2012, 4:12 PM
If you only allow single selection and call sync() method right after each creating/updating/deleting action then it will be OK.