PDA

View Full Version : Disabling form fields using a ComboBox



mastachef
14 Aug 2009, 10:24 AM
I have a form with one ComboBox and four fields. Depending on what optoin the user selects from the Combo Box, I need to make the other fields non-editable and still sed that data.
Here is my ComboBox with a listener:


new Ext.form.ComboBox ( {
isEditable: true,
fieldLabel: 'Command',
name: 'commandCmd',
emptyText: 'None' ,
triggerAction: 'all' ,
mode: 'local' ,
displayField: 'value' ,
selectOnFocus:true,
resizeable:true,
typeAhead: true,
listWidth:300,listeners: {
select: function (combo, record, index) {
if (record.get('value') == 'Commence-Operation')
{
alert('hello');
}
Here are the fields I wish to disable when necessary.



{
isEditable: true,
fieldLabel: 'Destination Node Name',
name: 'commandNodeMnemonic',
inputType: 'text',
readOnly: true
},
new Ext.form.DateField({
isEditable: true,
fieldLabel: 'Date and Time',
name: 'commandDateTime',
readOnly: true,
format:'Y-m-d H:i',
menu:new DatetimeMenu()
}),
new Ext.form.TextArea ({
isEditable: true,
fieldLabel: 'Short Message',
name: 'commandTxShortMsgMessage',
inputType: 'text'
}),
new Ext.form.ComboBox ( {
isEditable: true,
fieldLabel: 'BroadCast Command',
name: 'commandBroadcast',
emptyText: 'Single - Terminal' ,
triggerAction: 'all' ,
mode: 'local' ,
displayField: 'value' ,
selectOnFocus:true,
resizeable:true,
typeAhead: true,
listWidth:300,
store: commandBroadcastStore

Animal
14 Aug 2009, 11:06 AM
Well we don't have much to go on there.

I suppose what you need is a Store containing your Field definitions for the ComboBox to use.

You could eveb use a custom template so each item could show its currently enabled/disabled statue. You could use the same graphic as the GridPanel's column hider.

pdegit
14 Aug 2009, 11:22 AM
select: function(combo, record, index){
var fields = [], formpanel;
if (record.get('value') == 'Commence-Operation'){
fields.push('commandNodeMnemonic', 'commandDateTime');
}
if (fields.length > 0){
formpanel = combo.findParentByType('form');
Ext.each(fields, function(name){
var field = this.findField(name);
if (field) field.setDisabled(true);
}, formpanel.getForm());
}
}

Animal
14 Aug 2009, 11:23 AM
wossat?

pdegit
14 Aug 2009, 11:25 AM
a new select event listener function which disables desired fields bases on selected combo value

Animal
14 Aug 2009, 11:46 AM
It's a weird as a weird thing.

pdegit
14 Aug 2009, 12:38 PM
Lol,

what's weird about it? It builds up an array of fieldnames based on whatever value is selected in the combo. Then it checks if fields need to be disabled, finds those fields in the form and disables them...

Animal
14 Aug 2009, 12:45 PM
WHy would you hard code the field names?

Ad then on select of ANY value in the combo you loop through the whole form, checking if each one matches, and disabling????

WHy not just hardcode the handler to do



Ext.getCmp("commandNodeMnemonic").disable()


etc?


It makes no sense at all. None.

pdegit
14 Aug 2009, 12:53 PM
Ok,

say you're writing an application where users can open multiple instances of the same form, for editing multiple records at the same time for example. Then you can't rely on id's or you'll have to prefix them for each form instance and deal with that, or you dynamically find the fields based on their name. Mind you, i'm not looping through anything on selection of a random record, it clearly checks which value is selected, then adds some fieldnames to disable to an array based on that value... If no fields require disabling, nothing happens.

If another selected value requires other fields to be disabled all you need to do is add some fieldnames to the array...
If you can get the fields which require disabling from the selected record that would be ever better, but I wasn't assuming that was asked here.

Animal
14 Aug 2009, 1:05 PM
It seems obvious that the ComboBox's Store contains Records corresponding to each Field.

So you'd check the selected Record, and toggle the associated Field.

And the dropdown should probably show the current state of the field using a checkbox icon.

pdegit
14 Aug 2009, 1:13 PM
It all depends if the available 'command' records to choose from are hard-coded on the client-side... Since mode was set to local I assumed they where, but to assume....