ExtJS - How to check if cell editor textfield exists or not

Question

As per the requirement, I have a panel which contains grid and two buttons:

Grid Columns: ID, Name, Timezone
Buttons: Add, Save

I have switched on Cell editing for the grid.
Editor for ID - Textfield (Textfield id: IDEdit)
Editor for Name: Textfield (Textfield id: NameEdit)
Editor for Timezone: Textfield (Textfield id: TimezoneEdi)

Now when I click on Add, I add one BLANK row at the top with Blank ID, Name and Timezone so that user can add the record.

But I do not want user to edit ID if he is not adding the new row. Meaning when he double clicks on ID even if it has editor defined, I want it disabled.

So I have kept IDEdit as disbled in the beginning. On click of add I am making it enabled. Once user inputs data nad clicks on Save, I again make IDEdit as disabled. This works fine.

But now when I edit only Name and click Save, it says that cannot define disable property of undefined. This is happening because EditID has not been created yet.

Code is as below:

xtype: 'gridpanel',
                            height: 308,
                            id: 'MyGrid',
                            scrollable: true,
                            store: 'MyStore',
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'ID',
                                    text: 'ID',
                                    flex: 1,
                                    editor: {
                                        xtype: 'textfield',
                                        disabled: true,
                                        id: 'IDEdit'
                                    }
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'Name',
                                    text: 'Name',
                                    flex: 1,
                                    editor: {
                                        xtype: 'textfield'
                                    }
                                },
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'TIMEZONE',
                                    text: 'TimeZone',
                                    flex: 1,
                                    editor: {
                                        xtype: 'textfield'
                                    }
                                }

On Save button:

Ext.Ajax.request({
    Ajax request to server
    },

    success: function(response) {
                 var status = response.responseXML.getElementsByTagName('Row')[0].childNodes[0].childNodes[0].nodeValue;
                 var message = response.responseXML.getElementsByTagName('Row')[0].childNodes[1].childNodes[0].nodeValue;

            if(status === '1'){


            store.removeAll();
            store.load();            
            Ext.getCmp('IDEdit').disable();

            }
            else{
                Ext.Msg.alert('Failure', message);

                }
                }
});
}

How can I avoid this error? How can I check whether IDEdit exists or not before making it enable/disable?

Thanks !

Answer 1

My suggestion would be not to define any editor for 'ID' column in this situation. When you click on Add button, create a record with new unique ID or set default value '-1' (negated values[-1,-2,-3,...,-n] if u are doing multi add action) and insert it on top like you are doing. Set the other values like you are doing already.

Answer 2

First, using id as identificator in big application is very bad idea since you need to watch about unique id on every component in your application.

Better solution is using itemId. So it should be something like this:

   editor: {
       xtype: 'textfield',
       disabled: true,
       itemId: 'IDEdit'
   }

Then you could check whatever component exists in this way:

var components = Ext.ComponentQuery.query('gridpanel > gridcolumn > textfield[itemId=IDEdit]');
if(!Ext.isEmpty(components)){
    //which is working
    //components[0].setDisabled(true);
    //or
    //components[0].disabled()
}