extjs - Sencha Touch 选项卡面板上的 BadgeCls

Question

第一次在这里提问!出于某种原因，我无法在 Sencha Touch 中使用 badgeCls 选项。我正在尝试更改徽章的颜色，但我传递的类在呈现时并未显示在实际徽章上。

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

并将标签项的徽章类设置为“绿色”(在 CSS 中定义)。

badgeCls: 'green'

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

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

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

Answer 1

我为 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());
        }
    }
});