我在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 ------------//
});
我的HTML代码是：
<form id="myform" name="myform">
<table>
<tr>
<td height="" valign="top" colspan="3">
<div id="grid-example">
</div>
</td>
</tr>
</table>
</form>
请告知问题是什么？
答案 0 :(得分：0)
很快看到这个，我注意到你在一个地方将“id”大写为“Id”，而在每个其他实例中都是小写。我将从修复它并尝试再次运行它开始。
如果不能解决问题，可以尝试使用“id”以外的其他内容吗？主要是，我想让你知道大写。
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'}
}