javascript - ExtJS - 如何检查单元格编辑器文本字段是否存在

Question

根据要求，我有一个包含网格和两个按钮的面板:

网格列:ID、名称、时区
按钮:添加、保存

我已打开网格的单元格编辑。
ID 编辑器 - 文本字段(文本字段 ID:IDEdit)
名称编辑器:文本字段(文本字段 ID:NameEdit)
时区编辑器:文本字段(文本字段 ID:TimezoneEdi)

现在，当我单击“添加”时，我会在顶部添加一个空白行，其中包含空白 ID、名称和时区，以便用户可以添加记录。

但如果用户不添加新行，我不希望用户编辑 ID。这意味着当他双击 ID 时，即使它已定义编辑器，我也希望将其禁用。

所以我一开始就将 IDEdit 保持为禁用状态。单击“添加”后，我将其启用。一旦用户输入数据并单击“保存”，我再次将 IDEdit 禁用。这工作得很好。

但是现在当我只编辑名称并单击“保存”时，它说无法定义未定义的禁用属性。发生这种情况是因为 EditID 尚未创建。

代码如下:

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'
                                    }
                                }

保存按钮:

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

                }
                }
});
}

如何避免此错误？在启用/禁用 IDEdit 之前如何检查 IDEdit 是否存在？

谢谢!

Answer 1

首先，在大型应用程序中使用 id 作为标识符是非常糟糕的主意，因为您需要监视应用程序中每个组件的唯一 id。

更好的解决方案是使用 itemId。所以它应该是这样的:

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

然后你可以通过这种方式检查是否存在任何组件:

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