Splitbutton badgetext not working

[MonkeySleeve]

See fiddle:


If you uncomment the badgetext part, it will result in an error: 'Cannot read property 'setText' of undefined' where undefined is badgeElement = me.badgeElement, in the updateBadgeText function.

[mitchellsimoens]

Yep, looks like SplitButton overrides Button's getTemplate method and doesn't include the badgeElement object. There would need to be some styles to go with it but you can at least get the badgeText via this override:

Ext.define(null, {
    override: 'Ext.SplitButton',

    getTemplate: function () {
        return [{
            reference: 'innerElement',
            cls: Ext.baseCSSPrefix + 'splitBody-el',
            children: [{
                reference: 'splitInnerElement',
                cls: Ext.baseCSSPrefix + 'splitInner-el',
                children: [{
                        reference: 'bodyElement',
                        cls: Ext.baseCSSPrefix + 'body-el',
                        children: [{
                            cls: Ext.baseCSSPrefix + 'icon-el ' + Ext.baseCSSPrefix + 'font-icon',
                            reference: 'iconElement'
                        }, {
                            reference: 'textElement',
                            cls: Ext.baseCSSPrefix + 'text-el'
                        }]
                    },
                    this.getButtonTemplate()
                ]
            }, {
                reference: 'arrowElement',
                cls: Ext.baseCSSPrefix + 'splitArrow-el',
                children: [{
                        reference: 'splitArrowElement',
                        cls: Ext.baseCSSPrefix + 'arrow-el ' + Ext.baseCSSPrefix + 'font-icon'
                    },
                    this.getArrowButtonTemplate()
                ]
            }, {
                reference: 'badgeElement',
                cls: Ext.baseCSSPrefix + 'badge-el'
            }]
        }];
    }
});

[MonkeySleeve]

Thanks, added an override for the splitbutton and now it's working. Made some changes where i compared the Button getTemplate with this override:

getTemplate:function () {        return [{
            reference: 'innerElement',
            cls: Ext.baseCSSPrefix + 'splitBody-el',
            children: [{
                reference: 'splitInnerElement',
                cls: Ext.baseCSSPrefix + 'splitInner-el',
                children: [{
                        reference: 'bodyElement',
                        cls: Ext.baseCSSPrefix + 'body-el',
                        children: [{
                            cls: Ext.baseCSSPrefix + 'icon-el ' + Ext.baseCSSPrefix + 'font-icon',
                            reference: 'iconElement'
                        }, {
                            reference: 'textElement',
                            cls: Ext.baseCSSPrefix + 'text-el'
                        }]
                    },
                    this.getButtonTemplate()
                ]
            }, {
                reference: 'arrowElement',
                cls: Ext.baseCSSPrefix + 'splitArrow-el',
                children: [{
                        reference: 'splitArrowElement',
                        cls: Ext.baseCSSPrefix + 'arrow-el ' + Ext.baseCSSPrefix + 'font-icon'
                    }
                ]
            }
        ]
        }, {
            reference: 'badgeElement',
            cls: Ext.baseCSSPrefix + 'badge-el'
        }, this.getArrowButtonTemplate()
        ];
    }

I have added some styling that was also applied to the badge element of a Button, but for some reason it displays it kinda weird:
ghkb1aO.png

And this is the CSS I managed to find for the badge element of a Button:

.x-big.x-splitButton.x-badge-el {    font-size: 13px;
    line-height: 16px;
}
.x-splitButton.x-has-badge .x-badge-el {
    display: block;
}
.x-splitButton .x-badge-el {
    color: #222;
    color: var(--accent-foreground-color);
    border-color: transparent;
    border-radius: 32px;
    min-width: 24px;
    top: -10px;
    right: -10px;
    padding: 4px;
    max-width: 55%;
    font-size: 12px;
    line-height: 16px;
    font-family: Roboto, sans-serif;
    background-color: #ff9800;
    background-color: var(--accent-color);
    background-image: none;
}

Edit: Figured it out, turns out the .x-button .x-badge-el didn't apply to the SplitButton where position: absolute was set. So the working version now:

.x-big.x-splitButton.x-badge-el {    font-size: 13px;
    line-height: 16px;
}
.x-splitButton.x-has-badge .x-badge-el {
    display: block;
}
.x-splitButton .x-badge-el {
    color: #222;
    color: var(--accent-foreground-color);
    border-color: transparent;
    border-radius: 32px;
    min-width: 24px;
    top: -10px;
    right: -10px;
    padding: 4px;
    max-width: 55%;
    font-size: 12px;
    line-height: 16px;
    font-family: Roboto, sans-serif;
    background-color: #ff9800;
    background-color: var(--accent-color);
    background-image: none;
    position: absolute;
}

.x-big .x-splitButton.x-arrow-align-right .x-splitInner-el {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    width: 90%;
}

[mitchellsimoens]

Leaving this here for any tracking/historic reasons that they opened EXTJS-28669 for this.