Show only 10 rows on my Gridpanel

Question

I'm building my first platform using Ext.js, and I'm trying to figure it out how can I specify a limit of rows for my Gridpanel. I would like to show only the last 10 values from a store

At the moment, I'm receiving all the values from a store, and I'm populating the grid with this values,

I could use this:

gridStore.remove(gridStore.getAt(i))

But I can't remove the data from the store because I'm using this store to load some polylines on a map too, so I have to hide the rows instead of removing data from the store.

My Store:

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 }]
});

My Grid

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: [{ ...
        }]
    }
});

Thank you

Sergey Novikov · Accepted Answer · 2017-04-08T20:31:09.387

3

pageSize is property of store, not grid (and you have typo in your code - pageSiz).

I think you can use memory proxy with enablePaging instead of sessionstorage proxy. Also you might need Ext.toolbar.Paging.

Check this fiddle.

edited Apr 08 '17 at 20:31

answered Apr 08 '17 at 20:09

Sergey Novikov

4,096
7
33
59

I am not sure how this hides rows... not all rows are in the store if you use a memory proxy... – Alexander Apr 09 '17 at 07:05
@Alexander, I just guess that this solution can fit topic started needs. In the end we solve business problems rather than specific programming tasks. – Sergey Novikov Apr 09 '17 at 10:49

score 1 · Answer 2 · answered Oct 17 '19 at 06:08

You could also used a chained store, to be sure to not alterate the main store.

In the ViewModel of your page, you could use code like this :

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]);
}

score 0 · Answer 3 · answered Apr 19 '17 at 15:13

0

use pageSize property of store.if you want show only 10 records.

but if you want show last 10 records then you have to pass filter.

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

answered Apr 19 '17 at 15:13

viki

13
7

Show only 10 rows on my Gridpanel

3 Answers3