[DEFER] Wrong ComboBox width after ComboBox.setReadOnly()

[dherbolt]

Ext version tested:

Ext 3.2.1


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE 7
FF 3.5.11
Safari 4


Operating System:

Win Vista


Description:

Ext.form.TriggerField.setReadOnly destroies width of hidden ComboBox if its width is not defined and should be calculated by layout, e.g. AnchorLayout


Test Case:



/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
// simple array store
var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state', 'nick'],
data : Ext.exampledata.states // from states.js
});

var combo = new Ext.form.ComboBox({
store: store,
displayField:'state',
triggerAction: 'all',
mode: 'local',
anchor: '0',
fieldLabel: 'Combo',
hidden: false,
readOnly: false,
editable: false
});

new Ext.form.FormPanel({
height: 100,
bodyStyle: 'padding: 10px;',
title: 'ComboBox Width',
hideCollapseTool: true,
renderTo: Ext.getBody(),
items: combo,
fbar: new Ext.Toolbar({
items: [{
text: 'Show/Hide ComboBox',
handler: function () {
this.setVisible(this.hidden);
},
scope: combo
}, {
text: 'Set/Unset ComboBox read-only',
handler: function () {
this.setReadOnly(!this.readOnly);
},
scope: combo
}]
})
});
});



Steps to reproduce the problem:

Click on 'Show/Hide ComboBox' button -> combo is now hidden
Click on 'Set/Unset Combobox read-only' button
Click on 'Show/Hide ComboBox' button -> combo is now visible


The result that was expected:

Width of ComboBox is same as before hide because it is calculated by layout


The result that occurs instead:

Width of ComboBox is about 20px even width of panel is bigger.


Debugging already done:

Ext.form.TriggerField.onResize is called with wrong width from Ext.form.TriggerField.updateEditState because width of elements with style 'display: none' is 0


Possible fix:

not provided

[Condor]

Workaround: Set the combobox to hideMode:'offsets'.

[SilentBob]

This issue still can be reproduced in IE7,8,9.
Calling setReadOnly twice with false and true arguments causes trigger field size to be corrupted. Any possible solutions?

[dherbolt]

This issue still can be reproduced in IE7,8,9.
Calling setReadOnly twice with false and true arguments causes trigger field size to be corrupted. Any possible solutions?

Which version of ExtJS are you using?

[SilentBob]

Which version of ExtJS are you using?

Hello. Thank for your reply.
I'm using ExtJs v. 3.4.0.

I'm investigating this issue in my application now and I noticed that issue is reproduced when components are added into collapsible Panel, which is collapsed by default. When Panel is not initially collapsed then everything works fine.

[dherbolt]

I'm not sure if it fix your problem, but in my case I found this solution:



Ext.form.TriggerField.prototype.initTrigger = Ext.form.TriggerField.prototype.initTrigger.createSequence(function () {
if (!this.hideTrigger) {
this.trigger.getWidth = Ext.Element.prototype.getComputedWidth;
}

if (!Ext.isIE) { //Safari, Firefox
this.el.getWidth = Ext.Element.prototype.getComputedWidth;
}
});

[ranking]

Workaround: Set the combobox to hideMode:'offsets'.

Hi Condor, when I set the combobox to hideMode:'offsets', there are still have this problem.

[ranking]

I'm not sure if it fix your problem, but in my case I found this solution:



Ext.form.TriggerField.prototype.initTrigger = Ext.form.TriggerField.prototype.initTrigger.createSequence(function () {
if (!this.hideTrigger) {
this.trigger.getWidth = Ext.Element.prototype.getComputedWidth;
}

if (!Ext.isIE) { //Safari, Firefox
this.el.getWidth = Ext.Element.prototype.getComputedWidth;
}
});


Hi Dherbolt, I have the the same problem, I try your solution, but there are still have problem. when set the comobox to readonly, the comobox's width reduce 17px.