PDA

View Full Version : How to disable textboxes ?



Rajat Sharma
19 Dec 2011, 6:03 AM
It should be fairly simple but for some reason I am not able to do it. I have two radio buttons and two corresponding text boxes. I want to toggle their enable/ disable based on radio selections. here is how I am approaching this:


var name = new Ext.form.TextField({ //text box 1
fieldLabel:'Name',
name:'txt-name',
id:"id-name"
});

this.form= new Ext.FormPanel({ //simple form. contains 2 text boxes and a radio group of 2 buttons
border:false,
defaults:{xtype:'textfield'},
items:[
radios,
name,
{
fieldLabel:'Email', //second text box
name:'txt-email',
value:'',
id:"id-email",
disabled: true
}
]
});

var radios = new Ext.form.RadioGroup({
fieldLabel: 'Enter either',
columns: 2, //muestra los radiobuttons en dos columnas
items: [
{boxLabel: 'Name', id: 'rbName', name: 'framework', inputValue: 'nameValue', checked: true},
{boxLabel: 'Email id', id: 'rbEmail', name: 'framework', inputValue: 'emailValue'}
],
listeners:{ //the listener event for the radio group
change : function (cmp,newVal,oldVal){
var obj = Ext.get('rbName');
if(Ext.get('rbName').getValue()){ //getValue() returns a Boolean for a radio button
Ext.get('id-name').dom.disabled = false; //i think here is the problem
Ext.get('id-name').focus();
Ext.get('id-email').dom.disabled = true;
}else{
Ext.get('id-name').dom.disabled = true;
Ext.get('id-email').dom.disabled = false;
Ext.get('id-email').focus();
}
}
}
});


According to the above logic the change even will fire twice - one for each radio button, because a single click will toggle both values. I am almost sure that dom.disabled is not the correct approach. But I do not know how to disable. Can someone please guide. Thanks.

tobiu
19 Dec 2011, 6:12 AM
Ext.getCmp('id-name').setDisabled(true);

i also recommend to use itemId istead of dom ids and use the component query to get your fields.

Rajat Sharma
19 Dec 2011, 6:22 AM
tobiu

Thanks for the reply.

setDisabled seems to be a method of Ext.form.field.Text rather than Ext.Element - which in my case, is returned by Ext.get('id-name'). I get the following error.


Object #<an Object> has no method 'setDisabled'
any workarounds ?

tobiu
19 Dec 2011, 6:23 AM
just copied your code without looking exactly :)



getCmp


is your friend, see updated posting above.

Rajat Sharma
19 Dec 2011, 6:34 AM
That was rather lame on my part. Yes, ext.getCmp seems to work. Can you please tell the basic difference between getCmp and get. Also, what advantages does itemId have over id. If the answer requires much of your time, any useful link will be fine. Thanks

tobiu
19 Dec 2011, 8:28 AM
component query:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery

itemId has the big advantage, that it does not have to be unique (like each window getting a saveBtn).
if you create more than one dom node with the same id you get into trouble.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-get
http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-getCmp
read this carefully.

Rajat Sharma
19 Dec 2011, 10:02 PM
Thanks for the links