Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    74
    Vote Rating
    0
    piyushjain7 is on a distinguished road

      0  

    Default [FIXED-175][3.0.0] setIconClass not rendering icon properly

    [FIXED-175][3.0.0] setIconClass not rendering icon properly


    Ext version tested:
    • Ext 3.0.0

    Adapter used:
    • ext

    css used:
    • only default ext-all.css



    Browser versions tested against:
    • ____
    • FF3 (firebug 1.3.0.10 installed)

    Operating System:
    • ________
    • WinXP Pro

    Description:
    • Tabs that have no initial iconClass set, and after render if setIconClass is used to add an icon to the tab, icon is not rendered properly. This error can be easily achieved by replacing the tabs-adv.js file in the examples with the one provided in the attachment. Click on the "Add Icon" button.

    Test Case:

    Code:
        /*!
     * Ext JS Library 3.0.0
     * Copyright(c) 2006-2009 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
    
        var tabs = new Ext.TabPanel({
            renderTo:'tabs',
            resizeTabs:true, // turn on tab resizing
            minTabWidth: 115,
            tabWidth:135,
            enableTabScroll:true,
            width:600,
            height:250,
            defaults: {autoScroll:true},
            plugins: new Ext.ux.TabCloseMenu()
        });
    
        // tab generation code
        var index = 0;
        while(index < 7){
            addTab();
        }
        function addTab(){
            tabs.add({
                title: 'New Tab ' + (++index),
                //iconCls: 'tabs',
                /*html: 'Tab Body ' + (index) + '<br/><br/>'
                        + Ext.example.bogusMarkup,*/
    			items:[{
    				xtype: "button",
    				text: "Add Icon",
    				handler: function(btn){
    					if(btn.getText() === "Remove Icon"){
    					   btn.ownerCt.setIconClass("");
    					   btn.setText("Add Icon");	
    					}else{
    					   btn.ownerCt.setIconClass("tabs");
    					   btn.setText("Remove Icon");	
    					}
    				}
    			}],		
                closable:true
            }).show();
        }
    
        new Ext.Button({
            text: 'Add Tab',
            handler: addTab,
            iconCls:'new-tab'
        }).render(document.body, 'tabs');
    });
    Steps to reproduce the problem:
    • Replace the tabs-adv.js file in the tabs example with the one provided in the attachment.
    • Click on the "Add Icon" tab

    The result that was expected:
    • The icon should be rendered only on the left portion of the tab

    The result that occurs instead:
    • The icon is rendered all over the background of the tab and is repeated.

    Screenshot or Video:
    • attached

    Debugging already done:
    • none

    Possible fix:
    • not provided
    Attached Images
    Attached Files
    Last edited by piyushjain7; 24 Aug 2009 at 1:02 PM. Reason: Edited to follow the provided bug reporting template

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,549
    Vote Rating
    63
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    There's some CSS problem going on.

    Have you ensured that since upgrading to Ext 3, you have also updated your copy of ext-all.css?

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,396
    Vote Rating
    710
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    A fix has been added to SVN.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Oct 2013
    Posts
    22
    Vote Rating
    12
    m.dostal will become famous soon enough

      0  

    Default


    Code:
    Ext.override(Ext.TabPanel, {
        onItemIconChanged : function(item, iconCls, oldCls){
            var el = this.getTabEl(item);
            if(el){
                Ext.fly(el).child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
                Ext.fly(el)[iconCls?'addClass':'removeClass']('x-tab-with-icon');
            }
        }
    });

Thread Participants: 3