extjs dynamic store model grid columns

Question

I'm having an odd issue. I am setting up a store and calling the load function. When the store loads I create a column model based on the results and then pass that store into a grid and call reconfigure(). The grid looks to have the right number of rows displayed and the column headers are correct but the actual data in the cells is blank. If I, however, call grid.getStore().load() after the reconfigure (which sucks because I've already loaded the store), the data shows up correctly. Does anybody have any idea why this is happening? A snippet of the relevant code is below.

 dynStore.load({
        callback: function(records, operation, success) {
            if (records && records.length) {
                var dynStore = Ext.getStore('DynamicReportGeneratorResults');
                var modelFields = [];
                var dynamicColumns = [];
                var sampleRow = records[0].raw;
                Ext.Object.each(sampleRow, function (key, value) {
                    modelFields.push(key);
                    var dynColObj = {text: key, dataIndex: key};
                    if (key == "id") {
                        dynColObj.hidden = true;
                    }
                    dynamicColumns.push(dynColObj);
                });
                dynStore.model.setFields(modelFields);
                var config = {'reportName': this['currentReportName']};
                var reportResultWindow = Ext.create('Rms.view.DynamicReportGeneratorReportResultsWindow', config);
                reportResultWindow.show();
                this.getDynamicReportResultsGrid().reconfigure(dynStore, dynamicColumns);
/////*******    
//this next line is stupid since the store is already loaded with data
/////*******
                this.getDynamicReportResultsGrid().getStore().load();
            }
            else {
                Ext.Msg.alert("Report Resuts", "No results from this report");
        }
},

Answer 1

Why you are not using load data method? You have data and everything so load that data with :

 #YOUR_STORE.loadData( records, false );

as

 this.getDynamicReportResultsGrid().getStore().loadData( records, false );

Refer sencha docs.

Answer 2

I have had this problem. I have found there is a bug in ExtJS which hides cell data in some cases where there is no height specified for the grid. If you inspect the actual HTML table generated, the cell data is actually there, but the table has position: absolute specified, which for some reason hides the cell data.

Example 1 hidden cell data, height not specified

http://codepen.io/anon/pen/azLWaV?editors=001

;(function(Ext) {
  Ext.onReady(function() {
    console.log("Ext.onReady")

    var store = Ext.create("Ext.data.Store", {
      fields: ["id", "name"]
      ,buffered: true
      ,pageSize: 100
      ,proxy: {
        type: 'rest'
        ,url: '/anon/pen/azLBeY.js'
        reader: {
          type: 'json'
        }
      }
    })
    store.on("load", function(component, records) {
      console.log("store.load")
      console.log("records:")
      console.log(records)
    })

    var grid = new Ext.create("Ext.grid.Panel", {
      requires: ['Ext.grid.plugin.BufferedRenderer']
      ,plugins: {
        ptype: 'bufferedrenderer'
      }
      ,title: "people"
      ,loadMask: true
      ,store: store
      ,columns: [
        {text: "id", dataIndex: "id"}
        ,{text: "name", dataIndex: "name"}
      ]
    })
    grid.on("afterrender", function(component) {
      console.log("grid.afterrender")
    })
    grid.render(Ext.getBody())

    store.load()
  })
})(Ext)

Example 2 visible cell data, height specified

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) {
  Ext.onReady(function() {
    console.log("Ext.onReady")

    var store = Ext.create("Ext.data.Store", {
      fields: ["id", "name"]
      ,buffered: true
      ,pageSize: 100
      ,proxy: {
        type: 'rest'
        ,url: '/anon/pen/azLBeY.js'
        reader: {
          type: 'json'
        }
      }
    })
    store.on("load", function(component, records) {
      console.log("store.load")
      console.log("records:")
      console.log(records)
    })

    var grid = new Ext.create("Ext.grid.Panel", {
      requires: ['Ext.grid.plugin.BufferedRenderer']
      ,plugins: {
        ptype: 'bufferedrenderer'
      }
      ,title: "people"
      ,height: 200
      ,loadMask: true
      ,store: store
      ,columns: [
        {text: "id", dataIndex: "id"}
        ,{text: "name", dataIndex: "name"}
      ]
    })
    grid.on("afterrender", function(component) {
      console.log("grid.afterrender")
    })
    grid.render(Ext.getBody())

    store.load()
  })
})(Ext)