How to cache components of a huge Application

1
votes

I need to setup a quite huge Application with arround >20 main views plus forms. A mainview will at least contain one grid but can contain upto ten grids. There are also some mainviews that contains a Portal-Panel.

Now it comes that it take quite some time till a mainview opens which don't happends as I tested it with just one instead of >20. The Application lays within a Viewport with fit layout which holds a container with Borderlayout. The Mainview always render within the center while the other regions are used for navigation.

My first approach caching things within a tabpanel

My first approach was to got with a Tab-Panel with hidden tabs. Parallel to that I manage a MixedCollection where I make lookups if the View has already been inserted into the tabpanel or has to be created. If it has already been inserted I fetch the positon from the MixedCollection and run the setActiveTab(). But it seems worthless cause it takes all the same time to insert a new mainview or to activate a existing with setActiveTab().

So what I am doing wrong and how can I make this better?

Edit

The problem seems to come from the rendertime and that the component seems to get reredenred each time setActiveTab() is used. It takes up to 2-3 secs to render a view into the center panel. Therefore I thought I can be speed it up by caching a already created view so that the rendering and sizing didn't need to be done. I guess I should mention that in the north region a menu is also rendered each time, which not get's chached but that shouldn't matter, shouldn't it?

How the views are switched

I have a extra controller that manages the menue-view and the main-view changes. For that the menue gets removed from the container and the new menue is added and for the main-view a lookup is done in the mentioned mixed-collection if the view has already been created and if so the tab-index is received and the tab activated. If not the view get added as new tab and is afterwards added with it's ident and index to the mixed collection.

2
extjsextjs4extjs4.1extjs-mvc
You can load views dynamically - so each view is loaded on demand. Is this what you are after? - Izhaki
@Izhaki No, most of the views (classes) are already there at application start. See my edit... - seba
You are probably rendering all the components. In our app. we have 76 views, 109 model, 66 controllers and it works really fast then, the problem is not in the size of you app. but in what the app. code is doing there instead. Show us some code please. - lontivero
@lontivero No I don't render all views each time, just two: A menue in the north and the mainview in the center. It is worthless to post that bunch of code. No one will work through it. But I will add some more information - seba

2 Answers

2
votes

It may help you to take a look at suspendLayouts() and resumeLayouts()

You run Ext.suspendLayouts(); before you begin changing the views and Ext.resumeLayouts(true) after you are done with all views.

You should also check for overnesting, meaning you have nested to much components into each other.

Example:

If a grid is the only component within a tabpanel then it would be overnesting if you place that grid in a extra panel and then into the tabpanel.

1
votes

Firstly what I found that non active tabs will be populated anyway. I don't know why. But my stores for not active tabs loaded anyway. Second, it is really doesn't matter the size of your app. We have a lot of views and everything works pretty fast. In most cases it is depends:

  1. First is nesting - review your code. Less nesting more speed. For example instead of panel if you dont need all stuff that panel provide- use container. Because all this stuff is add more divs to your dom.
  2. Depends how you create your view. Without your code it is really hard to say, why it is slow. Maybe you create your view every time when you open tab, or go to another view.
  3. As mention @sra try to use suspendLayouts - it means that your browser will render your stuff only resumeLayouts, instead of rerender everything everytime when you add any component.
  4. If you use windows - use closeAction:hide instead of destroy.
  5. Not use Ext.getCmp(). I also hear that refs can slow down application because they start searching your component from the body. But it not proved info :) Use component.down('id'), component.up('xtype') it will search only from your component not from the body.
  6. Not create your view from controller everytime when you do something using Ext.create('Panel'). It means it will created everytime.
  7. Use less global events because this is also slowdown your app.

It is really hard to say what is the issue in your case without code. This is only few point that can help you. But my suggestion to looking to nesting and how and where you create a view.