CODEWITHSUNDEEP
performancesencha-touch-2tabpanel
Dany Y
Dany Y

Reputation: 7031

How to create / destroy tab dynamically in sencha touch 2

I have a list of tabs, what I want is whenever i switch a tab, the items are added to the tab and it is redrawn, and the old tab is destroyed. I'm doing this for performance reasons.

This is how i tried to do it, but its not working

view=    Ext.Viewport.add({                
                xtype : 'tabpanel',  
                deferredRender:false,
                tabBarPosition : 'bottom',
                items : tabs,
                listeners : 
                {
                    activeitemchange : function(container, newValue, oldValue,opts)
                    {
                        // --> destroy old tab
                        oldValue.setItems([]);
                        index = container.items.findIndex('id',newValue.id);
                        // --> redraw new tab                            
                        newValue.add(tabItems[index-1]);
                    }
                }
});

The tabs are loaded only the first time. The second time i enter a tab i get
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

What is the proper way to do this ?
And is this really more performant than creating the tabs with their items in them.

Thank you

Upvotes: 3

Views: 2449

Answers (1)

rdougan
rdougan

Reputation: 7225

I'm not sure why you would want to do this. It would mean the actual tabs will also be removed from your tabpanel. Is that what you want?

Surely you just want to remove the tabpanel items - right? If so, I suggest you do not use tabpanel, instead you should use a normal container with a card layout and then a tabbar component. That way, the tabbar can have several tabs, and the container (fake tabpanel) can pretend to have several items, but only have 1/2.

Upvotes: 2

Related Questions