Cannot bind store on Ext.grid.PagingToolbar Extjs

Question

I'm developing a extjs project using 6.5.3 version and modern toolkit but I have a problem trying to implement a dataview with pagingtoolbar, my view has a viewmodel that contains a store with rest proxy, but when I watch the application, the navigator throw the next error:

[E] Ext.mixin.Bindable.applyBind(): Cannot bind store on Ext.grid.PagingToolbar - missing a setStore method.

Uncaught Error: Cannot bind store on Ext.grid.PagingToolbar - missing a setStore method.

Uncaught TypeError: this[binding._config.names.set] is not a function

It's my code:

Ext.define('App.view.qlist', {
    extend: 'Ext.Panel',
    viewModel: 'myViewmodel',
    controller: 'mycontroller',
    items: [{
        xtype: 'dataview',
        cls: 'qcls',
        bind: {
            store: '{allmyquest}'
        },
        itemTpl: questTpl
    }, {
        xtype: 'pagingtoolbar',
        bind: {
            store: '{allmyquest}'
        },
        dock: 'bottom',
        displayInfo: true
    }]
});

Is it the correct form to implement pagination in Extjs Modern toolkit v6.5.3?

As per [Docs](https://docs.sencha.com/extjs/6.5.3/modern/Ext.grid.PagingToolbar.html) A toolbar used for paging in grids. Do not instantiate this class directly. Use the `Ext.grid.plugin.PagingToolbar` config of the Paging Toolbar grid plugin to configure its options. — Narendra Jadhav, Sep 04 '18 at 05:20

score 0 · Answer 1 · answered Sep 04 '18 at 05:09

0

It's the first thing in the docs:

A toolbar used for paging in grids. Do not instantiate this class directly. Use the Ext.grid.plugin.PagingToolbar config of the Paging Toolbar grid plugin to configure its options

answered Sep 04 '18 at 05:09

Evan Trimboli

29,900
6
45
66

score 0 · Accepted Answer · answered Sep 04 '18 at 05:18

0

the documentation provides an example how to do that:

items: [
    Ext.create('Ext.grid.Grid', {
        title: 'DC Personnel',
        store: store,

        plugins: {
            pagingtoolbar: true
        },

        columns: [
            { text: 'First Name', dataIndex: 'fname',  flex: 1 },
            { text: 'Last Name',  dataIndex: 'lname',  flex: 1 },
            { text: 'Talent',     dataIndex: 'talent', flex: 1 }
        ]
    })
]

it's a default toolbar of the grid; therefore one just has to enable the plugin with true.

answered Sep 04 '18 at 05:18

Martin Zeitler

1
19
155
216

Thanks for your answer, i have a question, Is it possible to implement an xtemplate in a grid? – Carlos Ramirez Sep 04 '18 at 15:39
@CarlosRamirez this works by defining a `virtual` store in the `ViewModel` and I guess one can just bind column headers, eventually use a row-template. – Martin Zeitler Sep 04 '18 at 17:06
Martin Zeitler, the solution that i could find was the same list-paging implementation example "http://examples.sencha.com/extjs/6.6.0/examples/kitchensink/?modern#listpaging-list" were use the dataview in list and the plugin for pagging taking into account that is possible have an itemTpl. – Carlos Ramirez Sep 05 '18 at 02:09
@CarlosRamirez the `itemTpl` within a `Grid` is the row-template. the paging plugin should not limit any of that, you just have to combine the configurations, as you may require it; which probably is one of the perks, when using a framework. – Martin Zeitler Sep 05 '18 at 02:28

Cannot bind store on Ext.grid.PagingToolbar Extjs

2 Answers2