为什么我的ExtJS datagrid填充为空？ [英] Why is my ExtJS datagrid populating as empty?

问题描述

我正在尝试提供一个概念证明ExtJS datagrid在移动到基于服务器的商店的途中。目前我的代码如下：

  var arrayData = [
 [''，'Held'，' ，''，'abc'，''，'100.00'，'0.00'，'内部批准']，
 / * 11类似的行被删除为了消毒的缘故* / 
 / *我试过有和没有报价的货币金额。 * / 
]; 
 
 var nameRecord = Ext.data.Record.create（[
 {name：'approved_date'，mapping：1}，
 {name：'approval_status'，mapping：2 }，
 {name：'approval_id'，mapping：3}，
 {name：'reference_id'，mapping：4}，
 {name：'manufacturer_distributor_name'，mapping：5} 
 {name：'shipping_authorization_number'，mapping：6}，
 {name：'purchase_order_number'，mapping：7}，
 {name：'original_amount'，mapping：8}，
 {name：'open_amount'，mapping：9}，
 {name：'requestor'，mapping：10} 
]）; 
 
 var arrayReader = new Ext.data.ArrayReader（{}，nameRecord）; 
 
 var memoryProxy = new Ext.data.MemoryProxy（arrayData）; 
 
 var store = new Ext.data.Store（{
 reader：arrayReader，
 proxy：memoryProxy 
}）; 
 
 var columnModel = new Ext.grid.ColumnModel（[
 {
 header：'Approved Date'，
 sortable：true，
 
 dataIndex：'approved_date'
}，
 {
标题：'批准状态'，
可排序：true，
 dataIndex：'approval_status'
} ，
 {
 header：'Approval ID'，
 sortable：true，
 dataIndex：'approval_id'
}，
 {
 header ：'参考ID'，
可排序：true，
 dataIndex：'reference_id'
}，
 {
标题：'制造商/经销商名称'，
 sortable：true，
 dataIndex：'manufacturer_distributor_name'
}，
 {
 header：'运送授权号'，
可排序：true，
 dataIndex ：'shipping_authorization_number'
}，
 {
 header：'采购订单号'，
可排序：真，
 dataIndex：'purchase_order_number'
} 
 {
 header：'原始金额'， 
可排序：true，
 dataIndex：'original_amount'
}，
 {
标题：'开放金额'，
可排序：真，
 dataIndex：'open_amount'，
}，
 {
 header：'Requestor'，
 sortable：true，
 dataIndex：'requestor'
} ]）; 
 
 var gridView = new Ext.grid.GridView（）; 
 
 var selectionModel = new Ext.grid.RowSelectionModel（{
 singleSelect：true 
}）; 
 
 var grid = new Ext.grid.GridPanel（{
 title：'Approvals'，
 renderTo：Ext.getBody（），
 height：500，
 width：700，
 store：store，
 view：gridView，
 colModel：columnModel，
 selModel：selectionModel 
}）; 
  

这是为了密切关注第159-161页上的Hello world级别的网格示例在耶稣加西亚的ExtJS in Action中。就这样，我的代码用空白的白色区域填充列名称;也就是说，它在FF / Chrome上显示列名称和空白的白色区域，并且在IE6-8上似乎没有显示任何内容。在Chrome中，JavaScript控制台不会显示任何错误消息或其他记录的信息。

有关我的代码有什么问题或我如何解决它的任何建议？ / p>

解决方案

IE-6-8可能不喜欢 dataIndex中的悬挂逗号：'open_amount'，（以及FF / Chrome会原谅的任何其他语法错误）

您可以发布您在FF / Chrome中看到的内容的屏幕截图吗？ / p>

您的代码可以简化一些。例如只需使用 ArrayStore ，而不是阅读器，代理记录，商店组合

编辑 -

  var grid = new Ext。 grid.GridPanel（{
 title：'Approvals'，
 renderTo：Ext.getBody（），
 height：500，
 width：700，
 store：new Ext.data.ArrayStore（{
 idIndex：0，
 fields：['approved_date'，'approval_status'，{name：'approval_id'，type：'int'}] //指定其他字段
}），
 cm：new Ext.grid.ColumnModel（{
 defaults：{
 sortable：true，
 width：200 
}，
列：[{
 header：'Approval Date'，
 dataIndex：'approved_date'
}，{
 header：'Approval Status'，
 dataIndex ：'approval_status'
}，{
 header：'Approval ID'，
 dataIndex：'approval_id' 
}] 
}）
}）; 
 
 var myData = [
 ['01 / 01/11'，'Held'，1]，
 ['02 / 02/11'，'Approved'，2 ] 
] 
 
 grid.getStore（）。loadData（myData）; 
  

I am trying to make a proof of concept ExtJS datagrid en route to moving to a server-based store. At present my code is as follows:

var arrayData = [
  ['', 'Held', '', '', 'abc', '', '100.00', '0.00', 'Internal Approval'],
  /* 11 similar rows deleted for sanitization's sake */
  /* I've tried with and without quotes around the monetary amounts. */
  ];

var nameRecord = Ext.data.Record.create([
  {name: 'approved_date', mapping: 1},
  {name: 'approval_status', mapping: 2},
  {name: 'approval_id', mapping: 3},
  {name: 'reference_id', mapping: 4},
  {name: 'manufacturer_distributor_name', mapping: 5},
  {name: 'shipping_authorization_number', mapping: 6},
  {name: 'purchase_order_number', mapping: 7},
  {name: 'original_amount', mapping: 8},
  {name: 'open_amount', mapping: 9},
  {name: 'requestor', mapping: 10}
  ]);

var arrayReader = new Ext.data.ArrayReader({}, nameRecord);

var memoryProxy = new Ext.data.MemoryProxy(arrayData);

var store = new Ext.data.Store({
  reader: arrayReader,
  proxy: memoryProxy
  });

var columnModel = new Ext.grid.ColumnModel([
  {
  header: 'Approved Date',
  sortable: true,

  dataIndex: 'approved_date'
  },
  {
  header: 'Approval Status',
  sortable: true,
  dataIndex: 'approval_status'
  },
  {
  header: 'Approval ID',
  sortable: true,
  dataIndex: 'approval_id'
  },
  {
  header: 'Reference ID',
  sortable: true,
  dataIndex: 'reference_id'
  },
  {
  header: 'Manufacturer / Distributor Name',
  sortable: true,
  dataIndex: 'manufacturer_distributor_name'
  },
  {
  header: 'Shipping Authorization Number',
  sortable: true,
  dataIndex: 'shipping_authorization_number'
  },
  {
  header: 'Purchase Order Number',
  sortable: true,
  dataIndex: 'purchase_order_number'
  },
  {
  header: 'Original Amount',
  sortable: true,
  dataIndex: 'original_amount'
  },
  {
  header: 'Open Amount',
  sortable: true,
  dataIndex: 'open_amount',
  },
  {
  header: 'Requestor',
  sortable: true,
  dataIndex: 'requestor'
  }]);

var gridView = new Ext.grid.GridView();

var selectionModel = new Ext.grid.RowSelectionModel({
  singleSelect: true
  });

var grid = new Ext.grid.GridPanel({
  title: 'Approvals',
  renderTo: Ext.getBody(),
  height: 500,
  width: 700,
  store: store,
  view: gridView,
  colModel: columnModel,
  selModel: selectionModel
  });

This is intended to closely follow the "Hello world"-level grid example on pp. 159-161 in Jesus Garcia's ExtJS in Action. As it stands, my code populates column names with a blank white area; that is, it displays the column names and a blank white area on FF/Chrome, and doesn't seem to display anything on IE6-8. In Chrome, the JavaScript console does not show any error messages, or other logged information.

Any suggestions about what is wrong with my code or how I can fix it?

解决方案

IE-6-8 may not be liking the dangling comma at dataIndex: 'open_amount', (and any other syntax errors that FF/Chrome would forgive)

Can you post a screenshot of what you are seeing in FF/Chrome?

Your code can be simplified quite a bit. e.g. Simply use ArrayStore instead of reader,proxy,record,store combination

EDIT-

var grid = new Ext.grid.GridPanel({
    title: 'Approvals',
    renderTo: Ext.getBody(),
    height: 500,
    width: 700,
    store: new Ext.data.ArrayStore({
      idIndex:0,
      fields: ['approved_date', 'approval_status',{name:'approval_id', type:'int'}] //specify other fields here
    }),
    cm:new Ext.grid.ColumnModel({
      defaults:{
        sortable:true,
        width:200
      },
      columns:[{
       header:'Approval Date',
       dataIndex:'approved_date'
      },{
        header:'Approval Status',
        dataIndex:'approval_status'
      },{
        header:'Approval ID',
        dataIndex:'approval_id'
      }]                    
    })
});

var myData=[
  ['01/01/11','Held', 1],
  ['02/02/11','Approved', 2]
]

grid.getStore().loadData(myData);

这篇关于为什么我的ExtJS datagrid填充为空？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！