CODEWITHSUNDEEP
extjsextjs4sencha-architect
Madura Harshana
Madura Harshana

Reputation: 1299

Load page data after clicking tab in sencha

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).

Upvotes: 3

Views: 5777

Answers (3)

sra
sra

Reputation: 23975

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.

Upvotes: 3

mfruizs
mfruizs

Reputation: 770

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          
},

Upvotes: 1

rixo
rixo

Reputation: 25001

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.

Upvotes: 1

Related Questions