Question

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

网格列：ID，名称，时区
按钮：添加，保存

我已打开网格的单元格编辑 ID的编辑 - Textfield（Textfield id：IDEdit）
名称编辑：Textfield（Textfield id：NameEdit）
时区编辑：Textfield（Textfield id：TimezoneEdi）

现在，当我点击Add时，我在顶部添加了一个空白ID，名称和时区的BLANK行，以便用户可以添加记录。

但如果他没有添加新行，我不希望用户编辑ID。即使它已经定义了编辑器，当他双击ID时也是如此，我希望它被禁用。

所以我一开始就让IDEdit保持低迷状态。点击添加我启用它。一旦用户输入数据，点击“保存”，我再次将IDEdit设置为禁用。这很好。

但是现在当我只编辑Name并单击Save时，它表示无法定义undefined的disable属性。发生这种情况是因为还没有创建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是否存在？

谢谢！

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

Answer 2

我的建议是不要为“ID＆＃39;”定义任何编辑器。在这种情况下的列。单击“添加”按钮时，使用新的唯一ID创建记录或设置默认值＆＃39; -1＆＃39; （否定值[-1，-2，-3，...， - n]如果你正在进行多重添加动作）并将其插入到顶部，就像你正在做的那样。像你已经做的那样设置其他值。

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

2 个答案: