PDA

View Full Version : The case of the missing paging toolbar



discmode
13 Mar 2011, 9:41 AM
Good morning,

I created a grid with a paging toolbar, and when I had it working as planned I created a grid class and registered an xtype. But when I add the xtype to a viewport, the grid populates but the paging toolbar is mysteriously absent. I've spent a few hours on this problem and I'm sure it's something completely obvious I've been overlooking. Below is the grid class and the calling function, with most of the columns and fields excluded.

I really would appreciate another set of eyes. Thanks!




Ext.ns('NAPP.gridpanel');

NAPP.gridpanel.MainGridPanel = Ext.extend(Ext.grid.GridPanel, {
columns: [
{
header: "row", dataIndex: 'row', width: 30, sortable: false
},

{
header: "rep", dataIndex: 'rep', width: 125, sortable: true
}
],

viewConfig: {
bbar: new Ext.PagingToolbar({
store: this.buildStore,
pageSize: 20,
displayInfo: true
})
},

initComponent: function () {
this.store = this.buildStore();
NAPP.gridpanel.MainGridPanel.superclass.initComponent.call(this);
},

buildStore: function () {
var cookieUtil = Ext.util.Cookies;
var uid = parseInt(cookieUtil.get("ud"));
var scd = parseInt(cookieUtil.get("scd"));
return {
xtype: 'directstore',
directFn: Direct.Grid.LoadPlan,
paramOrder: ['userid', 'scode', 'sort', 'dir', 'start', 'limit'],
remoteSort: true,
totalProperty: 'total',
autoLoad: { params: { start: 0, limit: 20} },
root: 'data',
baseParams: { userid: uid, scode: scd },
sortInfo: {
field: '0',
direction: 'ASC'
},
fields: [
{
type: 'int',
name: 'row'
},

{
type: 'string',
name: 'rep'
}
]
};
}
});

Ext.reg('maingrid', NAPP.gridpanel.MainGridPanel);
This is the calling function:


buildGridPanel: function () {
return {
xtype: 'maingrid',
itemId: 'mainGrid',
loadMask: true,
frame: true,
height: 300,
width: 400
};
}

discmode
13 Mar 2011, 10:46 AM
I made changes to the code and the paging toolbar loads, but it's not connecting to the store. Any ideas why it's not reading the store?



Ext.ns('NAPP.gridpanel');

NAPP.gridpanel.MainGridPanel = Ext.extend(Ext.grid.GridPanel, {
columns: [
{
header: "row", dataIndex: 'row', width: 30, sortable: false
}, ...{
header: "rep", dataIndex: 'rep', width: 125, sortable: true
}
],

initComponent: function () {
this.store = this.buildStore();
NAPP.gridpanel.MainGridPanel.superclass.initComponent.call(this);
},

bbar: new Ext.PagingToolbar({
store: this.store,
pageSize: 20,
displayInfo: true,
emptyMsg: 'no records'
}),

buildStore: function () {
var cookieUtil = Ext.util.Cookies;
var uid = parseInt(cookieUtil.get("ud"));
var scd = parseInt(cookieUtil.get("scd"));
return {
xtype: 'directstore',
directFn: Direct.Grid.LoadPlan,
paramOrder: ['userid', 'scode', 'sort', 'dir', 'start', 'limit'],
remoteSort: true,
totalProprty: 'total',
autoLoad: { params: { start: 0, limit: 20} },
root: 'data',
baseParams: { userid: uid, scode: scd },
sortInfo: { field: '0', direction: 'ASC' },
fields: [
{
type: 'int',
name: 'row'
}, ...{
type: 'string',
name: 'rep'
}
]

};
}
});

Ext.reg('maingrid', NAPP.gridpanel.MainGridPanel);

brittongr
13 Mar 2011, 9:31 PM
Try this:

Remove bbar property and assign it inside initComponent()


initComponent: function () {
this.store = this.buildStore();
Ext.apply(this,
{
bbar: new Ext.PagingToolbar({
store: this.store,
pageSize: 20,
displayInfo: true,
emptyMsg: 'no records'
})
};
NAPP.gridpanel.MainGridPanel.superclass.initComponent.call(this);
}

discmode
14 Mar 2011, 9:54 PM
Greivin,

Thank you for taking the time to respond to me. Sometimes I get so wrapped up in a problem I'm unable to see the solution. An extra set of eyes always helps!

brittongr
15 Mar 2011, 7:52 AM
That's so true...