禁止對複選框的點擊一個文本框在網格中EXTJS 4.0

Question

我有兩個複選框列和一個文本區域的網格狀

 { 
     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 
     }) 
    } 

在下降複選框的點擊，我需要啓用文本字段。否則它應該是diabled.if我的網格有三行，我怎麼能實現這個功能。請幫忙...

Answer 1

我不會用「id」。我會使用「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 
     }) 
    } 

---

編輯！

因爲你在控制器中需要這個，我對控制器一無所知，所以這是一個通用的例子。

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() 
    } 
});  

這裏重要的是你在控制器上聲明的網格的引用。 如果聲明引用

refs: [ 
    { 
     ref: 'grid', 
     selector: 'grid' 
    } 
], 

要使用它，你只是

this.getReference();