Results 1 to 4 of 4

Thread: setUI function does not work properly for buttons

    You found a bug! We've classified it as EXTJS-15982 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    76

    Default setUI function does not work properly for buttons

    Ext version tested:
    • Ext 5.1.0.107
    Browser versions tested against:
    • All
    DOCTYPE tested against:
    • All
    Description:
    • When calling setUI(ui) on an Ext.button.Button, only the class of the top-level element is changed, so the theme of the button is not fully changed to the right UI.
    Steps to reproduce the problem:
    • Create a button
    • Change the UI using button.setUI('myui')
    The result that was expected:
    • The button should completely change UI, and all the classes on elements within the button should be changed accordingly
    Code:
    <a class="x-btn x-unselectable x-border-box x-btn-myui-small" hidefocus="on" unselectable="on" id="button-1009" tabindex="0" componentid="button-1009">
        <span id="button-1009-btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-btn-wrap x-btn-wrap-myui-small ">
            <span id="button-1009-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-myui-small x-btn-text    x-btn-button-center ">
                <span id="button-1009-btnIconEl" data-ref="btnIconEl" role="presentation" unselectable="on" class="x-btn-icon-el x-btn-icon-el-myui-small  " style=""></span>
                <span id="button-1009-btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-myui-small">Click me</span>
            </span>
        </span>
    </a>
    The result that occurs instead:
    • Only the top-level element has its class changed, so the UI theme is left in between the two UIs
    Code:
    <a class="x-btn x-unselectable x-border-box x-btn-myui-small" hidefocus="on" unselectable="on" id="button-1009" tabindex="0" componentid="button-1009">
        <span id="button-1009-btnWrap" data-ref="btnWrap" role="presentation" unselectable="on" style="" class="x-btn-wrap x-btn-wrap-default-small ">
            <span id="button-1009-btnEl" data-ref="btnEl" role="presentation" unselectable="on" style="" class="x-btn-button x-btn-button-default-small x-btn-text    x-btn-button-center ">
                <span id="button-1009-btnIconEl" data-ref="btnIconEl" role="presentation" unselectable="on" class="x-btn-icon-el x-btn-icon-el-default-small  " style=""></span>
                <span id="button-1009-btnInnerEl" data-ref="btnInnerEl" unselectable="on" class="x-btn-inner x-btn-inner-default-small">Click me</span>
            </span>
        </span>
    </a>
    Test Case:
    Create a button:

    Code:
    Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            alert('You clicked the button!');
        },
        listeners: {
            afterrender: function(btn) {
                btn.setUI('myui');
            }
        }
    });
    Then inspect the button using dev tools. Notice that only the class for the top level element has changed. See code examples above for expected vs. actual outcomes.


    Possible fix:
    This override should work until the fix is in place:
    Code:
      Ext.define('overrides.button.Button', {    
        override: 'Ext.button.Button',
     
        /**
         * Override that adds/removes the ui classes to the child elements
         */
        setUI: function (ui) {
            var me = this,
                activeUI = me.activeUI;
     
            if (me.scale && !ui.match(me.scale)) {
                ui = ui + '-' + me.scale;
            }
     
            if (ui === activeUI) {
                return;
            }
     
            if (activeUI) {
                if (me.btnWrap) {
                    me.btnWrap.removeCls(me._btnWrapCls + '-' + activeUI);
                    me.btnWrap.addCls(me._btnWrapCls + '-' + ui);
                }
                if (me.btnEl) {
                    me.btnEl.removeCls(me._btnCls + '-' + activeUI);
                    me.btnEl.addCls(me._btnCls + '-' + ui);
                }
                if (me.btnIconEl) {
                    me.btnIconEl.removeCls(me._baseIconCls + '-' + activeUI);
                    me.btnIconEl.addCls(me._baseIconCls + '-' + ui);
                }
                if (me.btnInnerEl) {
                    me.btnInnerEl.removeCls(me._innerCls + '-' + activeUI);
                    me.btnInnerEl.addCls(me._innerCls + '-' + ui);
                }
            }
     
            me.callParent([ui]);
        }
     
    });
    Last edited by kevhender; 27 May 2015 at 10:52 AM. Reason: Adding the override as a workaround

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    Thanks for the report. This is a known issue being tracked as EXTJS-15982. There is an override on the ticket for which Support subscribers can open a support ticket to gain access.

  3. #3

    Default

    This issue is not related to buttons only. I've tested Ext.Component#setUI on various components (in Ext JS 6.0.0-6.0.1), and pretty much every component was screwed after the call. I've written a small utility class (no overrides) that might help to fix this issue https://gist.github.com/reanimatter/...9066c89813d6db

  4. #4

    Default

    Code:
    Ext.define('Overrides.Component', {
        override: 'Ext.Component',
    
    
        setUi: function(newUi){
            var oldUi = this.ui,
                childNodes = Ext.DomQuery.select('[id^=' + this.getId() + '][class*=' + oldUi + ']', this.getEl().dom);
    
    
            this.ui = newUi;
    
            Ext.each(childNodes, function(node) {
                node = Ext.fly(node);
                var classList = Ext.String.splitWords(node.getAttribute('class'));
    
    
                Ext.each(classList, function(cls) {
                    if (cls.indexOf(oldUi) != -1) {
                        node.replaceCls(cls, cls.replace(oldUi, newUi));
                    }
                });
            });
        }
    });
    Thanks
    Albanir Neves

Similar Threads

  1. [CLOSED] Button: Cannot use setUi method more than once
    By Drmbolaget in forum Sencha Touch 2.x: Bugs
    Replies: 1
    Last Post: 27 Feb 2014, 5:47 AM
  2. [FIXED] UI name is not set properly for buttons (large, medium and small)
    By Stephan Mercier in forum Sencha Architect 3.x: Bugs
    Replies: 3
    Last Post: 8 Jan 2014, 1:46 PM
  3. Replies: 2
    Last Post: 23 May 2013, 7:00 AM
  4. [OPEN-1191] Panel setIconClass function does not work properly
    By YetAnotherFrank in forum Ext 3.x: Bugs
    Replies: 3
    Last Post: 10 Aug 2010, 8:06 AM
  5. Grid with search function - paging doesn't work properly....
    By wurstkuchen in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Apr 2010, 4:20 AM

Posting Permissions

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