如何覆盖extjs中的GroupTabPanel宽度4 [英] How to override GroupTabPanel width in extjs 4

问题描述

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

任何想法？

解决方案

标签栏宽度确实硬编码到150，所以你是对的，你必须覆盖或扩展类。

以下重写将为GroupTabPanel添加一个选项来执行所需操作，而不更改默认行为：

  / ** 
 *此覆盖添加{@link #tabBarWidth}配置选项。 
 * / 
 //该类的名称仅由加载程序使用以查找文件
 Ext.define（'MyApp.Ext.ux.GroupTabPanelWidthOption'，{
 
覆盖：'Ext.ux.GroupTabPanel'
 
 / ** 
 *标签栏的宽度
 * 
 * @cfg {Integer} 
 * / 
，tabBarWidth：150 
 
，initComponent：function（）{
 this.callParent（arguments）; 
 this.down（'treepanel '）.setWidth（this.tabBarWidth）; 
} 
}）; 
  

当然，代码必须位于Ext的类加载器将能够找到的文件中。 / p>

或者，如果您真的要更改默认宽度，则最好扩展类而不是覆盖它，以避免任何破坏传统或外部代码的风险（如果您认为这并不是问题，您可以在上面的代码中更改默认选项值）。

这是如何你可以这样做：

  / ** 
 *一个{@link Ext.ux.GroupTabPanel}条宽。 
 * 
 * @xtype largegrouptabpanel 
 * / 
 Ext.define（'MyApp.tab.GroupTabPanel'，{
 extends：'Ext.ux.GroupTabPanel'
 
，别名：['widget.largegrouptabpanel'] 
 
 / ** 
 *标签栏的宽度
 * 
 * @ cfg {Integer} 
 * / 
，tabBarWidth：300 //注意更改的默认值
 
，initComponent：function（）{
 this.callParent（arguments）; 
 this.down（'treepanel'）。setWidth（this.tabBarWidth）; 
} 
}）; 
  

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

Any Idea please?

解决方案

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

这篇关于如何覆盖extjs中的GroupTabPanel宽度4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！