EXTJS 4 Render a panel like a messagebox

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.

egerardus egerardus · Accepted Answer · 2012-01-04T17:41:27

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()
    }]
});

EXTJS 4 Render a panel like a messagebox

2 Answers