Использование панели инструментов пейджинга с панелью сетки

Я застрял в этом месте уже давно. Пожалуйста, помогите мне определить мою ошибку.

Я пытаюсь отобразить данные на панели сетки, и, поскольку данные большие, я также использую панель инструментов пейджинга. Это мой код (я не уверен, но думаю, что проблема в том, что я создаю).

var myData = {
  record: [{
      name: "Record 0",
      column1: "0",
      column2: "0"
    }, {
      name: "Record 1",
      column1: "1",
      column2: "1"
    }, {
      name: "Record 2",
      column1: "2",
      column2: "2"
    },
  ]
};
var fields = [{
    name: 'name',
    mapping: 'name'
  }, {
    name: 'column1',
    mapping: 'column1'
  }, {
    name: 'column2',
    mapping: 'column2'
  }
];
var store = new Ext.data.Store({
  id: 'simpsonsStore',
  fields: ['name', 'column1', 'column2'],
  pageSize: 5, // items per page
  data: myData,
  reader: {
    root: 'record',
    type: 'json'
  }
});
// Column Model shortcut array
var cols = [{
    id: 'name',
    header: "Record Name",
    width: 50,
    sortable: true,
    dataIndex: 'name'
  }, {
    header: "column1",
    width: 50,
    sortable: true,
    dataIndex: 'column1'
  }, {
    header: "column2",
    width: 50,
    sortable: true,
    dataIndex: 'column2'
  }
];
store.load({
  params: {
    start: 0,
    limit: 5
  }
});
// declare the source Grid
var grid = new Ext.grid.GridPanel({
  ddGroup: 'gridDDGroup',
  store: store,
  columns: cols,
  enableDragDrop: true,
  stripeRows: true,
  autoExpandColumn: 'name',
  width: 650,
  height: 325,
  region: 'west',
  title: 'Data Grid',
  selModel: new Ext.grid.RowSelectionModel({
    singleSelect: true
  }),
  dockedItems: [{
      xtype: 'pagingtoolbar',
      store: store, // same store GridPanel is using
      dock: 'bottom',
      displayInfo: true
    }
  ]
});
var displayPanel = new Ext.Panel({
  width: 650,
  height: 300,
  layout: 'column',
  renderTo: Ext.getBody(),
  items: [
    grid
  ],
  bbar: [
      '->', {
      text: 'Reset Example',
      handler: function () {
        gridStore.loadData(myData);
      }
    }
  ]
});

person Ajan    schedule 06.06.2011    source источник
comment
Добро пожаловать в StackOverflow! Когда вы публикуете какой-либо код, вы можете отформатировать его, выбрав его и нажав кнопку {} на панели инструментов редактора. Теперь у вас есть неформатированная часть того, что я исправил в своем предыдущем редактировании.   -  person    schedule 06.06.2011


Ответы (2)


Если вы начнете с лишней запятой в массиве myData.record, это не позволит ему работать.

var myData = {
            record : [
              { name : "Record 0", column1 : "0", column2 : "0" },
              { name : "Record 1", column1 : "1", column2 : "1" },       
              { name : "Record 2", column1 : "2", column2 : "2" }**,**
            ]
    };
person Joseph Lust    schedule 22.06.2011

Вместо DockedItems попробуйте установить панель разбивки на сетку bbar. новый Ext.PagingToolbar ({ pageSize : 20, store : store, displayInfo : true });

person extjs-world.blogspot.com    schedule 24.06.2011