extjs 动态存储模型网格列

Posted 2023-03-16

【中文标题】extjs 动态存储模型网格列

【英文标题】：extjs dynamic store model grid columns

【发布时间】：2015-03-30 09:41:47

【问题描述】：

我遇到了一个奇怪的问题。我正在建立一个商店并调用加载函数。当存储加载时，我根据结果创建一个列模型，然后将该存储传递到网格中并调用 reconfigure()。网格看起来显示了正确的行数，列标题正确，但单元格中的实际数据为空白。但是，如果我在重新配置后调用 grid.getStore().load() （这很糟糕，因为我已经加载了商店），数据会正确显示。有人知道为什么会这样吗？相关代码的sn-p如下。

 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");
        
,

【问题讨论】：

你能从你的服务器发布一些数据对象吗？

【参考方案1】：

为什么你不使用加载数据方法？ 你有数据和一切，所以加载这些数据：

 #YOUR_STORE.loadData( records, false );

作为

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

请参考sencha docs。

【讨论】：

感谢您的回复。我试过了，但它对我不起作用。结果相同，网格弹出 x 个空白行（空白行数是我在事件侦听器的记录中的结果数）...

关于此的新数据...当我检查加载后调用的函数中的存储...在 store.data.items 中，我正确定义了原始值，但“数据”值是未定义的。换句话说... store.data.items[0].raw = fieldOne: 'real value'... 但 store.data.items[0].data = 。当我使用该存储加载网格时，网格显示空白行..如果我调用 store.load 然后将其传递给网格，不仅 store.data.items[0].data 与原始值匹配，网格正确显示数据

【参考方案2】：

我遇到过这个问题。我发现 ExtJS 中有一个错误，它在某些没有为网格指定高度的情况下隐藏单元格数据。如果您检查实际生成的 html 表格，单元格数据实际上是存在的，但该表格指定了 position: absolute，由于某种原因隐藏了单元格数据。

示例 1 隐藏单元格数据，未指定高度

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)

示例 2 可见单元格数据，指定高度

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)