[CLOSED][Ext 3.3 beta][OPEN-1187] Problem when using checkBoxSelectionModel

[sunil_vakotar]

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

[Jamie Avins]

Thank you for the report.

[Animal]

This does not show up here: http://dev.sencha.com/deploy/dev/exa...d-plugins.html

It also does not show up if I modify the array-grid.js example as you suggest.

Did you update the CSS and images too when you upgraded?

[sunil_vakotar]

This does not show up here: http://dev.sencha.com/deploy/dev/exa...d-plugins.html

It also does not show up if I modify the array-grid.js example as you suggest.

Did you update the CSS and images too when you upgraded?

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 Beta, its behavior change.

Link sent by you in which behavior seem proper contains example developed using version 3.2.1 but this problem I found in version 3.3 Beta.

[sunil_vakotar]

Thank you for the report.

can u update me on this?

[evant]

I don't see this in Chrome with beta or the latest build from SVN. Make sure you've deployed all the css/images correctly and clear your cache too.

[sunil_vakotar]

I don't see this in Chrome with beta or the latest build from SVN. Make sure you've deployed all the css/images correctly and clear your cache too.

Can you give example of array-grid with checkbox in it which works proper at your side?

I will run same sample at my pc and check so can get solution.

[Animal]

http://dev.sencha.com/deploy/ext-3.3...d-plugins.html

[Condor]

1. Which Chrome version are you using?
2. How does the standard ext 3.3-beta1 Grid Plugins Example look on your Chrome browser? It looks ok on my Chrome 5.0.375.125.

[sunil_vakotar]

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?