PDA

View Full Version : Change Tab style?



omulriain
21 Sep 2010, 11:06 AM
I was trying to change tab style to look more like a row of buttons that can be centered. I started to extend some components as I want my code to be somewhat portable accross versions, but then when it wasn't working well for me I thought there might be an easier way. Is there?
Here is what I started to try ( I have tried several variations of this as well):

What I am really after is a tabPanel with the look of the option buttons in kitchenSink -> User Interface -> ToolBars example located in the center of the bottom bar. In my implementation I will want them located above the card set like the tabPanel and with the same functionality of tabPanel.


home.prettyTab = Ext.extend(Ext.Tab,{
defaultCls: 'x-button',
pressedCls: 'x-button-pressed',
activeCls: 'x-button-active',

initComponent : function() {
home.prettyTab.superclass.initComponent.call(this);

}
});
//Ext.reg('pretty-tab',home.prettyTab);
Ext.reg('tab',home.prettyTab);
home.prettyTabPanel = Ext.extend(Ext.TabPanel,{
//defaultType: 'pretty-tab',
defaultType: 'tab',
initComponent: function(){
home.prettyTabPanel.superclass.initComponent.call(this);
}
})

home.tabbedPage = new home.prettyTabPanel({
sortable: true,
//minHeight: 600,
flex: 5,
items: [home.SomePage,home.SomeOtherPage]
});