[2.x] TriggerField width problem in TabPanel with deferredRender: false

[durlabh]

Ext Version: 2.x [Latest SVN]

Possible bug as referred in: http://www.extjs.com/forum/showthread.php?t=74818

Some of our form panel's need tabs. In such cases, we must use deferredRender: false so that setValues for the form works correctly. However, in those cases, rendering of all the trigger fields is messed up.

        Ext.onReady(function() {
            var tp = new Ext.TabPanel({
                activeTab: 0,
                deferredRender: false,
                layoutOnTabChange: true,
                defaultType: 'panel',
                items: [
                    {
                        title: 'Tab1',
                        layout: 'form',
                        items: [new Ext.form.ComboBox({ xtype: 'combo', fieldLabel: 'Test 2', width: 200, store: [[1, 'Yes'], [2, 'No']] })]
                    },
                    {
                        title: 'Tab2',
                        layout: 'form',
                        items: [new Ext.form.ComboBox({ xtype: 'combo', fieldLabel: 'Test 2', width: 200, store: [[1, 'Yes'], [2, 'No']] })]
                    }
                ]
            });

            var win = new Ext.Window({
                resizable: false,
                layout: 'fit',
                width: 400,
                height: 200,
                items: [tp]
            });
            win.show();
        });

Combo width on both the tabs is same but they aren't rendered with same width. If deferredRender: false. hideMode: 'offsets' has no effect either.

[durlabh]

Following code ported back from 3.x branch helped me. Code in bold was further modified because it wasn't working correctly in some cases:

Ext.form.TriggerField.override({
	defaultTriggerWidth: 17,

	onResize: function(w, h) {
		Ext.form.TriggerField.superclass.onResize.call(this, w, h);
		var tw = this.getTriggerWidth();
		if (Ext.isNumber(w)) {
			this.el.setWidth(this.adjustWidth('input', w - tw));
		}
		var elWidth = this.el.getWidth();
		this.wrap.setWidth(elWidth ? (elWidth + tw) : w);
	},

	getTriggerWidth: function() {
		var tw = this.trigger.getWidth();
		if (!this.hideTrigger && tw === 0) {
			tw = this.defaultTriggerWidth;
		}
		return tw;
	}
});

Ext.form.TwinTriggerField.override({
	defaultTriggerWidth: 17,
	getTriggerWidth: function() {
		var tw = 0;
		Ext.each(this.triggers, function(t, index) {
			var triggerIndex = 'Trigger' + (index + 1),
                w = t.getWidth();
			if (w === 0 && !this['hidden' + triggerIndex]) {
				tw += this.defaultTriggerWidth;
			} else {
				tw += w;
			}
		}, this);
		return tw;
	}
});