View Full Version : Grid Checkbox Throws JS Error "Cannot call method 'removeCls' of undefined "

16 Oct 2012, 10:10 PM
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'}

16 Oct 2012, 10:32 PM

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. ');


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',
var record = this.getSelectionModel().getSelection();
renderTo: Ext.getBody()

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

16 Oct 2012, 10:47 PM
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');