如何在 extjs 4 中覆盖 GroupTabPanel 宽度答案

【问题标题】：How to override GroupTabPanel width in extjs 4如何在 extjs 4 中覆盖 GroupTabPanel 宽度
【发布时间】：2013-05-07 18:33:06
【问题描述】：

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

有什么想法吗？

【问题讨论】：

你到底想做什么？
我想覆盖 GroupTabPanel 控件的宽度。在 bais 类中给出默认值 150 我想通过覆盖将其更改为 150。
如果您希望覆盖组件，这很有帮助：stackoverflow.com/questions/14254321/…。另外：docs.sencha.com/ext-js/4-1/#!/api/Ext-method-override

标签： extjs

【解决方案1】：

标签栏宽度确实被硬编码为 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);
    }
});

【讨论】：