MVC and sliding pager

[teddy11]

I am using mvc to create a tabbed grid with a sliding pager on the bottom bar. My problem is: I can not click on the sliding pager. I am stuck on the first page. Attached you will find my code, Please tell me what I am doing wrong:

"app.js"
Ext.Loader.setConfig({enabled:true});
Ext.application({

name: 'AM',
appFolder: 'app',
controllers: ['TabsController'],
requires: [
'Ext.grid.*',
'Ext.data.*',
'Ext.tab.*',
'Ext.toolbar.Paging'
],
launch: function() {
}

});


Here is what my controller looks like(models,stores,views list emptied ):

Ext.define('AM.controller.TabsController', {
extend: 'Ext.app.Controller',
models: [..],
stores: [...],
views: [...],

init: function() {
Ext.create('Ext.tab.Panel', {
//layout: 'fit',
height: 700,
width: 620,

activeTab: 0,
items: [
{xtype: 'one'},
{xtype: 'two'},
{xtype: 'three'},
{xtype: 'four'}
],
//bbar: Ext.create('Ext.toobar.Paging', {
bbar : {
xtype:'pagingtoolbar',
pageSize: 50,
store: this.stores,
displayInfo: true,
plugins: Ext.create('Ext.ux.SlidingPager', {})
},//),
renderTo: document.body
});
}
});



Here is a picture of what the bottom bar looks like:

[mitchellsimoens]

Paging toolbar is meant to work with one store but looks like you are giving it one store.

[teddy11]

ok... I was hoping
store: this.storeswill work. Clearly it doesn't.
Is there a way to make this work?
I tried adding all the stores (below)and it only worked for the first store.


store: 'store1',
store: 'store2',

[mitchellsimoens]

Of course it only worked for the last store given, properties of an object must be unique and last one will overwrite any that come before.