Dynamically bind paging toolbar store with Grid store

[nitinnimbalkar20]

How to bind paging toolbar store with grid store dynamically ? how to define a store ie Proxy and reader ?

[mitchellsimoens]

Ext JS 3 or 4?

[nitinnimbalkar20]

Ext js 4

[mitchellsimoens]

I have moved this to the Ext JS 4 Q&A forum for you. Please post in the appropriate forum.

[ero]

I'm not exactly sure what you are after, but I use something like the following to create a grid and associated store based on the user request - you can see where it attaches the paging toolbar.




Ext.define('MyApp.view.List', { extend: 'Ext.grid.Panel',
alias: 'widget.myList',


layout: 'fit',
closable: true,


initComponent: function() {


var path = this.$className.split("."),
module = path[2],
theClass = path[3];


this.columns = Ext.create('MyApp.view.' + module + '.' + theClass + 'Columns');


var store = Ext.create('MyApp.store.' + module + '.' + theClass + '');


this.viewConfig = { loadMask: false };


this.dockedItems = [{
xtype: 'pagingtoolbar'
,store: store
}];


Ext.apply(this, {
store: store
});


this.callParent(arguments);
}




});

[Izhaki]

Perhaps this could help:



Ext.define('BS.view.admin.pages.UsersGrid' ,
{
extend: 'Ext.grid.Panel',
alias: 'widget.users-grid',


store: 'Users',


initComponent: function()
{
this.callParent();
this.getDockedComponent('user-pages').bindStore(this.store);
},

hideHeaders: true,


columns: [{
dataIndex: 'username',
width: 100,
text: 'Username'
},{
dataIndex: 'firstName',
flex: 1,
text: 'First Name',
renderer: function (value, metaData, record)
{
return value + ' <b>' + record.get('surName') + '</b>';
}
}],

dockedItems: [{
id: 'user-pages',
xtype: 'pagingtoolbar',
dock: 'bottom',
displayInfo: true,
displayMsg: 'Displaying user {0} - {1} of {2}',
emptyMsg: "No users to display",
}],
});