在EXTJS 4.0中单击网格中的复选框禁用文本字段

时间:2014-07-09 12:41:11

标签: extjs4

我有两个检查列和一个网格中的文本区域,如

      {
        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我的网格有三行,我怎么能实现这个功能。请帮忙......

1 个答案:

答案 0 :(得分:0)

我不会使用&#34; id&#34;。我会使用&#34; itemId&#34;。

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