View Full Version : Change active page and select row in GridPanel

24 Oct 2012, 8:34 AM

I have a GridPanel with paging and checkboxmodel selection. When users click a button, I show him a window with a form that have new data to add to the Grid. When clicks OK button in this form, I send data to server that answer me with the operation result (success or not) and the ID of the new grid record. After that, I reload Grid's store.

My problem is that I would like to select this new record.

If new record is in the first page, I don't have problems but, if new record is in other page, doesn't work. Is obvious that doesn't work because the row with the ID is not visible, so I would try to move to the appropiate page, but I don't know how to do it.

This is the code inside button form (in red, code that not works):

if ( Ext.getCmp('addForm').getForm().isValid()) {
Ext.getCmp('addForm').getForm().submit ({
success: function (action, form) {
if (JSON.parse (form.response.responseText).success == "false") {
showErrorMsg ("errortitle"), JSON.parse(form.response.responseText).errors[0].msg);
} else {
showOKMsg ("add"), ("addok"));
gridStore.load ({
params:{ start:0, limit:5 },
callback: function () {
var recvId = JSON.parse(form.response.responseText).id;
var rowIndex = gridStore.find('id', recvId);
if (rowIndex == -1) {
Ext.getCmp("myGridPanel").bottomToolbar.moveNext ();
rowIndex = gridStore.find('id', recvId);
Ext.getCmp("myGridPanel").getSelectionModel().selectRange(rowIndex, rowIndex);
}, failure: function (action, form) {
showErrorMsg ("errortitle"), JSON.parse (form.response.responseText).errors[0].msg);

Any help, tip or idea would be appreciated.

Thanks in advance and best regards.

24 Oct 2012, 12:07 PM
Couldn't the response from the FormPanel also include the row number for where the record was inserted? If you know both the row id and the position within the table the row is you could page the grid to the appropiate spot in the table that contains the record. Of course you need to consider whether the grid view is sorted and the page window size.

Another approach is instead of your code working in a callback from the Grid.load call you could add your code as a listener to the store/grid for the load events. Each time you receive the event you can check to see if the record is within the store, if it is you can remove yourself as a listener and tell the grid to select, otherwise tell the grid to load the next set.

Now if it was my choice, I would go with the first approach. The second approach is not very good because it causes unnecessary server page requests for data.