how to put a grid inside the center region of border layout along with the form in extjs version 4.0.0. I am able to put the form but not the grid along with it. 

source code:-

```
Ext.onReady(function() {

    var viewport = Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'border',
        items: [{
            region: 'west',
            width: 200,
            collapsible: true,
            collapsed: true,
            html: 'West Region'
        }, {
            region: 'center'
        }, {
            region: 'east',
            width: 200,
            collapsible: true,
            collapsed: true,
            html: 'East Region'
        }, {
            region: 'south',
            height: 50,
            html: 'South Region'
        }]
    });

    var form = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: 'User Form',
        height: 130,
        align: 'center',
        width: 280,
        bodyPadding: 10,
        defaultType: 'textfield',
        items: [
            {
                fieldLabel: 'First Name',
                name: 'firstName'
            },
            {
                fieldLabel: 'Last Name',
                name: 'lastName'
            }
        ],

        buttons: [{
            text: 'Submit',
            handler    : function () { alert("successfully submitted");}
        }]

});
    viewport.layout.regions.center.add(form);
    // using add()
    form.show()

    });

```

Please help me put a grid below the form in the center region of the border layout in extjs 4.0.0