ExtJs: Ext.grid.Panel: Grid refreshes automatically and becomes blank

Question

I am using a Grid to display data on a modal window. It has two columns, 1. Label 2. TextField

The problem I am facing is whenever I enter anything in the textfield and lose focus from that textfield (by pressing TAB or clicking somewhere else), the grid clears itself completely and I get a blank grid!

I know this has something to do with the autoSync property of the Store associated with the grid. So I set it to false autoSync: false. After doing this the data gets retained and works fine.

BUT when I close this modal window and re-open it with the same store data, I get a blank screen!

Following is my code:

Model

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

Store

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

MODAL WINDOW

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

Please help. This is making me go mad!!

Jaran Jaran · Accepted Answer · 2013-05-08T11:20:19

It would be helpful if you could provide details on how you create the Window itself, as it may be part of the problem.

One cause of this can be that you are hiding the window instead of closing it and then creating a new instance when you re-open. This will cause your DOM to have two windows instances and may not sync the data correctly in the second instance.

Some more details on how you create the actual window would help shed some light on whether this is the case.

ExtJs: Ext.grid.Panel: Grid refreshes automatically and becomes blank

2 Answers