Grid Rendering Problem

I have the following code in extjs and while rendering it is giving me error in 开发者_运维问答chrome is

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 is 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 just specify filterable=true
            // to use store's field's type property (if type property not
            // explicitly specified in store config it will be 'auto' which
            // GridFilters will assume to be 'StringFilter'
            filterable: true
            //,filter: {type: 'numeric'}
        }, {
            dataIndex: 'p_name',
            header: 'Project',
            id: 'company',
            filter: {
                type: 'string'
                // specify disabled to disable the 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 the 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 and local configuration options defined previously for easier reuse
        encode: encode, // json encode the filter query
        local: local,   // defaults to 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 is :

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

Please advise what is the problem?

Looking at this quickly, I noticed that you have "id" capitalized as "Id" in one place but lowercase in every other instance. I would start by fixing that and attempting to run it again.

If that does not fix it, possibly try using something other than "id"? Mainly, I wanted to make you aware of the capitalization.

var columns = [{
        dataIndex: 'id',
        header: 'Id',
        // instead of specifying filter config just specify filterable=true
        // to use store's field's type property (if type property not
        // explicitly specified in store config it will be 'auto' which
        // GridFilters will assume to be 'StringFilter'
        filterable: true
        //,filter: {type: 'numeric'}
    }