make 'textfield' readonly conditioned using ext js 3.3

Question

I am using ExtJS 3.3 and I have the following code for my 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'
    }
});

What I'm looking for is that for textfield Application_GUID, I need to be readOnly: true if a value already exist(like when I double click on an existing one from the grid in order to edit it), and if I press the new button from my grid, I need the readonly statement to be false.

If someone can help me , It would be grate. Thanks.

score 1 · Accepted Answer · answered Jun 26 '12 at 14:13

A good technique is to set a boolean variable to initialise as false. Then set it to true according to your needs.

Then add the required listener like in the following example code, for example on the change listener:

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

make 'textfield' readonly conditioned using ext js 3.3

1 Answers1