PDA

View Full Version : Unable to add items in toolbar in gridpanel



LostInExtjs
17 Dec 2012, 11:56 PM
Hi ,

I am trying to add pagination as well as combobox in the toolbar.
My problem is when I use tbar.add(combo) ,combo box is coming next to pagination while I want to put the combobox under pagination i.e in a new row.
Please let me if that is achievable.

friend
18 Dec 2012, 7:39 AM
A Grid's dockedItems collection can contain multiple items, where the dock attribute of each item allows you to specify top, right, left or bottom. I typically dock the pagingtoolbar at the bottom of the grid and any other custom components at the top of the grid:



var xx = Ext.create('Ext.window.Window', {
height: 300,
layout: 'fit',
width: 400,
items: [{
xtype: 'grid',
columns: [{
header: 'Last Name', dataIndex: 'lastName', sortable: true, width: 100
},{
header: 'First Name', dataIndex: 'firstName', sortable: true, width: 100
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'combobox',
displayField: 'label',
emptyText: 'Select Something...',
queryMode: 'local',
store: {
fields: [{
name: 'label', type: 'string'
},{
name: 'someValue', type: 'string'
}],
data: [{
label: 'Option 1', value: '1'
},{
label: 'Option 2', value: '2'
}]
},
valueField: 'someValue'
}]
},{
xtype: 'pagingtoolbar',
dock: 'bottom'
}],
store: {
fields: [{
name: 'lastName', type: 'string'
},{
name: 'firstName', type: 'string'
}],
data: [{
lastName: 'Smith', firstName: 'Tom'
},{
lastName: 'Thompson', firstName: 'Rivera'
}]
}
}]
}).show();

LostInExtjs
20 Dec 2012, 4:44 AM
Hi friend,

Thanks a lot for sharing the info,it helped :)