如何在extjs 4中覆盖GroupTabPanel宽度

时间:2013-04-15 07:54:04

标签: extjs

我想覆盖extjs 4中的Ext.ux.GroupTabPanel宽度。

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

标签栏宽度的确硬编码为150,因此您必须覆盖或扩展该类。

以下覆盖为GroupTabPanel添加了一个选项,可以执行您想要的操作,而无需更改默认行为:

/**
 * 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);
    }
});

当然,代码必须位于Ext的类加载器能够找到的文件中。

或者,如果您确实要更改默认宽度,则最好扩展该类而不是覆盖它,以避免破坏旧版或外部代码的任何风险(如果您考虑这对您来说不是问题,您可以在上面的代码中更改默认选项值。

这就是你要做的:

/**
 * 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);
    }
});