Пейджинг в сетке extjs

Question

У меня есть html-страница с div id="grid-example".

Я передал на JS файл содержит, как следующий код

Ext.onReady(function() { 

var myData = [ 
    ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], 
    ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], 
    ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
    ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'], 
    ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'], 
    ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'], 
    ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'], 
    ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'], 
    ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'], 
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'], 
    ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'], 
    ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'], 
    ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'], 
    ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'], 
    ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'], 
    ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'], 
    ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'], 
    ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'], 
    ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'], 
    ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'], 
    ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'] 

]; 

// create the data store 
var store = Ext.create('Ext.data.ArrayStore', { 

    fields: [ 
     { name: 'company' }, 
     { name: 'price', type: 'float' }, 
     { name: 'change', type: 'float' }, 
     { name: 'pctChange', type: 'float' }, 
     { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} 
    ], 
    data: myData 

}); 

// create the Grid 
//var pluginExpanded = true; 
var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    stateful: true, 
    stateId: 'stateGrid', 

    columns: [ 
     { 
      text: 'Company', 
      flex: 1, 
      sortable: true, 
      dataIndex: 'company' 
     }, 

     { 
      text: 'Price', 
      width: 75, 
      sortable: true, 
      //renderer: 'usMoney', 
      dataIndex: 'price', 
      menuDisabled: true //it will show/hide menu for sorting. 

     }, 

     { 
      text: 'Change', 
      width: 75, 
      sortable: true, 
      dataIndex: 'change', 
      menuDisabled: true //it will show/hide menu for sorting. 
     }, 

     { 
      text: '% Change', 
      width: 75, 
      sortable: true, 
      dataIndex: 'pctChange' 
     }, 

     { 
      text: 'Last Updated', 
      width: 185, 
      sortable: true, 
      renderer: Ext.util.Format.dateRenderer("d/M/yy"), 
      dataIndex: 'lastChange' 
     }, 

    ], 

     bbar: Ext.create('Ext.PagingToolbar', { 
      store: store, 
      pageSize: 5,    
      displayInfo: true, 
      displayMsg: 'Displaying topics {0} - {1} of {2}', 
      emptyMsg: "No topics to display" 

     }), 

    height: 550, 
    width: 600, 
    title: 'Array Grid', 
    renderTo: 'grid-example', 
    viewConfig: { 
    stripeRows: true 

    } 
}); 

}); 

Я получаю сетку, но подкачки не работает ... пожалуйста, помогите me.` я хочу нет. строк должно быть 5 на страницу.

Answer 1

Попробуйте удалить limit:10 Я не вижу его в конфигурациях Ext.PagingToolbar.

Answer 2

@Amit

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

• начало
• предел
• totalProperty - на читателя
• PAGESIZE

сервер должен обрабатывать начало и предел и PAGESIZE вернуть запрошенные данные и установить общее количество записей в собственность, которая устанавливается в totalProperty (скажем, «totalRecords»).

В случае, если вы ищете пагинацией с данными в памяти, вы можете обратиться к http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5 или ссылаться на примеры кода в вашей скачанной папке ExtJS 3.x - примеры/УБ/PagingMemoryProxy.js

Answer 3

pageSize: 5 Конфигурация должна быть в магазине.

Answer 4

Для меня настройка правильных свойств считывателя - вот что он сделал. Затем вам нужно обработать параметры строки запроса start и limit на вашем сервере для выполнения выбора данных. DataSource.Skip(start).Take(limit);

var myStore = Ext.create('Ext.data.Store', { 
    model: 'Book', 
    pageSize: 10, 
    proxy: { 
     type: 'ajax', 
     url: '/api/data', 
     reader: { 
      // sends url?start={number}&limit={number} 
      type: 'json', 
      totalProperty: "results", 
      root: "rows" 
     } 
    }, 
    autoLoad: { params: { start: 0, limit: 10 } } 
}); 

---

resposne, что я хотел бы вернуться из веб-службы совпадают с указанными выше параметрами.

{ 
    "success":"true", 
    "results":100, 
    "rows":[ 
     {"Title":"Book #61","Author":"Some Guy","Year":2010} 
     .... 
     .... 
    ] 
}