ExtJS Grid dynamic updates

[Shehul]

Hello ExtJS team/ExtJS support community,

I am new to ExtJS grid.

Here are my requirements,
I have initial grid to load, lets say 2500 rows
than every minute I go to server and get 100 updated rows and want to update the grid of those 100 rows only.The grid is sorted by datetime before update and after update.

Please note that I don't want to reload the entire grid on every refresh.

So far problem I found is, there is no update method(this is my knowledge,hopefully there exists one and someone can point me to the documentation or usage) for updating the existing rows of grid/data store. Therefore currently I placed solution ,
that first I remove the existing rows in the data store
and than add it back the new once in the data store. As the grid is using this store I see the updated data.
Point is client shouldn't see Loading... things and still gets updated data every minute.

The only issue in this is my grid has selection model. If user had selected any rows they gets cleared out after I remove and add the rows back.

The help I need from extjs community is either show me the method to update the existing grid rows or the way to preserver the selection even after add/remove of rows.

I am using ExtJS 4 OpenGL Version.

Thanks,

Shehul

[mitchellsimoens]

You can set loadMask to false to disable the loading mask. For selection you can get the current selection and then reapply the selection after the rows are back in the grid.

[Shehul]

Thanks for reply, however setting loadMask to false doesn't improve the user experience because than user doesn't even see everything is working or not.

Regarding your suggetion to reapply the selection, thats a basic logic you are mentioning, can you point me the code or sample methods for those applying selection.

Thanks,
Shehul


You can set loadMask to false to disable the loading mask. For selection you can get the current selection and then reapply the selection after the rows are back in the grid.

[Shehul]

I found
grid.getSelectionModel().getSelection();
to get my selected records but as we are already removing these records and adding the new ones I am confuse how can I apply the selection, One solution is to go through each record of these selection and my grid new rows to compare and apply the selection but that will hit the performance of the app.

Any one reading this any suggestions are welcome.

Thanks,
Shehul



Thanks for reply, however setting loadMask to false doesn't improve the user
experience because than user doesn't even see everything is working or not.

Regarding your suggetion to reapply the selection, thats a basic logic you are mentioning, can you point me the code or sample methods for those applying selection.

Thanks,
Shehul

[vietits]

1. grid.getSelectionModel().getSelection() return a list of selected records.
2. Basing on the result of step 1, you get a list of record ids.
3. Remove old records and load new records.
4. Loop through the list of record ids gotten from step 2, with each id call <store>.getById() to get respective record and then call grid.getSelectionModel().select(record).

[Shehul]

Hi Vietits,

I am not sure you have read my conversation with mitchellsimoens.

I already mentioned I know I can loop through those records but it hits the performance. I know I mentioned I am new to ExtJS but not new to the logic of programming.

Consider this,

I have 2000 rows initally , lets say user has selected 100 rows and 70 rows out of those are changed so to mark those 70 rows I have to go throgh the loop which hits the performance.Currently even to add and remove it is a kind of slow I really wish there was a method to Update Existing store rows(Where are the ExtJS Gurus? please reply if there is such thing exist).

I am looking for answer where I can define somekind of key to my store model and that key I can use to select or unselect the rows even between add or removes.This should be kind of mass update or mass select.


Thanks,
Shehul


1. grid.getSelectionModel().getSelection() return a list of selected records.
2. Basing on the result of step 1, you get a list of record ids.
3. Remove old records and load new records.
4. Loop through the list of record ids gotten from step 2, with each id call <store>.getById() to get respective record and then call grid.getSelectionModel().select(record).