ExtJS

Question

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

网格列：ID、姓名、时区
按钮：添加、保存

我已经打开网格的单元格编辑。
ID 编辑器 - 文本字段（文本字段 ID：IDEdit）
姓名编辑器：文本字段（文本字段 ID：NameEdit）
时区编辑器：文本字段（文本字段 ID：TimezoneEdi）

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

但我不希望用户在不添加新行的情况下编辑 ID。意思是当他双击 ID 时，即使它已经定义了编辑器，我也希望它被禁用。

所以我一开始就把IDEdit保持为disbled状态。单击添加我将其启用。一旦用户输入数据并单击“保存”，我再次将 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是否存在enable/disable?

谢谢！

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' 列定义任何编辑器。当您单击“添加”按钮时，使用新的唯一 ID 创建一条记录或设置默认值“-1”（如果您正在执行多项添加操作，则取反值 [-1,-2,-3,...,-n]）并像您一样将其插入顶部。像您已经在做的那样设置其他值。

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

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

javascript

sencha-architect

extjs5