如何在 extjs 网格中应用导航

Question

我想在网格中一次只加载 25 行。单击下一步按钮后，应添加接下来的 25 行。网格中的数据采用 json 格式，来自 servlet。我正在从servlet获取json数据。但我只想加载特定部分。 如何实施请帮助我。

    Ext.require([
    'Ext.data.*',
    'Ext.grid.*'
     ]);
    Ext.onReady(function(){
    Ext.define('Book',{
        extend: 'Ext.data.Model',
        fields: [
             'sno',
            'name', 'salary'
        ]
    });
    // create the Data Store
    var store = Ext.create('Ext.data.Store', {
        model: 'Book',
        autoLoad: true,
        proxy: {
            // load using HTTP
            type: 'ajax',
            //url: 'http://localhost:8080/sampleweb/AccessServlet',
            url: 'http://localhost:8080/sampleweb/DataServlet',
            // the return will be XML, so lets set up a reader
            reader: {
                type: 'json',
                root:'jsonObj'
            }
        }
    });
       var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');
       var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    });
    // create the grid
    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columns: [
            {text: "sno",width:140, dataIndex: 'sno', sortable: true
            ,editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 1,
                maxValue: 150000
            }},
            {text: "name", width: 180, dataIndex: 'name', sortable: true,
            editor: {
                xtype: 'combobox',
                typeAhead: true,
                triggerAction: 'all',
                selectOnTab: true,
                store: [
                    ['Shade','Shade'],
                    ['Mostly Shady','Mostly Shady'],
                    ['Sun or Shade','Sun or Shade'],
                    ['Mostly Sunny','Mostly Sunny'],
                    ['Sunny','Sunny']
                ]}},
            {text: "salary", width: 180, dataIndex: 'salary', sortable: true,
            editor: {
                xtype: 'numberfield',
                allowBlank: false,
                minValue: 1,
                maxValue: 1000000
            }},
            {
                xtype: 'actioncolumn',
                width: 30,
                sortable: true,
                menuDisabled: true,
                items: [{
                    icon: 'http://etf-prod-projects-1415177589.us-east-1.elb.amazonaws.com/trac/docasu/export/2/trunk/client/extjs/shared/icons/fam/delete.gif',
                    handler: function(grid, rowIndex, colIndex) {
                       store.removeAt(rowIndex);
                    }
                }]
            }
        ],
        renderTo:'example-grid',
        width: 560,
         plugins: [rowEditing],
        height: 400
    });
});

Answer 1

你需要分页，看看Sencha提供的例子。基本上，您在前端所要做的就是添加和配置一个分页工具栏，框架会处理其余部分。真正的工作是在服务器端，您的 servlet 必须解析start和limit参数，将它们包含在查询中并返回适当的数据。这是正确合并分页工具栏后 ExtJS 生成的请求的示例：

{
//your request data
..
start: 0,
limit: 25
}

此请求将获取前 25 行。当然，您可以在应用程序中配置行数。

Answer 2

你只需要添加

limitParam : 10,
pageParam  :'pageNumber',

在存储的代理属性中。如果要加载特定页面，请使用

grid.getStore().currentPage = The Page Number You Want To Load;

在加载商店之前。