How to add a grid panel in a form panel?

Question

Below is my ExtJs 3.2 code for adding a grid panel in a form panel.Is not working.

function test(){//will be called after clicking on save, added now
    var addForm="";
    var addGrid="";

    addForm=new Ext.FormPanel({
        frame: true,
        items:[
               new Ext.form.FormPanel({
                   title:'Select Start Point',
                   id:'startpoints',
                   autoHeight: false,
                   frame: true,
                   monitorValid: true,

                   items:[{
                       xtype: 'combo',
                       fieldLabel:'Start Point',
                       width:150,
                       name: 'startpoint',
                       emptyText:'Select Start Point',
                       store:pointstore,
                       mode: 'local',
                       displayField:'start_point',
                       valueField:'start_point',
                       typeAhead: true,
                       triggerAction: 'all',
                       selectOnFocus:true,
                       forceSelection: true,
                       allowBlank:false


                   }],

               }),

               new Ext.form.FormPanel({
                   title:'Select End Point',
                   id:'endpoints',
                   autoHeight: false,
                   frame: true,
                   monitorValid: true,

                   items:[{
                       xtype: 'combo',
                       fieldLabel:'End Point',
                       width:150,
                       name: 'waypoint',
                       emptyText:'Select End Point',
                       store:pointstore,
                       mode: 'local',
                       displayField:'way_point',
                       valueField:'way_point',
                       typeAhead: true,
                       triggerAction: 'all',
                       selectOnFocus:true,
                       forceSelection: true,
                       allowBlank:false


                   }],

               }),
                   //way point combo
                   new Ext.form.FormPanel({
                       title:'Select Way Point',
                       id:'waypoints',
                       autoHeight: false,
                       frame: true,
                       monitorValid: true,

                       items:[{
                       xtype: 'combo',
                           fieldLabel:'Way Point',
                           width:150,
                           name: 'waypoint',
                           emptyText:'Select Way Point',
                           store: pointstore,
                           mode: 'local',
                           displayField:'way_point',
                           valueField:'way_point',
                           typeAhead: true,
                           triggerAction: 'all',
                           selectOnFocus:true,
                           forceSelection: true,
                           allowBlank:false


                       }],
                       buttonAlign: 'center',
                       buttons:[{
                           text:'Add'


                       }]

                   }),

             ],//end of item



           buttons:[{
               text: 'Ok',
               //logic for Ok

           },{
               text:'Cancel',
              //logic for Cancel 
               handler: function(){
                    addWindow.close();

                }

           }]

    });//end of Form Pannel

    var grid_panel=new Ext.grid.EditorGridPanel({
        id: 'grid',
        border:true,
        frame:true,
        height:150,
        title:'Way Point Selection',
        hideHeaders:true,
        store: pointstore


    });

        addWindow=new Ext.Window({
        title: 'Enter Details',
        closable: false,
        modal:true,
        width: 295,
        autoHeight: true,
        items: [addForm],
            items:[grid_panel]
}).show();


}//end of function test

I am getting a window, if I comment "items:[grid_panel]". I want to add a grid panel just after "Add" button so that each time I click on add,the way points should get added in it.How do I do it.Please give me the code.I have been through some similar questions but were not useful. I could not post image because stackexchange dint allow me :-(

Answer 1

 Ext.create('Ext.form.Panel', {
            bodyPadding: 10,
            width: 200,
            title: 'Languages',
            items: grid,
            renderTo: Ext.getBody()
        });

try this..

Answer 2

There are lots of thing you must learn.. You can render group of items in a single panel. Use like items:[{xxx},{xxxx},..] change the window coding like this

   addWindow=new Ext.Window({
    title: 'Enter Details',
    closable: false,
    modal:true,
    width: 295,
    autoHeight: true,
    items: [{addForm},{grid_panel}],
   });