Почему моя таблица данных ExtJS заполнена как пустая? - PullRequest
Новая
       17

Почему моя таблица данных ExtJS заполнена как пустая?

0 голосов
/ 05 апреля 2011

Я пытаюсь проверить концепцию ExtJS datagrid на пути к переходу на серверное хранилище.В настоящее время мой код выглядит следующим образом: 

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

Это предназначено для точного следования примеру сетки "Hello world" на стр. 159-161 в ExtJS в действии Иисуса Гарсии .,В настоящее время мой код заполняет имена столбцов пустой белой областью;то есть, он отображает имена столбцов и пустую белую область в FF / Chrome, и, похоже, ничего не отображает в IE6-8.В Chrome консоль JavaScript не отображает никаких сообщений об ошибках или другой зарегистрированной информации.

Есть предложения о том, что не так с моим кодом или как я могу это исправить?

1 Ответ

0 голосов
/ 05 апреля 2011

IE-6-8 может не понравиться висячая запятая в dataIndex: 'open_amount', (и любые другие синтаксические ошибки, которые FF / Chrome простит)

Можете ли вы опубликовать скриншот того, что вы видите в FF / Chrome?

Ваш код может быть немного упрощен. например Просто используйте ArrayStore вместо комбинации считывателя, прокси, записи, магазина

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