I am currently developing a sencha web app using sencha touch 2.2.1. Within my application, there is a screen that contains a container with multiple panels. Each panel consists of two components - a top panel and an inner panel.
Upon page initialization, I make an ajax API call to retrieve a list of data for the top panel of each item in the container. When a user clicks on a top panel, another API call is made to fetch data for the corresponding inner panel. After receiving the response from the API, the data is rendered on the inner panel making it visible. This process is repeated for all items within the container when a top panel is clicked.
There is also a button at the top to 'expandAll', which triggers API calls for all items in a loop one after another, rendering data for each inner panel sequentially. The approach involves calling one API, storing the response in a store, rendering the data on the screen, and then proceeding to the next API call for the subsequent item.
getDetailData:function(params){
var detailStore=Ext.getStore('DetailData');
detailStore.load({
callback:function(data,opt,success) {
detailStore.storeDetailData(data);
_this.onShowDetailData(data);
// proceed to next API call until all items' data are fetched and displayed
}
});
}
However, the process of fetching all items' data and rendering it on the UI thread seems to be slowing down the application significantly.
Moreover, applying filters on the store before rendering the data adds an extra layer of time-consuming processing.
I am seeking advice on how to optimize this processing and rendering workflow. While the ajax API calls and data retrieval from the server are not causing delays, the processing and rendering stages appear to be the bottlenecks.
Any suggestions or recommendations would be greatly appreciated.
Thank you