Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,681
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default [OPEN-1110] Ext.form.TriggerField -> rendering hidden and IE8

    [OPEN-1110] Ext.form.TriggerField -> rendering hidden and IE8


    hi team,

    somehow strange, that nobody posted this one before.

    imagine a tabbed form with combos or other triggerFields.
    the tabPanel has the config
    Code:
    deferredRender : false
    in firefox or chrome this is no problem.
    in ie8 this is a problem, only the active tab renders correctly.

    to be more precise, inside the triggerField onRender method is the part:
    Code:
            if(!this.width){
                this.wrap.setWidth(this.el.getWidth()+this.trigger.getWidth());
            }
    although i have set a width-config for the combo, this.width seems to be null when rendering hidden.
    this is the part i do not understand yet

    it might come from the rendering of Ext.BoxComponent, but i am not sure.

    the rest is quite clear: since this.el.getWidth() will return 0 when rendering hidden, the wrap will get the same width as the trigger. the whole element itself has the right width, leading to my funny screenshot.

    in my usecase, the combo is disabled. when enabling it, the width of the wrap is correct again. on the next disabling it is wrong again.


    kind regards,
    tobiu

    p.s.: could not post the whole ie-console, since only images below 620px width are allowed in this vBulletin.
    Attached Images
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  2. #2
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Please provide a test case, also are you doing layoutOnTabChange: true since you are doing deferredRender: false?

  3. #3
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,681
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi jamie,

    i took the time to build a testcase for you.
    i hope 40 lines of code is ok *g*
    Code:
    Ext.onReady(function(){
    	new Ext.form.FormPanel({
    		renderTo: document.body,
    		width:600,
    		height:250,
    		layout:'fit',
    		border:false,					
    		labelWidth : 100,
    		items : [{
    			xtype: 'tabpanel',
    			activeTab: 0,
    			deferredRender: false,
    			layoutOnTabChange: true, // or false, makes no difference
    			plain:true,
    			defaults:{autoScroll: true},
    			items:[{
    					title: 'Tab 1',
    					html: "My content was added during construction."
    				},{
    					title: 'Tab 2',
    					layout: 'form',
    					items: [{
    						store: new Ext.data.ArrayStore({
    							fields: ['abbr', 'state'],
    							data : [['AL', 'Alabama'],['AK', 'Alaska']]
    						}),
    						displayField:'state',
    						typeAhead: true,
    						mode: 'local',
    						triggerAction: 'all',
    						selectOnFocus:true,
    						fieldLabel: 'ComboBox',
    						xtype: 'combo',
    						width: 200,
    						disabled:true //important, enabled renders fine
    					}]
    				}
    			]
    		}]
    	});
    });
    as mentioned above, this is an IE8-only-bug.
    please let me know what you find out



    kind regards,
    tobiu
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  4. #4
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,681
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi team,

    my ext.element.getWidth - fix also fixes this issue:

    Code:
    Ext.onReady(function(){
    
    	Ext.override(Ext.Element, {
    		getWidth : function(contentWidth){
    			var me = this,
    			dom = me.dom,
    			hidden = Ext.isIE && me.isStyle('display', 'none'),
    			w = Math.max(dom.offsetWidth || parseInt(dom.style.width, 10), hidden ? 0 : dom.clientWidth) || 0;
    					
    			w = !contentWidth ? w : w - me.getBorderWidth("lr") - me.getPadding("lr");
    			return w < 0 ? 0 : w;
    		}
    	});
    
    	new Ext.form.FormPanel({
    		renderTo: document.body,
    		width:600,
    		height:250,
    		layout:'fit',
    		border:false,					
    		labelWidth : 100,
    		items : [{
    			xtype: 'tabpanel',
    			activeTab: 0,
    			deferredRender: false,
    			layoutOnTabChange: true, // or false, makes no difference
    			plain:true,
    			defaults:{autoScroll: true},
    			items:[{
    					title: 'Tab 1',
    					html: "My content was added during construction."
    				},{
    					title: 'Tab 2',
    					layout: 'form',
    					items: [{
    						store: new Ext.data.ArrayStore({
    							fields: ['abbr', 'state'],
    							data : [['AL', 'Alabama'],['AK', 'Alaska']]
    						}),
    						displayField:'state',
    						typeAhead: true,
    						mode: 'local',
    						triggerAction: 'all',
    						selectOnFocus:true,
    						fieldLabel: 'ComboBox',
    						xtype: 'combo',
    						width: 200,
    						disabled:true //important, enabled renders fine
    					}]
    				}
    			]
    		}]
    	});
    });
    kind regards,
    tobiu
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

Similar Threads

  1. Replies: 1
    Last Post: 29 Jun 2010, 5:26 AM
  2. Replies: 0
    Last Post: 8 Jun 2010, 1:43 AM
  3. Replies: 2
    Last Post: 16 Apr 2010, 1:37 PM
  4. Replies: 3
    Last Post: 9 Jan 2010, 7:33 AM
  5. [FIXED?] [3.0] TriggerField / r2213 and IE8
    By stever in forum Ext 2.x: Bugs
    Replies: 3
    Last Post: 14 Apr 2009, 8:30 PM

Thread Participants: 1