View Full Version : How to access pagingToolbar in initComponent method?

20 Sep 2013, 6:01 AM
Hi, at this point I create a custom defined GridPanel dynamically like this :

new Base.GridPanel({id: '@BFE.Frontend.PendingTask.GridPanel.ID',
title: '@BFE.Frontend.PendingTask.GridPanel.Title',
storeFields: @Html.Raw(Model.PendingTasksModel.GetStoreModel()),
columns: @Html.Raw(Model.PendingTasksModel.GetColumnModel()),
proxyType: 'ajax',
proxyUrl: '/Task/GetPendingTaskData',
{ xtype: 'toolbar',
dock: 'top',
{ xtype: 'textfield', emptyText: 'Case ID', width: 90 },
{ xtype: 'button', text: 'View Case' },
{ xtype: 'button', text: 'Refresh List' }
{xtype: 'pagingtoolbar',
dock: 'bottom',
store: this.store}


However, I need to set the pagingToolbar store to the store of the GridPanel, otherwise it doesn't work.

initComponent: function()
this.store.fields = this.storeFields;
this.store.proxy.type = this.proxyType;
this.store.proxy.url = this.proxyUrl;

addToComponentManager(this, this.getXType());

However, the only way I found to do this so far is this :

this.dockedItems[1].store = this.store;

which is pretty ugly. Do you know of any nicer ways?

20 Sep 2013, 6:49 AM
From the online docs:

in the comment on this item, there is a reply:

Dmitry Chernov
Create bbar at the initComponent function of MVC definition:

Ext.define('myList', {
extend: 'Ext.grid.Panel',
...store: 'myStore',
initComponent: function () {
this.bbar = Ext.create('Ext.PagingToolbar', {
store: this.getStore(), // "this" is already defined when the code is executed
displayInfo: true,
displayMsg: '{0} - {1} of {2}',
emptyMsg: "No data to display"

20 Sep 2013, 6:57 AM
OK, but what happens if I don't want every GridPanel to have a pagingtoolbar?

20 Sep 2013, 2:58 PM
Add a condition:

if (this.useFoo) {
this.bbar = new Foo();