PDA

View Full Version : Grid Rendering Problem



rahulmehta
2 Dec 2010, 10:45 PM
Hi,
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.
* [email protected]
* 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 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'
});

var grid = new Ext.grid.GridPanel({
store: store,
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,
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
})
});


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?

extjs (http://stackoverflow.com/questions/tagged/extjs)

Animal
2 Dec 2010, 11:45 PM
Unreadable code. Double posting.

And have you attempted any debugging?

rahulmehta
3 Dec 2010, 12:53 AM
Edited Please check and I have attempted the Debugging

Condor
3 Dec 2010, 1:02 AM
Start by running your code through jslint.com and fix all the errors it finds.

rahulmehta
3 Dec 2010, 1:14 AM
Hi Condor,
Nice to See You After Long Time , How are You,
I have checked with jslint.org and solved errors.
Now My code is running in firefox ,but it giving error in chrome , and error is

pie-chart.js:116Uncaught TypeError: Cannot read property 'GridFilters' of undefinedextjs/examples/grid/row-editor.js:35Uncaught TypeError: Object #<an Object> has no method 'getRandomInt'Please Advise

Condor
3 Dec 2010, 1:25 AM
Could you post your current code?

rahulmehta
3 Dec 2010, 1:27 AM
I had edited it in my question. Please check in my question.

Condor
3 Dec 2010, 1:51 AM
First of all, you didn't clean up all jslint warnings (select "The Good Parts").

I ended up with:

Ext.chart.Chart.CHART_URL = 'extjs/resources/charts.swf';
Ext.onReady(function () {
var change = function (val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
},
url = {
local: 'grid-filter.json',
remote: 'grid-filter.php'
},
encode = false,
local = false,
store = new Ext.data.JsonStore({
autoDestroy: true,
url: (local ? url.local : url.remote),
remoteSort: false,
sortInfo: {
field: 'id',
direction: 'ASC'
},
storeId: 'myStore',
idProperty: 'id',
root: 'data',
totalProperty: 'total',
fields: [{
name: 'id'
},
{
name: 'p_name'
},
{
name: 'status',
type: 'string'
},
{
name: 'company',
type: 'string'
}],
autoLoad: {
params: {
start: 0,
limit: 10
}
}
}),
filters = new Ext.ux.grid.GridFilters({
encode: encode,
local: local,
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
}]
}),
sm = new Ext.grid.CheckboxSelectionModel(),
grid = new Ext.grid.GridPanel({
store: store,
columns: [sm,
{
id: 'company',
header: "Project",
width: 70,
sortable: true,
dataIndex: 'p_name',
editor: {
xtype: 'textfield',
allowBlank: false
},
filter: {
type: 'string'
}
},
{
header: "Status",
width: 75,
sortable: true,
dataIndex: 'status',
valueField: "name",
displayField: "name",
triggerAction: "all",
filter: {
type: 'string'
},
editor: {
xtype: 'combo',
allowBlank: false
}
},
{
header: "Company",
width: 175,
sortable: true,
renderer: change,
dataIndex: 'company',
filter: {
type: 'string'
},
editor: {
xtype: 'textfield',
allowBlank: false
}
}],
sm: sm,
stripeRows: true,
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
}),
renderTo: 'grid-example'
});
});

Sencondly, your error is from the RowEditor. You're not using a RowEditor in this code!