Extjs Sencha Touch标签面板上的徽章

这里有史以来第一个问题！ 由于某些原因，我无法让badgeCls选项在Sencha Touch中工作。我正试图改变徽章的颜色，但当它呈现时，我通过的课程没有显示在实际徽章上

我在这里做了一个简单的例子：

并将选项卡项（在CSS中定义）的badge类设置为“绿色”

呈现应用程序时，类中缺少类“绿色”：

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

！！

---

在inspector中向类中添加“绿色”确实会改变颜色，因此似乎我使用的“badgeCls”不正确，或者只是坏了！有什么想法吗

我为

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

Ext.define（'My.tab.Panel'{
覆盖：“Ext.tab.Panel”，
未指定：功能（卡）{
var me=这个；
如果（！card.isInnerItem（））{
return me.callParent（参数）；
}
var tabBar=me.gettabar（），
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（），
索引=innerItems.indexOf（卡片），
tabs=tabBar.getItems（），
activeTab=tabBar.getActiveTab（），
currentTabInstance=（tabs.length>=innerItems.length）和&tabs.getAt（index），
例如：；
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；
}
//
如果（！currentTabInstance&&！tabConfig.title&&！tabConfig.iconCls）{
如果（！tabConfig.title&&！tabConfig.iconCls）{
Ext.Logger.error（'在未指定任何选项卡配置的情况下将卡添加到选项卡容器'）；
}
}
//
tabInstance=Ext.factory（tabConfig，Ext.tab.tab，currentTabInstance）；
如果（！currentTabInstance）{
tabBar.insert（索引，tabInstance）；
}
card.tab=tabInstance；
me.callParent（参数）；
如果（！activeTab&&activeTab！==0）{
tabBar.setActiveTab（tabBar.getActiveItem（））；
}
}
});

我认为这是一个仍然存在于ExtJS 6.2.x中的疏忽，但似乎有一种更简单的方法代替了monkey补丁和/或重写类的默认行为（在升级到将来的版本时，默认行为往往会中断）

线索如下：

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

如果使用要添加到选项卡面板的任何组件指定一个

选项卡

配置对象，它将从该配置对象开始实例化

Ext.tab.tab

，而不是默认为空dict并从其他选项将其拼合在一起

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

---

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

据我在源代码中所见，badgeCls从未在

Ext.tab.Panel上设置过。

。此配置仅适用于按钮，但我知道您希望它也适用于选项卡面板！谢谢我想它差不多就在那里了，它只给了badgeCls中指定的类，但是除了badgeCls类之外，它还需要作为“x-badge”的类。虽然我想我可以以“x-badge green”的成绩通过这门课！更新后的帖子。有一个缺点是它不接受数组作为参数。是的，这在我的实际代码中就做到了！也不需要重写这个类，所以只需在tabpanel中添加onimadded函数，它似乎工作得很好：很好，更新的代码工作得很好！非常感谢，我不认为我需要传递一个数组，所以应该像那样很棒。非常感谢，我已经看了几个小时了，挠头想知道为什么它不起作用！！已标记为最佳答案，并将在获得更多代表后进行投票！

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