Results 1 to 4 of 4

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Default [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
     * [email protected]
     * 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 Images
    Attached Files 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 User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    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 Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250

    Default

    A fix has been added to SVN.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  4. #4
    Sencha Premium Member
    Join Date
    Oct 2013
    Location
    Slovakia
    Posts
    80

    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');
            }
        }
    });

Posting Permissions

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