checkbox not display inside Ext.grid.Panel - extjs-4.1.0

[Ibrahimp]

Hi,

I'm trying creating a grid with multiple checkbox columns -

var myGridPanel = Ext.create('Ext.grid.Panel', {
title: 'Permissions',
store: Ext.data.StoreManager.lookup('userStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Read', dataIndex: 'read' },
{ header: 'Write', dataIndex: 'write', xtype: 'checkcolumn' },
{
xtype: 'checkcolumn',
header: 'readwrite?',
dataIndex: 'readwrite',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'

},
listeners: {
checkchange: function (column, recordIndex, checked) {
alert(checked);
}
}
}

],
height: 200,
width: 400,
renderTo: Ext.getBody()
});


my data store

Ext.create('Ext.data.Store', {
storeId: 'userStore',
fields: [
{ name: 'name', type: 'string' },
{ name: 'read', type: 'bool' },
{ name: 'write', type: 'bool' },
{ name: 'readwrite', type: 'bool' }
],
data: { 'items': [
{ 'name': 'Lisa', "read": "true", "write": "true", "readwrite": "false" },
{ 'name': 'Bart', "read": "true", "write": "true", "readwrite": "false" },
{ 'name': 'Homer', "read": "true", "write": "true", "readwrite": "false" },
{ 'name': 'Marge', "read": "true", "write": "true", "readwrite": "false" }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

The grid getting formed but check-box is not rendered. I am able to get the checkchange alert though.

Appreciate your help.

Thanks,
Ib

[redraid]

Looks like you don't include plugin css (ux/css/CheckHeader.css)

[Ibrahimp]

Worked!! Thanks!!:)

[nitinkalra2000]

@redraid : I am also facing the same problem but when I included CheckHeader.css, it gave me below error :
Uncaught SyntaxError: Unexpected token . at
extjs/examples/ux/css/CheckHeader.css:1

I am including css in html file as follows :
<script type="text/javascript" src="extjs/examples/ux/css/CheckHeader.css"></script>

Could you please help me in solving the issue ?