PDA

View Full Version : [FIXED][3.0.0] TwinTrigger doesn't render properly without hideMode: offsets



canxss
17 Jul 2009, 12:49 PM
Ext version tested:

Ext 3.0 rev 4860 Adapter used:
extcss used:
only default ext-all.cssBrowser versions tested against:

FF 3.0.11 (firebug 1.4.0 installed)
IE 8.0.6Description

When using TwinTrigger, TwinCombo (Saki's) or I think anything descending from Trigger field that is acting like twin field (with two functions) on a tab that is not initially active, without hideMode: 'offsets' these fields don't render properly.

Test Case:



var win = new Ext.Window({
width: 750,
height: 350,
border: false,
defaults: {
border: false,
bodyStyle:'padding:5px 5px 0'
},
items: [{
xtype: 'tabpanel',
deferredRender: false,
layoutOnTabChange: true,
activeTab: 0,
items: [{
title: 'Tab1',
layout: 'form',
border: false,
labelWidth: 120,
items: [{
xtype: 'combo',
fieldLabel: 'Ext.form.ComboBox',
store: [],
width: 200
}, {
xtype: 'twincombo',
fieldLabel: 'TwinCombo',
width: 200
}, new Ext.form.TwinTriggerField({
fieldLabel: 'TwinTrigger',
width: 200
})]
}, {
title: 'Tab2',
layout: 'form',
border: false,
labelWidth: 120,
//hideMode: 'offsets',
items: [{
xtype: 'combo',
fieldLabel: 'Ext.form.ComboBox',
store: [],
width: 200
}, {
xtype: 'twincombo',
fieldLabel: 'TwinCombo',
width: 200
}, new Ext.form.TwinTriggerField({
fieldLabel: 'TwinTrigger',
width: 200
})]
}]
}]
});
win.show();


Possible fix:
It Can be said that the fix is to use hideMode: 'offsets' but I think that is true if and only is there isn't any other way. Because while we were migrating to ext 3.0 we had to remove hideMode: 'offsets' from some of the tabs since the extensions that we've used from miscellaneous sources weren't upgraded to ext 3.0 yet and they were giving errors. We don't have that much of deep knowledge about Ext JS to understand the problem in extensions (may be they will even stay that way after upgrade) and we have been seeing this problem with twin fields since 2.0 therefore thought this must have worked without hideMode: 'offsets'.
And mjlecomte also pointed out in his Ext 3.0 upgrade guide that hideMode: 'offsets' won't be needed anymore or may even require to be removed therefore we think that this might be a bug.
Thanks in advance

Animal
18 Jul 2009, 3:11 AM
You can use this fix:



// Temporarily ensure that the passed element (and all ancestors)
// is display:block for the calling of the specified function
function ensureLayout(elm, func, scope) {
var r,
e = Ext.get(elm),
elmStyle = elm.style,
oldDisp = elmStyle.display,
wasXHidden = e.hasClass('x-hide-display');

if (wasXHidden) {
e.removeClass('x-hide-display');
}
elmStyle.display = "block";
if (!elm.offsetWidth) {
r = ensureLayout(elm.parentNode, func, scope);
} else {
r = func.call(scope || window);
}
elmStyle.display = oldDisp;
if (wasXHidden) {
e.addClass('x-hide-display');
}
return r;
}

Ext.override(Ext.form.TriggerField, {
onResize : function(w, h){
ensureLayout(this.wrap.dom, function() {
Ext.form.TriggerField.superclass.onResize.call(this, w, h);
var tw = this.trigger.getWidth();
if(typeof w == 'number'){
this.el.setWidth(this.adjustWidth('input', w - tw));
}
this.wrap.setWidth(w);
}, this);
}
});

canxss
18 Jul 2009, 11:28 AM
Thanks, it worked! I hope this will soon be fixed also in ext source.

Animal
18 Jul 2009, 12:20 PM
It's not really a bug.

canxss
18 Jul 2009, 2:12 PM
Really? Not knowing much about the intricacies of Ext JS hinders us from differentiating a bug. If it is not so complicated can you tell why this isn't a bug?

Thanks

Animal
18 Jul 2009, 9:52 PM
Because you can use hideMode: 'offsets' whch is preferrable over the default hideMode: 'display.

This is because style display: 'none' causes elements to have no layout (no dimensions).

evant
30 Jul 2009, 11:09 PM
A fix for this has been added to SVN.

durlabh
4 Nov 2009, 12:17 PM
This seems to affect Ext 2.x also and as far as I checked, it is not in 2.x branch. Animal's fix worked in Ext 2.x too.

MacSimon
23 Feb 2010, 5:41 AM
Hi everyone,

This method: this.adjustWidth('input', w - tw));
does not seem to be working in Ext 3.1.1

Anyone has an idea on how to work around this?

Thanks

Jamie Avins
23 Feb 2010, 8:47 AM
@MacSimon, you should start a new thread will a complete test case if you have a specific issue. This particular issues is already flagged as fixed.