PDA

View Full Version : [CLOSED] Tab's setCard method missing 2nd parameter for animation



meyerovb
1 Jul 2010, 11:19 PM
The setCard for the CardLayout class contains a second parameter for animation, but the Tab class's setCard method doesn't have that parameter.

bone
2 Jul 2010, 12:33 AM
why would you want to animate switching between tabs?

meyerovb
2 Jul 2010, 1:42 AM
Apparently I have confused TabPanel with TabBar... I thought that the item in a TabPanel was actually an Ext.Tab, however I see now that Ext.Tab's are the components in TabBars with a single associated card. I think naming the Tab's card change method setCard is confusing, as setCard is an implied method in any card layout component.

I've got some issues though:

Ext.TabBar's activeTab property is only set in onTabTap, not when the TabBar is constructed or you manually switch it by calling setActiveItem on a containing TabPanel

Ext.TabBar's setCard method can only take a constructed object, not an implied one. If this will be the only available behavior, please ensure the method returns the TabBar so it will be chainable. If it will accept implied objects, then return the constructed object. Currently the method doesn't return anything.

The setCard method of Ext.layout.CardLayout is not chainable because it doesn't return anything.

The setActiveItem method of Ext.layout.CardLayout can return false or nothing at all (if cancelled from beforeactivate or beforedeactivate methods), and I am curious why it returns the activeItem instead of the container (it makes it unchainable, and the item parameter isn't parsed, it's either an item or the id of one).

After calling setCard on a tab, if it is the active tab, the new data is not displayed. You need to switch back to another tab then go back to the changed one.

These issues can be seen in the following code:


Ext.setup({onReady: function () {
var tabPanel = new Ext.TabPanel({ fullscreen: true, items: [
{ title: 'first', html: 'go to second tab' },
{ title: 'second', xtype: 'button', text: 'Click Me',
handler: function () {
//this one won't work
//tabPanel.getTabBar().activeTab.setCard({ xtype: 'panel', html: 'second' });

//this one works, but it's not chainable
tabPanel.getTabBar().activeTab.setCard(new Ext.Panel({ html: 'second' }));

//Attempt to switch off and back onto the changed tab, doesn't refresh the card
//...also not chainable
//tabPanel.setCard(0);
//tabPanel.setCard(1);
}
}]
});
alert(tabPanel.getTabBar().activeTab);
}});

TommyMaintz
2 Jul 2010, 12:02 PM
Thanks for the constructive feedback meyerovb. We will definitely take your points into consideration.