Ext.onReady(function(){ 
  var data=[
  {
    id: 1,
    Name: 'Jack Smith',
    Email: 'j.smith@myemail.com',
    Gender: 'Male',
    Birth_date: '1980-10-25'
  },
  {
    id: 2,
    Name: 'Sally Prince',
    Email: 'sallyprince@college.com.au',
    Gender:'Female',
    Birth_date: '1978-04-10'
  },
  {
    id: 3,
    Name: 'Michael Bond',
    Email: 'bondmichaelbond@yahoo.com.au',
    Gender: 'Male',
    Birth_date: '1985-11-01'
  },
  {
    id: 4,
    Name: 'Lily Main',
    Email: 'wildlily@hotmail.com',
    Gender: 'Female',
    Birth_date: '1986-06-14'
  }
  ];
  var store = new Ext.data.JsonStore({
    data: data,
    fields: ["id","Name","Gender","Email",{
      name: "Birth_date",
      type: "date",
      dateFormat: "Y-m-d"
    }]
  });
  var colM = new Ext.grid.ColumnModel([
        
  {
      header: "Name",
      dataIndex: "Name",
      width: 80,
      sortable: true,
      editor: new Ext.form.TextField()
    }, 
    {
      header: "Gender",
      dataIndex: "Gender",
      width: 50,
      sortable: true,
      editor: new Ext.form.ComboBox(
      {
        transform: "sexlist",
        triggerAction: 'all',
        lazyRender: true
      }
      )
    },
    {
      header: "Birth date",
      dataIndex: "Birth_date",
      width: 80,
      sortable: true,
      renderer: Ext.util.Format.dateRenderer('d-m-Y'),
      editor: new Ext.form.DateField({
        format: 'd-m-Y'
      })
    },
    {
      header: "Email",
      dataIndex: "Email",
      width: 180,
      sortable: true,
      editor:new Ext.form.TextField()
    }
    ]);
  var grid = new Ext.grid.EditorGridPanel({
    renderTo: "hello",
    title: "People",
    height: 150,
    width: 380,
    cm: colM,
    store: store,
    autoExpandColumn: 3,
    clicksToEdit: 1

  });

});
Ext.override(Ext.menu.DateMenu,{
  render : function(){
    Ext.menu.DateMenu.superclass.render.call(this);
    if(Ext.isGecko){
      this.picker.el.dom.childNodes[0].style.width = '178px';
      this.picker.el.dom.style.width = '178px';
    }
  }
});