Grid Checkbox Throws JS Error "Cannot call method 'removeCls' of undefined "

[cms143]

I am using the latest extjs version 4.1.1a on google chrome and i have a checkbox grid inside of a fieldset and when i click on any of the checkboxes inside the grid panel I get the following error "Cannot call method 'removeCls' of undefined"... can someone please tell me how to fix this?

Here is what my code looks like:

var fields = {
                xtype : 'fieldcontainer',
                layout: 'anchor',
                
                fieldDefaults : {
                    labelAlign : 'left',
                    labelWidth : 115,
                    labelStyle: 'text-align: right;',
                    margin : '0 0 5px 0'
                },


                items : [{
                                xtype: 'gridpanel',
                                name: 'category',
                                store : categoriesStore,
                                margin: '5px 0',
                                selModel: Ext.create('Ext.selection.CheckboxModel'),
                                columnLines: false,
                                rowLines: false,
                                height: 105,
                                frame: false,
                                
                                columns: [
                                    {text: "Categories", flex: 1, dataIndex: 'category_name'}
                                ]
                        }]
            };

[sword-it]

Hi,

You can try this code:

// checkbox grid

Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'},
{name: 'industry'},
{name: 'desc'}
]
});
// Array data for the grids
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am', 'Manufacturing'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am', 'Manufacturing'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am', 'Manufacturing'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am', 'Finance'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am', 'Services']
];

// add in some dummy descriptions
for(var i = 0; i < Ext.grid.dummyData.length; i++){
Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. ');
}


Ext.QuickTips.init();

var getLocalStore = function() {
return Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: Ext.grid.dummyData
});
};




var sm = Ext.create('Ext.selection.CheckboxModel');
var grid2 = Ext.create('Ext.grid.Panel', {
store: getLocalStore(),
selModel: sm,
columns: [
{text: "Company", width: 200, dataIndex: 'company'},
{text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", dataIndex: 'change'},
{text: "% Change", dataIndex: 'pctChange'},
{text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
columnLines: true,
width: 600,
height: 300,
frame: true,
title: 'Framed with Checkbox Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
margin: '0 0 20 0',
listeners:{
select:function(){
this.getRecord();
}
},
getRecord:function(){
var record = this.getSelectionModel().getSelection();                  
alert(record[0].raw);
},
renderTo: Ext.getBody()
});​

For more info check this jsfiddle link http://jsfiddle.net/hVhuz/1/

[cms143]

Thats pretty similar to what I already have. The problem is not that what I have doesn't work, because it works, but it throws that javascript error in google chrome only. It works fine in IE but google chrome throws that error when I check the checkboxes in the grid. I believe it is a bug with the Ext.create('Ext.selection.CheckboxModel');