How to override GroupTabPanel width in extjs 4

Question

I want to override Ext.ux.GroupTabPanel width in extjs 4.

Any Idea please?

I want to override width of GroupTabPanel contorl. Default with 150 is given in bais class i want to change it 150 by override. — Kanchan, Apr 15 '13 at 08:04
This is helpful if you are looking to override components: http://stackoverflow.com/questions/14254321/best-practice-for-overriding-classes-properties-in-extjs . Also: http://docs.sencha.com/ext-js/4-1/#!/api/Ext-method-override — cclerv, Apr 15 '13 at 08:15

score 0 · Accepted Answer · answered May 07 '13 at 10:33

The tab bar width is indeed hardcoded to 150, so you're right you must override or extend the class.

The following override adds an option to GroupTabPanel to do what you want, without changing the default behaviour:

/**
 * This override adds the {@link #tabBarWidth} config option.
 */
// The name of the class is only used by the loader to find the file
Ext.define('MyApp.Ext.ux.GroupTabPanelWidthOption', {

    override: 'Ext.ux.GroupTabPanel'

    /**
     * Width of the tab bar.
     * 
     * @cfg {Integer}
     */
    ,tabBarWidth: 150

    ,initComponent: function() {
        this.callParent(arguments);
        this.down('treepanel').setWidth(this.tabBarWidth);
    }
});

Of course, the code must sit in a file that Ext's class loader will be able to find.

Alternatively, if you really want to change the default width, you'd better extend the class instead of overriding it, in order to avoid any risk to break legacy or external code (if you consider that's not a problem for you, you can just change the default option value in the code above).

This is how you would do it:

/**
 * A {@link Ext.ux.GroupTabPanel} with configurable tab bar width.
 *
 * @xtype largegrouptabpanel
 */
Ext.define('MyApp.tab.GroupTabPanel', {
    extend: 'Ext.ux.GroupTabPanel'

    ,alias: ['widget.largegrouptabpanel']

    /**
     * Width of the tab bar.
     * 
     * @cfg {Integer}
     */
    ,tabBarWidth: 300 // Notice the changed default

    ,initComponent: function() {
        this.callParent(arguments);
        this.down('treepanel').setWidth(this.tabBarWidth);
    }
});

How to override GroupTabPanel width in extjs 4

1 Answers1

Linked