PDA

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



hermann.s
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',
dockedItems:
[
{ xtype: 'toolbar',
dock: 'top',
items:
[
{ 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());
this.callParent();
}


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?

dawesi
20 Sep 2013, 6:49 AM
From the online docs:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.Paging-cfg-store

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"
});
this.callParent(arguments);
}
});

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

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



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