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,450

    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
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

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

  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,450

    Default

    Leaving this here for any tracking/historic reasons that they opened EXTJS-28669 for this.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Fullstack Engineer
    ________________
    Modus Create is based on the model of an open source team. We’re a remote, global team of experts in our field. To find out more about the work we do, head over to our website.

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

Posting Permissions

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