Load page data after clicking tab in sencha

Question

I have to develop a sencha page with few tabs in tab panel. When I go to that page, it loads all data for all tabs. but I need to avoid loading data for all tabs and load tab data when ever I needed them (after clicking appropriate tab).

score 3 · Answer 1 · answered Jun 04 '13 at 08:38

3

Well this is done out of the box by ExtJS if you configured all the correct way. The deferredRender does the trick here.

True by default to defer the rendering of child items to the browsers DOM until a tab is activated. False will render all contained items as soon as the layout is rendered. If there is a significant amount of content or a lot of heavy controls being rendered into panels that are not displayed by default, setting this to true might improve performance.

The deferredRender property is internally passed to the layout manager for TabPanels (Ext.layout.container.Card) as its Ext.layout.container.Card.deferredRender configuration value.

Note: leaving deferredRender as true means that the content within an unactivated tab will not be available

Defaults to: true

Now it is important that you use only configurations to define your component (which is the recommend way anyway) Here is a example:

{
    xtype : 'tabpanel',
    items: [
        {
            title: 'tab A'
        },
        {
            title: 'tab B'
        },
        {
            title: 'tab C'
        }
    ]
}

See in this working JSFiddle when each tab get's rendered.

Note that this will also effect all childs of a tab.

answered Jun 04 '13 at 08:38

sra

23,820
7
55
89

This only affects rendering, not loading, does it? – rixo Jun 04 '13 at 13:24
1

@rixo What do mean by that? If I get you right then I think what you are talking about is more a design matter where imo most of the framework users using the wrong approaches . But don't get me wrong that didn't mean your answer is wrong or a wrong approach imo. For me all depends on the components that are viewed; each should decide herself when to load the data. While rendering always happens and so the render events get always called this is not true for the show event cause show is not called all the time (which is absolutely fine) In my experience therefore the render events are the best – sra Jun 04 '13 at 13:47
I didn't understand that you recommended using the `afterrender` event to trigger loading. I believed you answered that `deferredRender` set to true would defer what the OP calls "loading". `show` event will always be fired with card layout, but you're right that it's almost the only layout for which it is the case. – rixo Jun 04 '13 at 14:06
1

@rixo No you are right I didn't and I didn't intend to because I know nothing about the components within that tabpanel. And the OP didn't made that clear. You already mentioned to use events so I saw no reason to duplicate that. But most people have design errors by using instances instead of configurations so my maingoal was to point to that topic. Along with that goes the existing property deferredRender. And yes I recommend to use the renderer events for most loading operations. But as you see here that all takes a loot of explanations and I intended to keep that short ;9 – sra Jun 04 '13 at 14:37

score 1 · Answer 2 · answered Jun 04 '13 at 06:11

You'll have to listen for the child panels show event. Then, it depends on the nature of your "data". If that's some HTML, you'll have to make some AJAX calls to get it from the server and update the panel's body with it. If your data is bound to some stores, you'll have to set autoLoad to false and call their load method when the tab is shown.

Also, don't forget to set the single option of your event listeners to true, in order to load the content only the first time the tab are displayed.

score 1 · Answer 3 · answered Jun 04 '13 at 08:23

We need more info, copy&paste code from your "controller tabs page":

maybe, you are loading data on "onRender" event. Try put "autoLoad:false" on the store, and load on change tab:

Examples:

'name_container tabpanel' : {
    beforetabchange : this.function1,
    tabchange : this.function2          
},

Load page data after clicking tab in sencha

3 Answers3