[2.??][CLOSED] Bug in checkBoxSelectionModel..

[rakesh]

Hi,
I have added a checkbox in the grid using checkBoxSelectionModel.It worked fine, but when I tried to send colModel configuration to the beckend to save user preference for the grid, due to the malformation of JSON object ,ext encode method gives too much recursion error.However, if I remove selModel from gridPanel configuration, it works fine.Below is the modifed grid array example to reproduce the issue.Kindly looked into the issue and help me out.


/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer 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;
}

// example of custom renderer function
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;
}

// create the data store
var store = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

var bbar =null;
//Change this value to change the no of records for pagination
var recordsPerPage=50;

bbar=
new Ext.PagingToolbar({
pageSize: recordsPerPage,
store: store,
displayInfo: true,
displayMsg: 'Displaying trades {0} - {1} of {2}',
emptyMsg: 'No Record Found',
beforePageText: '',
afterPageText: ''
});

// create the Grid
var selModel=new Ext.grid.CheckboxSelectionModel();

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
selModel,
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
sm:selModel,
stripeRows: true,
autoExpandColumn: 'company',
height:350,
width:600,
bbar:bbar,
title:'Array Grid'
});

grid.render('grid-example');

var submit = bbar.addButton({
text: 'Save View',
disabled:false,
enableToggle:false,
pressed: true,
handler: function(){

saveUserPref();
}
});
function saveUserPref(){
/*Encode method is throwing an error*/
alert(Ext.encode(grid.getColumnModel().config));
}
grid.getSelectionModel().selectFirstRow();
});

[Condor]

This is not a bug.

Ext.encode is a very simple JSON encoder that can't handle recursion.

You'll need to copy and preprocess the columns before encoding them.

[rakesh]

This is not a bug.

Ext.encode is a very simple JSON encoder that can't handle recursion.

You'll need to copy and preprocess the columns before encoding them.

Sorry Condor,
I didn't get this. If I put selmodel, why recursion is happening? Can you guide me how to copy and preprocess the columns.

[Condor]

Only copy the stuff you actually want, e.g.


var columns = [];
grid.getColumnModel().getColumnsBy(function(c){
columns.push({
align: c.align,
css: c.css,
dataIndex: c.dataIndex,
fixed: c.fixed,
header: c.header,
hidden: c.hidden,
hideable: c.hideable,
id: c.id,
menuDisabled: c.menuDisabled,
resizable: c.resizable,
sortable: c.sortable,
tooltip: c.tooltip,
width: c.width
});
});
var jsonData = Ext.encode(columns);

[rakesh]

Thanks Candor!!!! works like a charm!!!!

[willbelair]

Hi,
How could I add the groupby value in the "columns.push" ? I try to add something like this, but it does not work.


hidden: c.hidden,
hideable: c.hideable,
groupby: c.groupByText


Could someone give me a hint on this? Than you.

[Condor]

The column model knows nothing about grouping.

You could try:

groupBy: (c.dataIndex == store.groupField)

[rakesh]

We are facing another problem now, after encoding array into json string(Ext.encode(columns)) if length of the string is more than 2300-2500 in IE 7.0 string is getting truncating....kindly help me out

[Condor]

What are you doing with the final string?

[evant]

Please post this in the help forum.

[rakesh]

I am appending final string into url and sending it as a request parameter to the struts dispatch action so that I can save user grid preference (column model) in the DB ..if i put alert before appending it to the URL, I can see truncating string in IE 7.0 but works fine in mozilla...

[Condor]

There is limit to the length of a GET request. If you need to send large amouts of data you'll have to switch to a POST request.

[rakesh]

String is getting truncating before posting itself..anyways I am using POST request only..

[rakesh]

Sorry Condor to post this message without anyalysing the root cause of the problem. I got confused with the alert message. Here is the limitation of IE!!

Microsoft Internet Explorer has a maximum uniform resource locator (URL) length of 2,083 characters. Internet Explorer also has a maximum path length of 2,048 characters. This limit applies to both POST request and GET request URLs.

If you are using the GET method, you are limited to a maximum of 2,048 characters, minus the number of characters in the actual path.

However, the POST method is not limited by the size of the URL for submitting name/value pairs. These pairs are transferred in the header and not in the URL.

I will have to probably split the column model string and send it as 2-3 key value pairs depending on the length of the string.

Thanks for your response.