Search code examples
extjsextjs6-modernextjs6.5

Cannot bind store on Ext.grid.PagingToolbar Extjs


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?


Solution

  • 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.