EXTJS 4 Render a panel like a messagebox - extjs

Question

What I am trying to accomplish is to add information to a datagrid, then what I have its a button 'add', when I click it, it will show a panel where I can add all the information needed to fill the datagrid.
The panel to add the info should be shown like this:
http://img94.imageshack.us/img94/2662/emailhelp.jpg
The one above I have done it with a messagebox like this:
Ext.MessageBox.show({
title : 'Email Information',
msg : 'your email:',
width : 300,
buttons : Ext.MessageBox.OKCANCEL,
multiline : true,
fn : addEmailInfo,
animateTarget : 'btn_add'
});
Then what I want is something similar but with a panel, in which I could add more components.
I've been searching but I havent found anything, thank you in advance.

Answer 1

I've looked, but there is not a predefined ExtJS method to open a grid row in a form panel (should be).
There is an in-line row editing extension for ExtJS grids which works really well. Just double click a grid row and the record opens editable fields for any data you set as editable. Some more details on implementing it are here.
If that won't work-out for you, you would have to create a new Ext.window and add your own form panel / fields into it. Create an onclick listener in the grid which
populates the form / fields with the selected record data and
shows the window (myWindow.show()).
You would also have to write a method to save your edited or newly created record into the datastore (using myDataStore.set([field],[value])) also a line to commit it to the database (if that is where you are getting data).
To answer your question more exactly, a new window that you can add other fields to could be done like this:
myWindow = Ext.create('Ext.window.Window', {
id: 'recordWindow',
title: 'New Particle',
resizable: false,
closable: false,
width: 605,
minWidth: 300,
minHeight: 200,
y: 150,
layout: 'fit',
plain:true,
items: myFormPanel, //your form or fields would go here
buttons: [{
text: 'Save',
handler: saveRecord()
},{
text: 'Cancel',
handler: resetRecordWindow()
}]
});

Answer 2

How about this example? It shows a grid with an edit form to the right of it.
If you don't like that than you can wrap the form into the window component like Geronimo suggested.
http://docs.sencha.com/ext-js/4-0/#!/example/form/form-grid.html