View Full Version : Update rows inline

19 Oct 2011, 9:39 AM
So I spent some time looking around trying to find an answer to this.

I have a grid which has a finite number of records, say it'll be set at 10. Our RESTful Ext store will be polling the back end and updating these records.

I've got it working, I have a Ext.grid.Panel which displays the 10 rows, but there are a few issues. First is the scrolling and selection reset when the store reloads ("Store.load()" is called). By reset I mean the scroll bar moves back up to the top, and if a record was selected it becomes unselected. What I gather is the template is re-rendered for all rows, even though the loaded values are the same entities with possible new/altered values. Since everything is re-rendered there are new dom elements and the scroll bar has to move up and the selection can't be kept.

I would like the grid cells to be updated rather than re-render. I figure this would remove both the scrolling and selection issues, and allow the polling to keep the grid view up to date.

EDIT: Could I possibly create the rows for the Grid manually and keep references, then update them directly when I poll for new results?

19 Oct 2011, 10:50 AM
I can think of a few ways to do this but I don't much like any of them.

The best option I've thought of so far is to have 2 stores, one used by the grid and the other one doing the polling. When new results come in you can then compare the records in the two stores and make the necessary updates. The get() and set() methods on the records should prove useful for this, you might also need to use commit() to stop the field appearing as dirty in the grid.

It gets more complicated if you want to allow users to do inline editing.

I'd be interested to see if anyone has a cleaner way to do this.

19 Oct 2011, 11:02 AM
Thanks, you are a big help (I've noticed you're replies on a lot of posts)!

I think you are right, that solution is the one I was using this morning, BUT I wasn't using the 'set' method on the record but instead setting the property directly which didn't update the grid. I changed to using the set and things look much better now. Thank you. This solution isn't optimal but I believe I can create a certain child component that will encapsulate the nasty bits and at least it will appear a clean solution API wise.

Thanks again!