ExtJS 3.4 add button at the bottom of a grid - button

Question

I'm new to ExtJS and try to add a button at the bottom of the grid. This button will open a modal dialog to select more persons. I don't know how to add this button after the grid. Do I have to use another component than GridPanel?
Can somebody help me?
The code looks like:
var selectedPersons = [
[1, 'Persnr', 'Name', 'Vorname']
];
var store = new Ext.data.ArrayStore({
fields: [
{name: 'PrsOid', type: 'int'},
{name: 'PersonalNr'},
{name: 'Nachname'},
{name: 'Vorname'}
]
});
store.loadData(selectedPersons);
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
{
id : 'PersonalNr',
header : 'PersonalNr',
width : 100,
sortable : true,
dataIndex: 'PersonalNr'
},
{
header : 'Nachname',
width : 100,
sortable : true,
dataIndex: 'Nachname'
},
{
header : 'Vorname',
width : 100,
sortable : true,
dataIndex: 'Vorname'
}
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
height: 200,
//width: 460,
title: 'Personenauswahl',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
grid.render('gridSelectedPersons');

Answer 1

Do you mean something like a bottom bar ?
var grid = new Ext.grid.GridPanel({
store: store,
columns:
[
....
],
stripeRows: true,
autoExpandColumn: 'PersonalNr',
bbar: new Ext.Toolbar({
renderTo: document.body,
height: 30,
items: [
// begin using the right-justified button container
'->',
{
xtype:'button',
text:'The button',
//makes the button 24px high, there is also 'large' for this config
scale: 'medium'
}
]
})