PDA

View Full Version : [DEFER] Wrong ComboBox width after ComboBox.setReadOnly()



dherbolt
20 Jul 2010, 11:45 PM
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
21 Jul 2010, 12:23 AM
Workaround: Set the combobox to hideMode:'offsets'.

SilentBob
25 Oct 2011, 5:06 AM
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
25 Oct 2011, 5:12 AM
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
25 Oct 2011, 5:44 AM
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
25 Oct 2011, 6:22 AM
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
15 Nov 2011, 10:11 PM
Workaround: Set the combobox to hideMode:'offsets'.

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

ranking
15 Nov 2011, 10:17 PM
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.

soulshocker
11 Oct 2014, 6:59 AM
Ext.override(Ext.form.TriggerField, {
updateEditState: function(){
if(this.rendered){
if (this.readOnly) {
this.el.dom.readOnly = true;
this.el.addClass('x-trigger-noedit');
this.mun(this.el, 'click', this.onTriggerClick, this);
this.trigger.setDisplayed(false);
} else {
if (!this.editable) {
this.el.dom.readOnly = true;
this.el.addClass('x-trigger-noedit');
this.mon(this.el, 'click', this.onTriggerClick, this);
} else {
this.el.dom.readOnly = false;
this.el.removeClass('x-trigger-noedit');
this.mun(this.el, 'click', this.onTriggerClick, this);
}
this.trigger.setDisplayed(!this.hideTrigger);
}
//call this.onResize in case of width is greater then 0
if (this.width || this.wrap.getWidth())
this.onResize(this.width || this.wrap.getWidth());
}
}
});