0

我正在从 json 格式的 servlet 加载数据。我正在使用分页工具栏进行导航。但是网格一次加载所有数据。我该怎么做才能将部分数据加载到网格中以在网格上执行分页控制。请帮助我。Ext.require(['Ext.data. ','Ext.grid. ']);

Ext.onReady(function(){
Ext.define('Book',{
    extend: 'Ext.data.Model',
    fields: [
        // set up the fields mapping into the xml doc
        // The first needs mapping, the others are very basic
         'sno',
        'name', 'salary'
    ]
});

Ext.Loader.setConfig({
enabled : true
});

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    model: 'Book',
    pageSize:25,
    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',
             totalProperty: 'totalcount'
        }
    }
});

store.load({
   params:{
       start:0,    
       limit: 25
   }
});
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);
                }
            }]
        }
    ],



    dockedItems: [
    {
        xtype: 'pagingtoolbar',     
        displayInfo: true,
                    pageSize:25,
        dock: 'bottom',
        store: store            
    }
],

             viewConfig: {
    forceFit: true
},
     /*dockedItems: [{
        xtype: 'toolbar',
        items: [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function(){
                // empty record
                store.insert(0, new Book());
                rowEditing.startEdit(0, 0);
            }
        }, ]
    }],*/
    renderTo:'example-grid',
    width: 560,
     plugins: [rowEditing],
    height: 400
});

});

4

1 回答 1

1

您已经为网格分页总记录和基于限制的行渲染了两件事，然后网格显示总和页面偏移记录。默认情况下显示 0 到 25，因为您设置了 limit=25 和 start =0。

于 2013-09-17T10:44:24.110 回答