EXTJS form and grid

EXTJS :)
example :

form :

var simple = new Ext.FormPanel({
     labelWidth: 75, // label settings here cascade unless overridden
     url:'save-form.php',
     frame:true,
     title: 'Simple Form',
     bodyStyle:'padding:5px 5px 0',
     width: 350,
     defaults: {width: 230},
     defaultType: 'textfield',

     items: [{
             fieldLabel: 'First Name',
             name: 'first',
             allowBlank:false
         },{
             fieldLabel: 'Last Name',
             name: 'last'
         },{
             fieldLabel: 'Company',
             name: 'company'
         }, {
             fieldLabel: 'Email',
             name: 'email',
             vtype:'email'
         }, new Ext.form.TimeField({
             fieldLabel: 'Time',
             name: 'time',
             minValue: '8:00am',
             maxValue: '6:00pm'
         })
     ],

     buttons: [{
         text: 'Save'
     },{
         text: 'Cancel'
     }]
 });

 simple.render(document.body);

grid :






javascript code :

// sample static data for the store
  var myData = [
      ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
      ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
      ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
      ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
      ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
      ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
      ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
      ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
      ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am']
];

// create the data store
  var store = new Ext.data.ArrayStore({
      fields: [
         {name: 'company'},
         {name: 'price', type: 'float'},
         {name: 'change', type: 'float'},
         {name: 'pctChange', type: 'float'},
         {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
      ]
  });
  // manually load local data
  store.loadData(myData);
// create the Grid
  var grid = new Ext.grid.GridPanel({
      store: store,
      columns: [
          {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
          {header: 'Price', width: 75, sortable: true,  dataIndex: 'price'},
          {header: 'Change', width: 75, sortable: true,  dataIndex: 'change'},
          {header: '% Change', width: 75, sortable: true,  dataIndex: 'pctChange'},
          {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
      ],
      stripeRows: true,
      autoExpandColumn: 'company',
      height: 350,
      width: 600,
      title: 'Array Grid',
      // config options for stateful behavior
      stateful: true,
      stateId: 'grid'      
  });

  // render the grid to the specified div in the page
  grid.render('grid-example');

});