3

有史以来第一个问题在这里！由于某种原因，我无法在 Sencha Touch 中使用 badgeCls 选项。我正在尝试更改徽章的颜色，但我通过的课程在渲染时并未显示在实际徽章上。

我在这里做了一个简单的例子：http: //jsfiddle.net/goatkarma/vv66Z/11/

并将标签项的标记类设置为“绿色”（在 CSS 中定义）。

badgeCls: 'green'

呈现应用程序时，该类中缺少“green”类：

<span style="" class="x-badge" id="ext-element-20">!!</span>

在检查器中的类中添加“绿色”确实会改变颜色，所以看起来我使用了“badgeCls”不正确，或者它只是坏了！有任何想法吗？

4

2 回答 2

2

我为Ext.tab.Panel. 我希望这可以帮助你。

更新

  • 现在像预期的那样工作:)
  • badgeCls 不能将数组作为参数（如果您想要此功能，请告诉我；））

覆盖：

Ext.define('My.tab.Panel', {
    override: 'Ext.tab.Panel',

    onItemAdd: function(card) {
        var me = this;
        if (!card.isInnerItem()) {
            return me.callParent(arguments);
        }
        var tabBar = me.getTabBar(),
            initialConfig = card.getInitialConfig(),
            tabConfig = initialConfig.tab || {},
            tabTitle = (card.getTitle) ? card.getTitle() : initialConfig.title,
            tabIconCls = (card.getIconCls) ? card.getIconCls() : initialConfig.iconCls,
            tabHidden = (card.getHidden) ? card.getHidden() : initialConfig.hidden,
            tabDisabled = (card.getDisabled) ? card.getDisabled() : initialConfig.disabled,
            tabBadgeText = (card.getBadgeText) ? card.getBadgeText() : initialConfig.badgeText,
            tabBadgeCls = (card.getBadgeCls) ? card.getBadgeCls() : initialConfig.badgeCls,
            innerItems = me.getInnerItems(),
            index = innerItems.indexOf(card),
            tabs = tabBar.getItems(),
            activeTab = tabBar.getActiveTab(),
            currentTabInstance = (tabs.length >= innerItems.length) && tabs.getAt(index),
            tabInstance;
        if (tabTitle && !tabConfig.title) {
            tabConfig.title = tabTitle;
        }
        if (tabIconCls && !tabConfig.iconCls) {
            tabConfig.iconCls = tabIconCls;
        }
        if (tabHidden && !tabConfig.hidden) {
            tabConfig.hidden = tabHidden;
        }
        if (tabDisabled && !tabConfig.disabled) {
            tabConfig.disabled = tabDisabled;
        }
        if (tabBadgeText && !tabConfig.badgeText) {
            tabConfig.badgeText = tabBadgeText;
        }
        if (tabBadgeCls && !tabConfig.badgeCls) {
            tabConfig.badgeCls = Ext.baseCSSPrefix + 'badge ' + tabBadgeCls;
        }
        //<debug warn>
        if (!currentTabInstance && !tabConfig.title && !tabConfig.iconCls) {
            if (!tabConfig.title && !tabConfig.iconCls) {
                Ext.Logger.error('Adding a card to a tab container without specifying any tab configuration');
            }
        }
        //</debug>
        tabInstance = Ext.factory(tabConfig, Ext.tab.Tab, currentTabInstance);
        if (!currentTabInstance) {
            tabBar.insert(index, tabInstance);
        }
        card.tab = tabInstance;
        me.callParent(arguments);
        if (!activeTab && activeTab !== 0) {
            tabBar.setActiveTab(tabBar.getActiveItem());
        }
    }
});
于 2013-03-21T15:36:08.963 回答
0

我认为这是一个在 ExtJS 6.2.x 中仍然存在的疏忽，但似乎有一种更简单的方法，而不是猴子修补和/或覆盖类的默认行为（升级到未来版本时往往会中断）。

线索在这里：

tabConfig = initialConfig.tab || {},
...
tabInstance = Ext.factory(tabConfig, Ext.tab.Tab, currentTabInstance);

tab如果您使用要添加到选项卡面板的任何组件指定配置对象，它会从该配置对象开始实例化，Ext.tab.Tab而不是默认为空 dict 并将其从其他选项拼凑在一起。

tab: {
  badgeText: 'My text',
  badgeCls: 'x-badge green'
}

请注意，如果要保留默认样式，您仍然必须指定“x-badge”类。

于 2017-02-22T23:25:11.673 回答