PDA

View Full Version : enable/disable a specific text field when I select/de-select a checkbox



sponge_bob
26 Nov 2013, 8:44 PM
As the title described, following is my code:
View:{ id: 'speedupFactorCheck',
layout:{type: 'hbox'},
background:'#F2F2F2',
items:[{
id: 'speedCheck',
xtype: 'checkbox',
name : 'speedupFactorCheck'
},{
xtype: 'textfield',
id: 'speedupField',
name: 'speedupFactor',
inputType: 'Number',
fieldLabel: 'Speedup Factor:',
disabled: true,
width:300,
labelWidth: 185
}]}
Controller: '#speedCheck': {
change :this.disableFlied
}

disableFlied: function(){
var a = Ext.getCmp("speedupField");
alert(a.isDisabled());
a.setDisabled(!a.isDisabled());
}

The alert function can pop-up right value of the text field which id is speedupField, but from UI the text field always look like no matter whether the text field is disable.
Following is a picture of this text field
http://www.sencha.com/forum/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV0AAAAaCAIAAACbwBiAAAADJUlEQVR4nO2cTavaQBSG7///J0IXAUESUBEk4qKbEFy4SHYigQhlQtvJdxeaZD7ttZnMxfR9VnqcL5HzZOYE80EAsEiSJDEYTZIkk/5MH5OODoBAHMe32+0XGMHtdovjeNKfCV4AVonj+KvTag7AC2BWwAtGgBfArIAXjGDVC5fL5XQ6fddzOp0ul8ukCwLzBl4wglUvhGGYZVmrJ8uyMAy75tfAXQz40QTLi/yFG1z/tTe/wAmXCT4NvGAEq144Ho9t2zZ62rY9Ho/3xpHPJtk1cKfIufFeGLem8SMAHnjBCFa9cDgcmqap9TRNczgcCCGKjJ0kheCFuQEvGMGqF/b7fV3XpZ66rvf7PSHk6QbhGrhuEPjSxj2SQ+rgEPMfXmDzc3itm4hZiC6r+ynYjsy5w4/YRp2bhgZMxPV999FjnMb+C+AFI1j1wm63q6oq11NV1W6365ozucVl3z177qHIX4iZfQ3cLnuUweGAcg1cqbfYSZpIWoiiusCcgYZ+TLCfgjOL0KtvgB3FC8ALRrDqhc1mU5blbz1lWW42G2mQThBiVjFvxASTsr0PctdcVUveC+JELJ86BSjnVY2g/QrYIrwAvGAEq17wPK8oip96iqLwPE890pAhfDreM0i8dPdJJQb5RHvBC4rEfuIFbmp5XtUI3PjdByhAvAi8YASrXlitVnmeZ3ryPF+tVoSIdyMIIbrNt2q/IPVgsbBf4Bwwfr8AL7wAvGAEq15YLpeU0ietKaXL5ZIQwp79Sf+eqRpIxQImgZSJPbxU1RfEoPS5SlTapBUKBer6gnxM0NUX4IUXgBeMYNULjuNQSn/ooZQ6jtO3Z4v64h7b98WwXN7XBbtNvhsEPiebPshoRTERO44yadn7ChHvJqGQ+ghJDdg7FM+OMkAAXjCCVS9st9s0TSmlyqIjpTRNU1XdUcDaNRQX6/cDXjCCVS+cz+f1ev1Nz3q9Pp/PfxsTXgBa4AUjvOP/KeEFoAVeMMI7egEALfCCEeAFMCvwHLfx4DluYG7gua9GwHNfAQC2gRcAACLwArAKzhFGwDkCzIoYdcfRWKg7/gFZr7BahxsNswAAAABJRU5ErkJggg==http://www.sencha.com/forum/image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVAAAAAZCAIAAADoquGeAAADDklEQVR4nO2cTWvqQBSG+///iXAXAUEiRBEkwcXdhODCRbILQVC4TOi9E2OSu9Ak82mrOdpa32elxzMftX1m5gw0bwwA8DK8ffUEwGux3W4TMJjtdnvb9w/hwUNJkmS/3/8FA9jv90mS3Pb9Q3jwUJIk+WpffgIQHjwHEJ4ECA+eAwhPAo3waZqu1+vfdtbrdZqmFL938KJAeBJohI+iKM/zxk6e51EUtelZ6I56/HjYX4KR2B+5YXZra3mCd5wm+DQQngQa4VerVdM0tZ2maVar1Sk59kV7stC9h0zDhR82p+E9ABkITwKN8EEQ1HVd2anrOggCxphBxbu4AeF/GhCeBBrhl8tlVVWlnaqqlsslY+zilp6FrhuGvnaGjvWQOdjH/LPwonj9a9tAwkRsunZDiA2FEsCPxaR20ekThIjr++65xbD16SWA8CTQCL9YLI7HY2HneDwuFos2XZBG0uqkxSkU+yNV2Sx0Wy2Mwb5WyEJXa6020gbSJmKo4IVypG8nBLshpCVDadUl4AxwBRCeBBrhZ7NZWZb/7JRlOZvNtE5a81VdhDeqOZrGXVDaJU2ZsvDqQCKfOpAbxzX1YP0RsKlfAYQngUb46XR6OBze7RwOh+l0au6p/9OXPTupoW62nS1qUDboCuENxl4QXhpaH9fUg9R/+wGK/CuB8CTQCD+ZTIqiyO0URTGZTBhT7+gZY7ZzsGmH11qIPGCHl+QevsND+CuA8CTQCD8ejznnF7I55+PxmDEm1tesey9U5lpBLphhNLZ/aarh1aD2uWkFstqoFOPmGl4/sdtqeAh/BRCeBBrhHcfhnP+xwzl3HKfLF6+61eOu76th/dLbFmzP224Y+tIq0gWF9cIwkNiP0Ubxtj2WFx3lFvIc0hLEe/tLVQVQgPAk0Ag/n893ux3n3Hhjxznf7XamSzuFh+162F6fDwhPAo3wm83G87xfdjzP22w2H/UJ4YEVCE/Ct/pvOQgPrEB4Er6V8ABYgfAkQHjwHOARV8PBI67A04CHWJKAh1gCAD4GwgPwQvwHrwBNqf4IQVoAAAAASUVORK5CYII=

scottmartin
27 Nov 2013, 2:40 PM
I cannot see the images. You can run this code in our fiddle:

https://fiddle.sencha.com/#home



Ext.application({
name: 'Fiddle',

launch: function() {

var form = Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address'
}]
});

var tf = form.down('textfield');
tf.setDisabled(true);

}
});