Question

{ extend: 'Ext.grid.Panel',
    autoScroll: true,
    layout: 'fit',
    padding: '5 5 5 0',
    width: 450,
    selModel: {
        mode: 'MULTI',
        pruneRemoved: false
    },
    config: {
        labels: {},
        defSel: {},
        keepSelections: true
    },
    initComponent: function() {
        this.title = this.labels.MEAS_LIST_PANEL_TITLE;

        var measStore = Optima.store.Measurement.create();

        this.store = measStore;

        this.columns = [{
            text: 'list',
            sortable: true,
            dataIndex: 'name',
            flex: 1
        }, {
            text: 'unit'
            sortable: true,
            dataIndex: 'unit',
            flex: 1
        }, {
            text: 'sample'
            sortable: true,
            dataIndex: 'sampletime',
            flex: 1
        }, {
            text: 'desc',
            sortable: true,
            id: 'desc',
            dataIndex: 'desc',
            flex: 1
        }];

        this.bbar = {
            xtype: 'pagingtoolbar',
            pageSize: 25,
            store: measStore,
            displayInfo: false
        };

        this.callParent(arguments);
    }
});

Answer 1

您应该使用buffered store。

    Ext.create('Ext.data.BufferedStore', {
        storeId: 'exampleStore',
        autoLoad : true,
        pageSize : 100,
        fields: ['userId', 'id', 'title'],
        proxy : {
            type        : 'ajax',
            ...
        }
    });

然后摆脱分页工具栏，因为缓冲存储将根据页面大小自动分页。

Answer 2

BufferedStore维护一个稀疏填充的页面映射，对应于一个非常大的服务器端数据集。

有关详情，请参阅ExtJS文档BufferedStore

我创建了一个sencha fiddle演示，它将展示它是如何工作的。

Ext.define('ForumThread', {//Define model
    extend: 'Ext.data.Model',
    fields: [
        'title', 'forumtitle', 'forumid', 'username', {
            name: 'replycount',
            type: 'int'
        }, {
            name: 'lastpost',
            mapping: 'lastpost',
            type: 'date',
            dateFormat: 'timestamp'
        },
        'lastposter', 'excerpt', 'threadid'
    ],
    idProperty: 'threadid'
});

// create the Data Store
var store = Ext.create('Ext.data.BufferedStore', {
    model: 'ForumThread',
    remoteGroup: true,
    leadingBufferZone: 300,
    pageSize: 50,
    proxy: {
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an Ajax proxy would be better
        type: 'jsonp',
        url: 'https://www.sencha.com/forum/remote_topics/index.php',
        reader: {
            rootProperty: 'topics',
            totalProperty: 'totalCount'
        },
        // sends single sort as multi parameter
        simpleSortMode: true,
        // sends single group as multi parameter
        simpleGroupMode: true,

        // This particular service cannot sort on more than one field, so grouping === sorting.
        groupParam: 'sort',
        groupDirectionParam: 'dir'
    },
    sorters: [{
        property: 'threadid',
        direction: 'ASC'
    }],
    autoLoad: true,
    listeners: {

        // This particular service cannot sort on more than one field, so if grouped, disable sorting
        groupchange: function (store, groupers) {
            var sortable = !store.isGrouped(),
                headers = grid.headerCt.getVisibleGridColumns(),
                i, len = headers.length;

            for (i = 0; i < len; i++) {
                headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
            }
        },

        // This particular service cannot sort on more than one field, so if grouped, disable sorting
        beforeprefetch: function (store, operation) {
            if (operation.getGrouper()) {
                operation.setSorters(null);
            }
        }
    }
});

function renderTopic(value, p, record) {
    return Ext.String.format(
        '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
        value,
        record.data.forumtitle,
        record.getId(),
        record.data.forumid
    );
}

var grid = Ext.create('Ext.grid.Panel', {
    width: '100%',
    height: 500,
    collapsible: true,
    title: 'Buffer grid example with buffer store',
    store: store,
    loadMask: true,
    selModel: {
        pruneRemoved: false
    },
    viewConfig: {
        trackOver: false
    },
    features: [{
        ftype: 'grouping',
        hideGroupedHeader: false
    }],
    columns: [{
        xtype: 'rownumberer',
        width: 50,
        sortable: false
    }, {
        tdCls: 'x-grid-cell-topic',
        text: "Topic",
        dataIndex: 'title',
        flex: 1,
        renderer: renderTopic,
        sortable: true,
        groupable: false,
        cellWrap: true,
        filter: true
    }, {
        text: "Author",
        dataIndex: 'username',
        width: 100,
        hidden: true,
        sortable: true,
        groupable: false
    }, {
        text: "Replies",
        dataIndex: 'replycount',
        align: 'center',
        width: 70,
        sortable: false,
        filter: {
            type: 'numeric'
        }
    }, {
        id: 'last',
        text: "Last Post",
        dataIndex: 'lastpost',
        width: 130,
        renderer: Ext.util.Format.dateRenderer('d-M-Y h:i A'),
        sortable: true,
        groupable: false
    }],
    renderTo: Ext.getBody()
});

如何在extjs中使用bufferedrenderer而不是分页工具栏

2 个答案: