Results 1 to 4 of 4

Thread: Splitbutton badgetext not working

  1. #1

    Default Splitbutton badgetext not working

    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.

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    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:

    Code:
    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'
                }]
            }];
        }
    });
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3

    Default

    Thanks, added an override for the splitbutton and now it's working. Made some changes where i compared the Button getTemplate with this override:
    Code:
    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:
    Code:
    .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:
    Code:
    .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%;
    }


  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

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

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •