disabling a textfield on click of a checkbox in a grid in EXTJS 4.0 - extjs4

Question

i have two check columns and a text area in a grid like
{
xtype: 'checkcolumn',
id: 'app',
text: '<b>Approve</b>',
width: 100,
active : false,
dataIndex: 'appr',
menuDisabled : true,
listeners: {
"checkchange": function (comp, rowIndex, checked, eOpts) {
this.up("myGrid").fireEvent("checkAppr", comp, rowIndex, checked, eOpts);
}
}
}, {
xtype: 'checkcolumn',
id: 'dec',
text: '<b>Decline</b>',
active : false,
width: 100,
dataIndex: 'decl',
menuDisabled : true,
listeners: {
"checkchange": function (comp, rowIndex, checked, eOpts) {
this.up("myGrid").fireEvent("checkDecl", comp, rowIndex, checked, eOpts);
},
"afterEdit":function(roweditor, rowIndex,checked){
this.up("noiApprovalGrid").fireEvent("editDecl",roweditor, rowIndex,checked);
}
}
}, {
id : 'declresn',
header: '<b>Decline Reasons</b>',
dataIndex: 'declRsn',
//disabled : true,
width: 150,
editor: new Ext.form.TextField({
id : 'decltxt',
dataIndex: 'declTxt',
disabled : true,
maxValue: 100000
})
}
on click of decline checkbox, i need to enable the textfield. otherwise it should be diabled.if my grid has three rows, how can i achieve this functionality. Please help...

Answer 1

I would not use "id". I would use "itemId".
{
xtype: 'checkcolumn',
itemId: 'app',
text: '<b>Approve</b>',
width: 100,
active : false,
dataIndex: 'appr',
menuDisabled : true,
listeners: {
"checkchange": function (comp, rowIndex, checked, eOpts) {
this.up("myGrid").fireEvent("checkAppr", comp, rowIndex, checked, eOpts);
}
}
}, {
xtype: 'checkcolumn',
itemId: 'dec',
text: '<b>Decline</b>',
active : false,
width: 100,
dataIndex: 'decl',
menuDisabled : true,
listeners: {
"checkchange": function (comp, rowIndex, checked, eOpts) {
this.up("myGrid").fireEvent("checkDecl", comp, rowIndex, checked, eOpts);
this.up("myGrid").down("textfield[itemId=dcltxt]").enable(); //or disable();
},
"afterEdit":function(roweditor, rowIndex,checked){
this.up("noiApprovalGrid").fireEvent("editDecl",roweditor, rowIndex,checked);
}
}
}, {
itemId : 'declresn',
header: '<b>Decline Reasons</b>',
dataIndex: 'declRsn',
//disabled : true,
width: 150,
editor: new Ext.form.TextField({
itemId : 'decltxt',
dataIndex: 'declTxt',
disabled : true,
maxValue: 100000
})
}
Edit!!!
Because you need this in your controller, and I don't know nothing about your controller this is a generic example.
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'grid',
selector: 'grid'
}
],
checkDecl: function if (checked) {
this.getGrid().down("textfield[itemId=dcltxt]").enable()
}
});
The important thing here is the reference to the grid you declare on your controller.
If you declare a reference
refs: [
{
ref: 'grid',
selector: 'grid'
}
],
To use it you just
this.getReference();