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

[tobiu]

hi team,

somehow strange, that nobody posted this one before.

imagine a tabbed form with combos or other triggerFields.
the tabPanel has the config

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:

        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.

[Jamie Avins]

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

[tobiu]

hi jamie,

i took the time to build a testcase for you.
i hope 40 lines of code is ok *g*

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

[tobiu]

hi team,

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

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