在我的网格面板上只显示 10 行

Question

我正在使用 Ext.js 构建我的第一个平台，我正在尝试弄清楚如何为我的 Gridpanel 指定行数限制。我只想显示商店的最后 10 个值

目前，我正在从商店接收所有值，并用这些值填充网格，

我可以用这个：

gridStore.remove(gridStore.getAt(i))

但是我无法从存储中删除数据，因为我也在使用该存储在地图上加载一些折线，所以我必须隐藏行而不是从存储中删除数据。

我的商店：

Ext.define('ES.store.Timeline', {
    extend: 'Ext.data.Store',
    alias: 'store.timeline',
    storeId: 'timeline',
    fields: [
        'vid', 'time', 'lat', 'lng', 'address', 'dir', 'vel', 'hidden'
    ],
    pageSize: 500,
    autoSync:true,
    sorters: [
            {
                property: 'time',
                direction: 'DESC'
            }
        ],
    data: {
        query: []},

    proxy: {
        type: 'sessionstorage',
        id: 'sessionTimeline',
        reader: {
            type: 'json',
            rootProperty: 'query'
        }
    },
    filters: [{ property: 'hidden', value: false }]
});

我的网格

Ext.define('ES.view.Layout.Menu.Menu', {

    extend: 'Ext.grid.Panel',
    alias: 'widget.timelineBar',
    controller: 'menu',
    viewModel: 'menu',
    pageSiz: '10',
    id: 'timelineBar',
    autoScroll: true,
    title: 'Timeline',
    store: {
        type: 'timeline'
    },

    columns: {
        border: false,
        defaults: {
            hoverCls: ''
        },

        items: [{ ...
        }]
    }
});

谢谢

Answer 1

pageSize 是商店的属性，而不是网格（您的代码中有错字 - pageSiz）。

我想你可以使用 memory proxy with enablePaging instead of sessionstorage proxy. Also you might need Ext.toolbar.Paging。

检查此 fiddle。

Answer 2

使用 pageSize 属性 of store.if 你只想显示 10 条记录。

但是如果你想显示最后 10 条记录，那么你必须通过过滤器。

filters: [
    function(record) {
        <condition>
        return true/false;
    }
]

Answer 3

您也可以使用连锁店，确保不会改变主店。

在您页面的 ViewModel 中，您可以使用如下代码：

initConfig: function(instanceConfig) {
    var me = this,
        config = {
            stores: {
                MainStore: {
                    storeId: 'MainStore',
                    model: ...,
                    proxy: {
                        ...
                    })
                },
                LastUsed: {
                    autoDestroy: true,
                    source: 'MainStore',
                    // paging doesn't work on chained store
                    filters: [
                        function(record) {
                            let store = me.getStore('LastUsed'),
                                recordIndex = store.getRange().indexOf(record),
                                lastUsedCount = 10;

                            if((recordIndex+1) > lastUsedCount) {
                                return false
                            }
                            return true;
                        }
                    ]
                }
            }
        };
    if (instanceConfig) {
        me.getConfigurator().merge(me, config, instanceConfig);
    }
    return me.callParent([config]);
}

在我的网格面板上只显示 10 行

Show only 10 rows on my Gridpanel

extjs

extjs5