Question

我从servlet加载json格式的数据。我正在使用分页工具栏进行导航。但网格一次加载所有数据。我该怎么做才能将一部分数据加载到网格中以对grid执行分页控制。请帮助我。 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
});

}）;

Answer 1

你有两个东西用于网格分页总记录和行基于限制和开始然后网格显示总和页面偏移记录。默认显示0到25因为你设置limit = 25和start = 0。

网格加载所有数据，而我在extjs中使用分页工具栏

1 个答案: