Extjs form performance problem

We use big input forms with couple of input fields and run into performance problems. The exact problem is the render time of the form. It takes couple of seconds (4-10sec) to display the form. We use multi column layout and ~30 combo f开发者_如何学JAVAields loaded by json datastore and another ~10 input fields. The render process is so slow so I can see the alignment and display process of the form. Is there any method to speed up the display process?

Try getting all the combobox data in a single slot, then load the data using the store.load method

Could it be that the data loaded by the JSONStores is causing the alignment to change? Turn off all the JSONStores and then measure the render process - you'll see that it takes quite awhile for the browser to make 30 back-end requests!

I also suggest your stores are the problem. Have you tried FireFox? Or as @JJ recommended, don't load the stores and see what happens. I would also suggest rendering your forms lazily, but it seems like your problem involves the stores.

I have seen similar slowness when loading stores (usually backend queries taking lots of time). So, I created a single AJAX call to retrieve all store data. In the AJAX callback, parse the contents of the payload and distribute appropriately to each store.

This may be helpful for someone:

We have same problem with multiple checkboxes and this post helps us to solve it.

Each time, when Form or other container adds an element - it's layout recalculates. This causes render issue when there is a lot of elements.

So, you can:

1. Add all children at one-time:

    container.add(panel, button, grid);

2. Suspend layout recalculation:

    container.suspendLayout = true;
    addSomething();
    container.suspendLayout = false;
    container.doLayout();