ExtJS - Как проверить, если редактор ячейки TextField существует или нет

Question

В соответствии с требованием, у меня есть панель, которая содержит сетку и две кнопку:

столбцов сетки: ID, имя, часовой пояс
Кнопки: Добавить, Сохранить

Я включил редактирование ячейки для сетки.
редактор для ID - TextField (TextField ID: IDEdit)
редактор Имя: TextField (TextField ID: NameEdit)
редактор Timezone: TextField (TextField ID: TimezoneEdi)

Теперь, когда я нажимаю на Add, Я добавляю одну BLANK строку вверху с Blank ID, Name и Timezone, чтобы пользователь мог добавить запись.

Но я не хочу, чтобы пользователь редактировал ID, если он не добавляет новую строку. Значение, когда он дважды нажимает на ID, даже если он имеет определенный редактор, я хочу, чтобы он был отключен.

Так что я сохранил IDEdit как разбросанный в начале. При нажатии кнопки add я включаю его. Как только пользователь вводит данные и нажимает на «Сохранить», я снова делаю IDEdit как отключенный. Это прекрасно работает.

Но теперь, когда я редактирую только имя и нажмите «Сохранить», в нем говорится, что невозможно определить свойство disable undefined. Это происходит потому, что 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

Во-первых, использование идентификатора как идентификатора в большом приложении - очень плохая идея, так как вам нужно посмотреть уникальный идентификатор для каждого компонента вашего приложения.

Лучшее решение использует 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» в этом ситуация. Когда вы нажимаете кнопку «Добавить», создайте запись с новым уникальным идентификатором или установите значение по умолчанию «-1» (отрицательные значения [-1, -2, -3, ..., - n], если вы выполняете многократное добавление) и вставьте его сверху, как вы делаете. Установите другие значения, как вы уже делаете.