Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    253
    Vote Rating
    26
    themightychris will become famous soon enough themightychris will become famous soon enough

      1  

    Default [ST 2.2.1] icon element hidden when iconCls set from button subclass

    [ST 2.2.1] icon element hidden when iconCls set from button subclass


    Originally reported in the Q&A forum: http://www.sencha.com/forum/showthread.php?267966

    When a subclass of Ext.Button is defined and value for iconCls configured, the icon element gets hidden as if neither iconCls or icon were set:
    Code:
    Ext.define('MyApp.ux.button.MenuButton', {
        extend: 'Ext.Button',
        xtype: 'menubutton',
        config: {
            itemId : 'menuButton',
            iconCls: 'more',
            iconAlign: 'left',
            align: 'left',
            action: 'toggle-menu',
            ui: 'action'
        }
    });
    The problem is caused by updateIcon() and updateIconCls() both calling hideElementIcon() when they are called with an undefined value, regardless of the other config's value:
    Code:
        /**
         * @private
         */
        updateIcon: function(icon) {
            var me = this,
                element = me.iconElement;
    
            if (icon) {
                me.showIconElement();
                element.setStyle('background-image', 'url(' + icon + ')');
                me.refreshIconAlign();
            } else {
            	element.setStyle('background-image', '');
                me.hideIconElement();
            }
        },
    
        /**
         * @private
         */
        updateIconCls: function(iconCls, oldIconCls) {
            var me = this,
                element = me.iconElement;
    
            if (iconCls) {
                me.showIconElement();
                element.replaceCls(oldIconCls, iconCls);
                me.refreshIconAlign();
            } else {
    			element.removeCls(oldIconCls);
                me.hideIconElement();
            }
        },
    (and look, tabs!)

    So, even though iconCls and icon are alternative configs to eachother, the updater for each ignores whether the other is set before calling hideIconElement. For some reason I don't understand which I assume is related to iconCls being defined in Ext.Button's cachedConfig instead of config, this problem only plays out when you extend Ext.Button and set iconCls from the subclasses config. updateIcon runs and hides the icon even though iconCls is set.

    A workaround that seems to prevent updateIcon from being called is explicitely setting icon: null in the subclasses config:
    Code:
    Ext.define('MyApp.ux.button.MenuButton', {
        extend: 'Ext.Button',
        xtype: 'menubutton',
        config: {
            itemId : 'menuButton',
            icon: null,
            iconCls: 'more',
            iconAlign: 'left',
            align: 'left',
            action: 'toggle-menu',
            ui: 'action'
        }
    });
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    86
    Vote Rating
    4
    karazy is on a distinguished road

      0  

    Default


    Thanks for your solution.

    As you said we face the same issue.

    http://www.sencha.com/forum/showthre...esnt-show-icon

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2008
    Posts
    253
    Vote Rating
    26
    themightychris will become famous soon enough themightychris will become famous soon enough

      1  

    Default


    *bump*

    I posted this during SenchaCon and it seems to have gotten flushed to the second page without an official response, a bump seems appropriate
    Chief Architect @ Jarv.us Innovations
    Co-captain @ Code for Philly
    Co-founder @ Devnuts - Philadelphia Hackerspace

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    Marco Piccolino is on a distinguished road

      0  

    Default


    Seconding the bump. It's not a blocker, but it is very very confusing to users, and a very common use scenario.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    Marco Piccolino is on a distinguished road

      0  

    Default


    Also, in Architect using icon:null is not an option.


    The only workaround is to use whatever string. This generates a background:url() style on .x-button-icon. I suggest using '/' which at least keeps the useless generated url path short.

  6. #6
    Sencha Premium Member
    Join Date
    Feb 2012
    Location
    Berne, Switzerland
    Posts
    714
    Vote Rating
    42
    ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about ingo.hefti has a spectacular aura about

      0  

    Default


    bump! Just ran into this with ST2.3.1...