PDA

View Full Version : FieldSet disabled not working?



ianaturner
15 Aug 2008, 3:02 AM
Hi

I have a strange problem - I have two fieldsets, each conceptually the child of a radio button, so that when the parent radio is unchecked, it's associated child controls will be disabled. A fairly common UI concept I think.

Unfortunately, although the fieldset is disabled, the display doesn't change to reflect that and the fields inside that fieldset are still active...

Does anyone have experience of this?

TIA
Ian

Here's the code:


/**********************************/
/*** tabsheet: complaint status ***/
/**********************************/
var formItemsArray = new Array();

// radio group for open/closed status
var fsStatus = new Ext.form.FieldSet(
{
id: 'fsComplaintStatus',
collapsible: false, collapsed: false, defaultType: 'textfield', layoutConfig: { labelSeparator: '' },
style: 'border:none; margin:0; padding:0;',
autoHeight:true
});

/*** status open ***/
var radOpen = new Ext.form.Radio(
{
id: 'radOpen',
name: 'radOpenClosed', // group name
inputValue: 'open',
boxLabel: 'Open',
checked: true,
fieldLabel: 'Complaint Status:'
});
radOpen.on('click', function() { AlignOpenClosedStatus(this, checked); });
radOpen.on('check', function(){
if (radOpen.checked)
{
// enable items in this section
alert('radOpen.oncheck: enable fsRadOpen');
var radOpenChildContainer = Ext.getCmp('fsRadOpen');
radOpenChildContainer.enable();
}
else
{
// disable items in the other section
alert('radOpen.oncheck: disable fsRadOpen');
var radOpenChildContainer = Ext.getCmp('fsRadOpen');
radOpenChildContainer.disable();
}
});
fsStatus.add(radOpen);

var fsRadOpen = new Ext.form.FieldSet(
{
id: 'fsRadOpen',
collapsible: false, collapsed: false, defaultType: 'textfield', layoutConfig: { labelSeparator: '' },
style: 'border:none; margin:0; padding:0;',
autoHeight:true,
disabled: false,
style: 'margin: 0px 0px 20px 0px; padding: 0px; border: none;'
});
fsStatus.add(fsRadOpen);
var cbReferToCMEC = new Ext.form.Checkbox(
{
id: 'cbReferToCMEC',
inputValue: 'refer',
boxLabel: 'Complaint Referred to CMEC',
checked: false
});
fsRadOpen.add(cbReferToCMEC);

/*** closed status ***/
var radClosed = new Ext.form.Radio(
{
id: 'radClosed',
name: 'radOpenClosed', // group name
inputValue: 'closed',
boxLabel: 'Closed',
checked: false
});
radClosed.on('click', function() { AlignOpenClosedStatus(this, checked); });
radClosed.on('check', function(){
if (radClosed.checked)
{
// enable items in this section
alert('radClosed.oncheck: enable fsRadClosed');
var radClosedChildContainer = Ext.getCmp('fsRadClosed');
radClosedChildContainer.enable();
}
else
{
// disable items in the other section
alert('radClosed.oncheck: disable fsRadClosed');
var radClosedChildContainer = Ext.getCmp('fsRadClosed');
radClosedChildContainer.disable();
}
});
fsStatus.add(radClosed);
var fsRadClosed = new Ext.form.FieldSet(
{
id: 'fsRadClosed',
collapsible: false, collapsed: false, defaultType: 'textfield', layoutConfig: { labelSeparator: '' },
style: 'border:none; margin:0; padding:0;',
autoHeight: true,
disabled: true
});
fsStatus.add(fsRadClosed);
var cbResolvedOnFirstCall = new Ext.form.Checkbox(
{
id: 'cbResolvedOnFirstCall',
inputValue: 'firstcall',
boxLabel: 'Complaint Resolved on First Call',
checked: false
});
fsRadClosed.add(cbResolvedOnFirstCall);

/*** complaint upheld/rejected ***/
var fsUpheldRejected = new Ext.form.FieldSet(
{
id: 'fsUpheldRejected',
collapsible: false, collapsed: false, defaultType: 'textfield', layoutConfig: { labelSeparator: '' },
style: 'border:none; margin:0; padding:0;',
autoHeight:true,
style: 'border:none; margin:10px 0px 10px -17px; padding:0;'
});
var radUpheld = new Ext.form.Radio(
{
id: 'radUpheld',
name: 'radUpheldRejected', // group name
inputValue: 'upheld',
boxLabel: 'Complaint Upheld',
checked: true
});
fsUpheldRejected.add(radUpheld);
var radRejected = new Ext.form.Radio(
{
id: 'radRejected',
name: 'radUpheldRejected', // group name
inputValue: 'rejected',
boxLabel: 'Complaint Rejected',
checked: false
});
fsUpheldRejected.add(radRejected);
fsRadClosed.add(fsUpheldRejected);

The oncheck events fire and the code to toggle the enabled/disabled property can be seen to work.

Firebug shows that the fieldset's disabled property does get set properly, as shown in the first attached image. The second image shows that I can change a child control value when its parent fieldset is disabled.

(My apologies - I can't attach complete, self-contained code, since this is a very small part of an application that makes many calls to data stores on the server.)

evant
15 Aug 2008, 3:04 AM
You could do something like:



fs.cascade(function(c)
{
if (c.isFormField)
c.disable();
}
);

ianaturner
15 Aug 2008, 3:46 AM
Many thanks - that works a treat (indeed it works as an Ext container component should - so perhaps that code should be part of the Ext build?)

Of course, hindsight is a wonderful thing, and I should have checked the Ext source code... breaking my rule to always "check my assumptions".

Thanks again
Ian