我想覆盖extjs 4中的Ext.ux.GroupTabPanel宽度。
有什么想法吗?
答案 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);
}
});