Efficiency of ExtJS data stores and large data sets
I'm curious what experiences other developers have seen when loading large data sets into ExtJS stores. I think there are a few basic ways to look at what a large data set is:
Few records with many properties.
Many records with few properties.
Many records with many properties.
For large datasets there are too handle it, infinite grid and buffered rendering grid. The main difference is the infinite grid sends requests to load data on the fly where buffered rendering grid retrieves all the data in one go and the grid will only display a portion of that dataset based on the size of the grid.
http://docs.sencha.com/extjs/4.2.1/#!/example/grid/infinite-scroll.html
http://docs.sencha.com/extjs/4.2.1/#!/example/grid/buffer-grid.html
If the slowdown is the store loading all that data then I would suggest going with an infinite grid. If the slowdown is the grid rendering all that data then I would go with the buffered grid.
Loading data in a Ext store consists of:
1. Recieving the data and evaluating the response.
- Always use JSON. XML is a lot slower.
- Use arrays, short property names and constants as much as possible to reduce the data (string) size.
2. Transforming the data to records.
- Avoid conversion (e.g. string->date). Make your server return data that doesn't need conversion (e.g. return Date instances).
- If your server already returns an array of objects with the correct fieldnames, then you can override extractValues to simply return the raw data.
3. Adding the records to the store (indexing the id).
- Not much you can do about this...
4. Update any listening components.
- This is by far the slowest: Avoid showing large datasets.
- If you have to, use filtering, paging or a view that doesn't render the entire dataset.
IE8 Issue with large dataset:
If we have 50 records that loads 1MB of data? That's why a lot of data and I'm not surprised IE is having issues with 1MB of data.
Real time issue:
After grouping feature is applied on grid, Row expander plug-in is not working if we use EXT Store property (remoteSort: true)
I'm curious what experiences other developers have seen when loading large data sets into ExtJS stores. I think there are a few basic ways to look at what a large data set is:
Few records with many properties.
Many records with few properties.
Many records with many properties.
For large datasets there are too handle it, infinite grid and buffered rendering grid. The main difference is the infinite grid sends requests to load data on the fly where buffered rendering grid retrieves all the data in one go and the grid will only display a portion of that dataset based on the size of the grid.
http://docs.sencha.com/extjs/4.2.1/#!/example/grid/infinite-scroll.html
http://docs.sencha.com/extjs/4.2.1/#!/example/grid/buffer-grid.html
If the slowdown is the store loading all that data then I would suggest going with an infinite grid. If the slowdown is the grid rendering all that data then I would go with the buffered grid.
Loading data in a Ext store consists of:
1. Recieving the data and evaluating the response.
- Always use JSON. XML is a lot slower.
- Use arrays, short property names and constants as much as possible to reduce the data (string) size.
2. Transforming the data to records.
- Avoid conversion (e.g. string->date). Make your server return data that doesn't need conversion (e.g. return Date instances).
- If your server already returns an array of objects with the correct fieldnames, then you can override extractValues to simply return the raw data.
3. Adding the records to the store (indexing the id).
- Not much you can do about this...
4. Update any listening components.
- This is by far the slowest: Avoid showing large datasets.
- If you have to, use filtering, paging or a view that doesn't render the entire dataset.
IE8 Issue with large dataset:
If we have 50 records that loads 1MB of data? That's why a lot of data and I'm not surprised IE is having issues with 1MB of data.
Real time issue:
After grouping feature is applied on grid, Row expander plug-in is not working if we use EXT Store property (remoteSort: true)
Comments
Post a Comment