Extjs 网格渲染问题

我在extjs中有以下代码，在渲染时，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 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 ------------//
});

Uncaught TypeError:无法读取未定义的属性“id”
/*!
*ExtJS库3.3.0
*版权所有（c）2006-2010 Ext JS公司。
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.chart.chart_URL='extjs/resources/charts.swf'；
Ext.onReady（函数（）{
功能更改（val）{
如果（val>0）{
返回“+val+”；
}else if（val<0）{
返回“+val+”；
}
返回val；
}
函数pctChange（val）{
如果（val>0）{
返回'+val+'%'；
}else if（val<0）{
返回'+val+'%'；
}
返回val；
}
变量url={
local:'grid filter.json'，//静态数据文件
远程：“grid filter.php”
};
var encode=false；
//配置过滤是本地执行还是远程执行（最初）
var局部=假；
var store=new Ext.data.JsonStore({
//存储配置
自动销毁：对，
url:（本地？url.local:url.remote），
remoteSort:false，
索廷福：{
字段：“id”，
方向：“ASC”
},
storeId:'myStore'，
//读卡器配置
idProperty:“id”，
root:'数据'，
totalProperty:'total'，
字段：[{
姓名：“id”
}, {
名称：“p_名称”
}, {
名称：'状态'，
键入：“字符串”
}, {
名称：'公司'，
键入：“字符串”，
}]
});
var createColModel=函数（完成、开始）{
变量列=[{
数据索引：“id”，
标题：“Id”，
//只需指定filterable=true，而不是指定filter-config
//使用存储区字段的类型属性（如果类型属性不是
//在存储配置中显式指定它将是“自动”的
//GridFilter将假定为“StringFilter”
可过滤：真
//，筛选器：{type:'numeric'}
}, {
数据索引：“p_名称”，
标题：“项目”，
id:'公司'，
过滤器：{
键入：“字符串”
//指定“已禁用”以禁用“过滤器”菜单
//，disabled:true
}
}, {
数据索引：“状态”，
标题：“状态”，
过滤器：{
type:'string'//在此处或存储字段配置中指定类型
}
}, {
数据索引：“公司”，
标题：“公司”，
过滤器：{
键入：“字符串”
//选项：[“小型”、“中型”、“大型”、“超大”]
//，phpMode:true
}
}, {
dataIndex:'可见'，
标题：“可见”，
过滤器：{
//类型：'boolean'//在此处或存储字段配置中指定类型
}
}];
返回新的Ext.grid.ColumnModel({
columns:columns.slice（开始| | 0，结束），
默认值：{
可排序：正确
}
});
};
//-------结束------//
//创建编辑器
//创建网格
var grid=新建Ext.grid.GridPanel({
店:店,，
插件：[编辑器]，
栏目：[sm，
{
id:“公司”，
标题：“项目”，
宽度：70，
可排序：是的，
数据索引：“p_名称”，
编辑:{
xtype:'textfield'，
allowBlank:false
},
过滤器：{
键入：“字符串”
//选项：[“小型”、“中型”、“大型”、“超大”]
//，phpMode:true
}
},
{
标题：“状态”，宽度：75，可排序：true，数据索引：“状态”，
valueField:“名称”，displayField:“名称”，triggerAction:“全部”，
过滤器：{
键入：“字符串”
//选项：[“小型”、“中型”、“大型”、“超大”]
//，phpMode:true
},
编辑:{
xtype:'组合'，
allowBlank:false
}},
{标题：“公司”，宽度：175，可排序：true，呈现器：更改，数据索引：“公司”，筛选器：{
键入：“字符串”
//选项：[“小型”、“中型”、“大型”、“超大”]
//，phpMode:true
}，编者：{
xtype:'textfield'，
allowBlank:false
},}
],
/*------*/
sm:sm，
/*------*/
是的，
autoExpandColumn:“公司”，
身高：200，
宽度：905，
框架：对，
标题：“滑动寻呼机”，
插件：[过滤器]，
autoExpandColumn:“公司”，
听众：{
呈现：{
fn：函数（）{
存储容量({
参数：{
起点：0，
限额：50
}
});
}
}
},
bbar:新的Ext.PagingToolbar({
页面大小：10，
店:店,，
displayInfo:true
})
});
var filters=new Ext.ux.grid.GridFilters({
//先前定义的编码和本地配置选项便于重用
encode:encode，//json对过滤器查询进行编码
local:local，//默认为false（远程筛选）
过滤器：[{
键入：“数值”，
数据索引：“id”，
禁用：false
}, {
键入：“字符串”，
数据索引：“公司”，
禁用：false
}, {
键入：“字符串”，
数据索引：“p_名称”，
禁用：false
}, {
键入：“字符串”，
数据索引：“状态”，
残疾人士：
<form id="myform" name="myform">
<table>
    <tr>
        <td height="" valign="top" colspan="3">
            <div id="grid-example">
            </div>
        </td>
    </tr>
</table>
</form>

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'}
    }