PDA

View Full Version : [4.0.x] Disabled FieldContainer does not disable button



drogers
9 Jun 2011, 5:45 AM
Bug
A disabled Ext.form.FieldContainer does not disable a contained Ext.button.Button.

Environment
OS: Windows XP
ExtJS: 4.0.1, 4.0.2 RC
Browsers:


Firefox 3.6
Chrome 12.0
Internet Explorer 8

Steps to Reproduce


Go to http://www.xdiv.com/dev/ButtonDisableTest.html or use the code below.
The "Press Me" button can be pressed even when the FieldContainer is disabled.



Ext.onReady(function() {

var button = Ext.create('Ext.button.Button', {
text: 'Press Me',
handler: function() {
Ext.Msg.alert('Pressed', 'You Pressed Me!');
}
});

var container = Ext.create('Ext.form.FieldContainer', {
layout: 'hbox',
disabled: true,
items: [
{ xtype: 'textfield', fieldLabel: 'A text field' },
button
]
});

var cbox = Ext.create('Ext.form.field.Checkbox', {
boxLabel: 'FieldContainer Enabled',
listeners: {
change: function(fld, newVal) {
container.setDisabled(!newVal);
}
}
});

Ext.create('Ext.container.Viewport', {
layout: 'anchor',
renderTo: Ext.getBody(),
items: [ cbox, container ]
});

});


Workarounds


Explicitly disable/enable the button as well as the FieldContainer or:
Use a different container other than FieldContainer.

natedsaint
22 Aug 2012, 5:16 AM
We are seeing this bug in production on our server as well, but in a slightly different form. Here is the behavior:

1) We have three fieldcontainers which contain components of xtype "field", "checkbox" and "label."
2) We are programmatically disabling two out of three of them, depending on the choice made in a radio button by using the .setDisabled(true/false) method of the container.
3) This adds the class of "disabled" to the form container and the children, as well as actually disabling the elements appropriately. The bug occurs:
4) When we re-enable those elements, the class of "disabled" remains on the form container, making all of the children appear as though they are disabled. They do not have an attribute of "disabled", however, so they are still editable.

The workaround for now is to find all the appropriate children of the container and enable/disable them, like so:



container.query('.field,.checkbox,.label').forEach(function(item) {
item.setDisabled(boolean);
});


I suppose this also begs the question of what the best practice is: should you use the form container to query the children and manipulate them, or should the form container be directly actionable as though it were a form component itself? If the latter is true, setDisabled() is a bit confusing to be available here.

bobringer
14 Jan 2014, 9:58 AM
FWIW...

Still seeing this in 4.2.2