extjs - Grid Rendering Problem -

i have following code in extjs , while rendering giving me error in chrome

uncaught typeerror: cannot read property 'id' of undefined   /*!  * ext js library 3.3.0  * copyright(c) 2006-2010 ext js, inc.  * licensing@extjs.com  * http://www.extjs.com/license  */ ext.chart.chart.chart_url = 'extjs/resources/charts.swf';   ext.onready(function(){     function change(val){         if(val > 0){             return '<span style="color:green;">' + val + '</span>';         }else if(val < 0){             return '<span style="color:red;">' + val + '</span>';         }         return val;     }     function pctchange(val){         if(val > 0){             return '<span style="color:green;">' + val + '%</span>';         }else if(val < 0){             return '<span style="color:red;">' + val + '%</span>';         }         return val;     }      var url = {         local:  'grid-filter.json',  // static data file         remote: 'grid-filter.php'     };     var encode = false;     // configure whether filtering performed locally or remotely (initially)     var local = false;     var store = new ext.data.jsonstore({         // store configs         autodestroy: true,         url: (local ? url.local : url.remote),         remotesort: false,         sortinfo: {             field: 'id',             direction: 'asc'         },         storeid: 'mystore',          // reader configs         idproperty: 'id',         root: 'data',         totalproperty: 'total',         fields: [{             name: 'id'         }, {             name: 'p_name'         }, {             name: 'status',             type: 'string'         }, {             name: 'company',             type: 'string',         }]     });      var createcolmodel = function (finish, start) {         var columns = [{             dataindex: 'id',             header: 'id',             // instead of specifying filter config specify filterable=true             // use store's field's type property (if type property not             // explicitly specified in store config 'auto'             // gridfilters assume 'stringfilter'             filterable: true             //,filter: {type: 'numeric'}         }, {             dataindex: 'p_name',             header: 'project',             id: 'company',             filter: {                 type: 'string'                 // specify disabled disable filter menu                 //, disabled: true             }         }, {             dataindex: 'status',             header: 'status',             filter: {                 type: 'string'  // specify type here or in store fields config             }         }, {             dataindex: 'company',             header: 'company',             filter: {                 type: 'string'                 //options: ['small', 'medium', 'large', 'extra large']                 //,phpmode: true             }         }, {             dataindex: 'visible',             header: 'visible',             filter: {                 //type: 'boolean'  // specify type here or in store fields config             }         }];          return new ext.grid.columnmodel({             columns: columns.slice(start || 0, finish),             defaults: {                 sortable: true             }         });     };      //------- end ------//      //create editor      // create grid       var grid = new ext.grid.gridpanel({         store: store,         plugins:[editor],         columns: [sm,             {         id:'company',         header: "project",         width: 70,          sortable: true,         dataindex: 'p_name',         editor: {             xtype: 'textfield',             allowblank: false         },         filter: {                 type: 'string'                 //options: ['small', 'medium', 'large', 'extra large']                 //,phpmode: true             }         },         {             header: "status", width: 75, sortable: true,  dataindex: 'status',             valuefield: "name",displayfield: "name", triggeraction: "all",             filter: {                 type: 'string'                 //options: ['small', 'medium', 'large', 'extra large']                 //,phpmode: true             },             editor: {                 xtype: 'combo',                 allowblank: false             }},             {header: "company", width: 175, sortable: true, renderer: change, dataindex: 'company',filter: {                 type: 'string'                 //options: ['small', 'medium', 'large', 'extra large']                 //,phpmode: true             },editor: {                 xtype: 'textfield',                 allowblank: false                  },}         ],         /*------*/         sm: sm,         /*------*/          striperows: true,         autoexpandcolumn: 'company',         height:200,         width:905,         frame:true,         title:'sliding pager',         plugins: [filters],         autoexpandcolumn: 'company',         listeners: {             render: {                 fn: function(){                     store.load({                         params: {                             start: 0,                             limit: 50                         }                     });                 }             }         },         bbar: new ext.pagingtoolbar({             pagesize: 10,             store: store,             displayinfo: true         })     });      var filters = new ext.ux.grid.gridfilters({         // encode , local configuration options defined easier reuse         encode: encode, // json encode filter query         local: local,   // defaults false (remote filtering)         filters: [{             type: 'numeric',             dataindex: 'id',               disabled: false         }, {             type: 'string',             dataindex: 'company',             disabled: false         }, {             type: 'string',             dataindex: 'p_name',               disabled: false         }, {             type: 'string',             dataindex: 'status',               disabled: false         },]     });       var sm = new ext.grid.checkboxselectionmodel();     var editor = new ext.ux.grid.roweditor({      //  savetext: 'update'     });     grid.render('grid-example');     store.load({params:{start:0, limit:10} });     //--------------- end ------------// }); 

my html code :

<form id="myform" name="myform"> <table>     <tr>         <td height="" valign="top" colspan="3">             <div id="grid-example">             </div>         </td>     </tr> </table> </form> 

please advise problem?

looking @ quickly, noticed have "id" capitalized "id" in 1 place lowercase in every other instance. start fixing , attempting run again.

if not fix it, possibly try using other "id"? mainly, wanted make aware of capitalization.

var columns = [{         dataindex: 'id',         header: 'id',         // instead of specifying filter config specify filterable=true         // use store's field's type property (if type property not         // explicitly specified in store config 'auto'         // gridfilters assume 'stringfilter'         filterable: true         //,filter: {type: 'numeric'}     }