ExtJs: Ext.grid.Panel: Сетка обновляется автоматически и становится пустой

Question

Я использую сетку для отображения данных на modal окно. Имеет две колонки: 1. Метка 2. TextField

Проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я вписываю что-либо в текстовое поле и теряю фокус из этого текстового поля (нажимая TAB или щелкая где-то еще), сетка полностью очищается, и я получаю пустую сетку!

Я знаю, что это как-то связано со свойством autoSync Store, связанным с сеткой. Таким образом, я установил его в false autoSync: false, После этого данные сохраняются и работают нормально.

НО, когда я закрываю это модальное окно и снова открываю его с теми же данными магазина, я получаю пустой экран!

Ниже приведен мой код:

модель

Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel', {
extend: 'Ext.data.Model',
fields: [
    {
        name: 'attribute',
        type: 'string'
    },
    {   name: 'attributeValue',
        type: 'string'
    }
]
});

хранить

var attrValueStore = Ext.create('Ext.data.ArrayStore', {
   autoSync: true, //tried setting it to false but got error as mentioned above
   model: 'Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueModel'
});

GRID

Ext.define('Ext.ux.window.visualsqlquerybuilder.SQLAttributeValueGrid', {
autoRender: true,
extend: 'Ext.grid.Panel',
alias: ['widget.attributevaluegrid'],
id: 'SQLAttributeValueGrid',
store: attrValueStore,
columnLines: true,
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
})],
columns: [        
    {                        /*Expression */
        xtype: 'gridcolumn',
        text: 'Attribute',
        sortable: false,
        menuDisabled: true,
        flex: 0.225,
        dataIndex: 'attribute'
    },
    {                           /*Attribute Values*/
        xtype: 'gridcolumn',
        editor: 'textfield',
        text: 'Values',
        flex: 0.225,
        dataIndex: 'attributeValue'
    }
],
initComponent: function () {
    this.callParent(arguments);
}
});

МОДАЛЬНОЕ ОКНО

var attributeValueForm = Ext.create('Ext.window.Window', {
  title:'Missing Attribute Values',
  id: 'attributeValueForm',
  height:500,
  width:400,
  modal:true,
  renderTo: Ext.getBody(),
  closeAction: 'hide',
  items:[
   {
    xtype: 'attributevaluegrid',
    border: false,
    //height: 80,
    region: 'center',
    split: true
   }
  ],
  buttons: [
  {
    id: 'OKBtn',
    itemId: 'OKBtn',
    text: 'OK',
    handler: function () {
        Ext.getCmp('attributeValueForm').close();
    }
  },
  {
    text: 'Cancel',
    handler: function () {
        Ext.getCmp('attributeValueForm').close();
    }
   }
]
});

Пожалуйста помоги. Это сводит меня с ума!

Answer 1

Я, вероятно, хотел бы заключить себя в тюрьму после написания этого.

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

Обе сетки имели одинаковые идентификаторы.

Изменил его сейчас, и теперь он работает нормально.

Спасибо за вашу помощь!

Answer 2

Было бы полезно, если бы вы могли предоставить подробную информацию о том, как вы создаете само окно, так как это может быть частью проблемы.

Одной из причин этого может быть то, что вы прячете окно вместо того, чтобы закрывать его, а затем создаете новый экземпляр при повторном открытии. Это приведет к тому, что ваш DOM будет иметь два экземпляра Windows и может неправильно синхронизировать данные во втором экземпляре.

Еще некоторые подробности о том, как вы создаете фактическое окно, помогут пролить свет на то, так ли это.