title: Grid in a border layout in extjs 4.0.0?
body: <p>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. </p>
  
  <p>source code:-</p>
  
  <pre><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()
  
      });
  </code></pre>
  
  <p>Please help me put a grid below the form in the center region of the border layout in extjs 4.0.0</p>