Extjs mvc problems

Question

i'm trying to recreate the MVC model of their simple example but i'm having the following problem. This is my grid declaration

Ext.define('MCMS.view.items.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.itemsList',
title : lang.items,
store: 'Items',
loadMask: true,
columns: [
        {header: "#ID", width: 60, dataIndex: 'id', sortable: true},
        {header: "Title", width: 250, dataIndex: 'title', sortable: true},
        {header: "Availability", width: 60, dataIndex: 'active', sortable: true},
        {header: "Category", width: 200, dataIndex: 'category',sortable:false,renderer: function(value, metaData, record, rowIndex, colIndex, store) {                          
            var cat = new Array;
            Ext.each(value, function(person, index) {
                cat.push('<a href="#showCat" rel="'+ this.categoryid + '">' + this.category + '</a>');
            });
            return cat.join(' , '); }},
],
bbar : Ext.create('Ext.PagingToolbar', {
    store: 'Items',
    pageSize: 5,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: "No topics to display",
}),

});

I'm getting a very generic error of the type The following classes are not declared even if their files have been loaded: 'MCMS.view.items.List'. Please check the source code of their corresponding files for possible typos: 'app/view/items/List.js'" When i remove the bbar section it works just fine. My controller looks like Ext.define('MCMS.controller.Items', { extend: 'Ext.app.Controller',

stores: ['Items'],

models: ['Item'],

views: ['items.Edit', 'items.List','items.itemsTabs'],

refs: [
    {
        ref: 'itemsPanel',
        selector: 'panel'
    }
],

init: function() {
    this.control({
        'viewport > itemsTabs itemsList dataview': {
            itemdblclick: this.editItem
        },
        'itemEdit button[action=save]': {
            click: this.updateItem
        }
    });
},

editItem: function(grid, record) {
    var edit = Ext.create('MCMS.view.items.Edit').show();

    edit.down('form').loadRecord(record);
},

updateItem: function(button) {
    var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
    this.getItemsStore().sync();
}

});

Answer 1

Rename 'Ext.PagingToolbar' to 'Ext.toolbar.Paging'

If that doesn't work, try xtype based config like this -

bbar : {
    xtype:'pagingtoolbar'
    store: 'Items',
    pageSize: 5,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: "No topics to display",
}