使用 ext js 3.3 将“textfield”设为只读条件

Posted 2023-02-26

【中文标题】使用 ext js 3.3 将“textfield”设为只读条件

【英文标题】：make 'textfield' readonly conditioned using ext js 3.3

【发布时间】：2012-06-25 08:19:59

【问题描述】：

我正在使用 ExtJS 3.3，我的formpanel 有以下代码：

Ext.apply(this, 
    items: [
            xtype: 'textfield',
            fieldLabel: 'ApplicationGUID',
            labelAlign: 'right',
            name: 'Application_GUID',
            value: 0,
            readOnly: false,
            width: 300
        ,
        
            xtype: 'textfield',
            fieldLabel: 'ApplicationName',
            labelAlign: 'right',
            name: 'Application_Name',
            anchor: '-20',
            msgTarget: 'side'
        

    ], //eof items
    tbar: [
        xtype: 'mydeletebutton',
        scope: this,
        ownerCt: this,
        handler: this.deleteHandler,
        myAuth: 
            compBaseRights: 
                Delete: 
                    failProperty: 
                        disabled: false
                    
                 /*eof Delete*/
             /*eof compBaseRights*/
         /*eof sgAuth*/
    , 
        xtype: 'tbseparator'
    , 
        xtype: 'trashcanbutton',
        scope: this,
        ownerCt: this,
        handler: this.setIsDeletedHandler,
        myAuth: 
            compBaseRights: 
                Insert: 
                    failProperty: 
                        disabled: false
                    
                 /*eof Delete*/
             /*eof compBaseRights*/
        
    , 
        xtype: 'mytrashcanrestorebutton',
        scope: this,
        ownerCt: this,
        handler: this.unsetIsDeletedHandler,
        myAuth: 
            compBaseRights: 
                Insert: 
                    failProperty: 
                        disabled: false
                    
                 /*eof Delete*/
             /*eof compBaseRights*/
        
    , 
        xtype: 'tbseparator'
    , 
        xtype: 'mysavebutton',
        scope: this,
        handler: this.saveHandler,
        myAuth: 
            compBaseRights: 
                Write: 
                    failProperty: 
                        disabled: false
                    
                 /*eof Delete*/
             /*eof compBaseRights*/
        
    ],
    bbar: 
        xtype: 'mystatusbar'
    
);

我正在寻找的是对于textfieldApplication_GUID，如果值已经存在，我需要readOnly: true（例如当我从网格中双击现有值以对其进行编辑时），并且如果我按下grid 中的新按钮，我需要readonly 语句为false。

如果有人可以帮助我，那就太感谢了。谢谢。

【参考方案1】：

一个好的技巧是设置一个布尔变量来初始化为假。然后根据你的需要设置为true。

然后像下面的示例代码一样添加所需的侦听器，例如在更改侦听器上：

listeners: 
    yourlistener: function(e)  //yourlistener can be change, select, etc...
        if (booleanVariable === true) Ext.getCmp('your-textbox-id').setReadOnly(true);
        else Ext.getCmp('your-textbox-id').setReadOnly(false);