PDA

View Full Version : Problem when using checkBoxSelectionModel in GridPanel in extjs 3.3 beta version



sunil_vakotar
9 Aug 2010, 5:29 AM
I have downloaded new version and I added checkBoxSelectionModel in the Action column example which are shown in blog. Below is the code for it.


var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:false});
var grid = new Ext.grid.GridPanel({
store: store,
sm:sm,
columns: [
sm,
{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'},
{
xtype: 'actioncolumn',
width: 100,
items: [{
iconCls:'viewAndTagClass', // Use a URL in the icon config
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Sell " + rec.get('company'));
},
tooltip: 'Sell stock'
}, {
iconCls: 'similarDocClass', // Or use a class in the iconCls config
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Buy " + rec.get('company'));
},
tooltip: 'Buy stock'
}]
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

When I open it in Chrome, it shows two checkbox in each row instead of one (Refer Image 1.png).
but in Firefox and IE its looks perfect (Refer Image 2.png).

It seems that, it might be bug in this component.

Please provide some workaround ASAP.

Thanks

Condor
9 Aug 2010, 5:33 AM
The first column is simply to wide.

Could it be that you are using a state manager and you still have old column widths stored in your cookie?

sunil_vakotar
9 Aug 2010, 6:20 AM
I have deleted all the cookies and then tried but still same issue so I don't think its due to cookie or something cache related issue.

And even I am not using any State Manager or related things.

sunil_vakotar
9 Aug 2010, 7:16 AM
waiting for reply..

Animal
9 Aug 2010, 9:33 AM
Have you updated all the CSS?

sunil_vakotar
9 Aug 2010, 10:49 PM
yes I have updated all the css and in fact I have copied complete folder of new version.
I have checked same example with extjs version 3.2.1 and it runs proper.
But when same example run with extjs version 3.3, its behavior change.

Animal
9 Aug 2010, 11:28 PM
You must have some other bug somewhere. Because this is not reproducible.

I have added your checkbox column to the array-grid example, and it runs on Chrome 6.0 just fine.

sunil_vakotar
9 Aug 2010, 11:37 PM
can u post your code here so I can compare it with my code.

thank for the reply....

Animal
9 Aug 2010, 11:39 PM
The changed code in aray-grid.js:



var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});
var grid = new Ext.grid.GridPanel({
store: store,
sm: sm,
columns: [ sm,

sunil_vakotar
9 Aug 2010, 11:47 PM
The changed code in aray-grid.js:



var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});
var grid = new Ext.grid.GridPanel({
store: store,
sm: sm,
columns: [ sm,


I did the same code as yours as you can see in my first post.

The only difference was, I was checking it in Chrome 5.0 version so I have checked it in Chrome 6.0 also but no luck.

Animal
10 Aug 2010, 12:02 AM
Here's that code running on 3.3 beta on Chrome here:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/asusualitworks.jpg

sunil_vakotar
10 Aug 2010, 12:16 AM
I have checked from all perspective but couldn't find problem so here I am posting html code which show two checkboxes in grid as shown in attached Image 1.png.

Please go through it and let me know where I am doing wrong.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>PCA</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";
</script>

<script type="text/javascript">
/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function() {
Ext.QuickTips.init();

// 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());

// sample static data for the store
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']
];

/**
* Custom function used for column renderer
* @param {Object} val
*/
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;
}

/**
* Custom function used for column renderer
* @param {Object} 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;
}

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

// manually load local data
store.loadData(myData);

// create the Grid
var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});
var grid = new Ext.grid.GridPanel({
renderTo:Ext.getBody(),
store: store,
selModel:sm,
columns: [
sm,
{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'}

],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

});
</script>
</head>
<body>

</body>
</html>

Animal
10 Aug 2010, 12:37 AM
Try removing these lines:



stateful: true,
stateId: 'grid'

sunil_vakotar
10 Aug 2010, 12:51 AM
Try removing these lines:



stateful: true,
stateId: 'grid'


Still I am getting same issue after removing suggested two lines.

Did u get same behavior when run html file or it worked fine?

Animal
10 Aug 2010, 1:00 AM
I refer you to http://www.sencha.com/forum/showthread.php?106578-Problem-when-using-checkBoxSelectionModel-in-GridPanel-in-extjs-3.3-beta-version&p=499301#post499301

sunil_vakotar
10 Aug 2010, 1:21 AM
I refer you to http://www.sencha.com/forum/showthread.php?106578-Problem-when-using-checkBoxSelectionModel-in-GridPanel-in-extjs-3.3-beta-version&p=499301#post499301

I didn't get your response. The given link redirect me to same post.

I am not getting What u want to say?

sunil_vakotar
10 Aug 2010, 1:23 AM
I refer you to http://www.sencha.com/forum/showthread.php?106578-Problem-when-using-checkBoxSelectionModel-in-GridPanel-in-extjs-3.3-beta-version&p=499301#post499301

Ok..

so any update on my last query? I didn't get any change after removing two lines.

sunil_vakotar
10 Aug 2010, 3:30 AM
I have still getting that issue...
waiting for the reply...

thanks

Animal
10 Aug 2010, 4:14 AM
You have a bug in your code. It works for me, and in the absence of any other contributors to this thread, I have to assume for others too.

The only conclusion is that you have some code, or some CSS which is interfering.

sunil_vakotar
10 Aug 2010, 6:36 AM
Finally I came to solution and the solution is really amazing for me.

Actually, in my jsp file where I am importing all js files, the first line is

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

and above line was creating problem otherwise everything was proper.

When I removed above line, it started to work like charm.

My problem is resolved but can you explain the reason for it?

Animal
10 Aug 2010, 6:44 AM
Not sure that's a valid doctype.

http://www.w3.org/QA/2002/04/valid-dtd-list.html

I have started to use



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

sunil_vakotar
10 Aug 2010, 6:48 AM
Yes... I have tried DOCTYPE given by you also but getting same problem.

So removed DOCTYPE and it started to work.

sunil_vakotar
16 Aug 2010, 1:44 AM
Despite of applying below doctype problem still exist


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

If I remove doctype, so my problem get resolved but it causes another issues to start so I cant remove it
and with doctype, check box problem get started.

So, is there anything still I am missing?

Waiting for your reply