View Full Version : EditorGridPanel and inline editing with CheckboxGroup

14 Feb 2010, 2:15 PM
I'm performing an investigation into ExtJS and in the process I'm trying to port my current application from YUI.

I can't seem to get CheckboxGroups working with EditorGridPanel. There are three issues:
1. They appear unstyled
2. When altered create a "too much recursion" error.
3. Don't seem to respond to the 'normal' input events (I have to select a checkbox and then press enter to submit the value).

Is this expected?

I've altered the "Editor Grid Example" to include an extra column of type CheckboxGroup with some hard coded values (straight from the CheckboxGroup example).


* Ext JS Library 3.1.0
* Copyright(c) 2006-2009 Ext JS, LLC
* [email protected]
* http://www.extjs.com/license

* Handler specified for the 'Available' column renderer
* @param {Object} value
function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';

// shorthand alias
var fm = Ext.form;

// the check column is created using a custom plugin
var checkColumn = new Ext.grid.CheckColumn({
header: 'Indoor?',
dataIndex: 'indoor',
width: 55

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel({
// specify any defaults for each column
defaults: {
sortable: true // columns are not sortable by default
columns: [
id: 'common',
header: 'Common Name',
dataIndex: 'common',
width: 220,
// use shorthand alias defined above
editor: new fm.TextField({
allowBlank: false
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'light',
lazyRender: true,
listClass: 'x-combo-list-small'
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
}, {
header: 'Blah',
dataIndex: 'zone',
width: 95,
editor: new Ext.form.CheckboxGroup({
xtype: 'checkboxgroup',
fieldLabel: 'Single Column',
itemCls: 'x-check-group-alt',
// Put all controls in a single column with width 100%
columns: 1,
items: [
{boxLabel: 'Item 1', name: 'cb-col-1'},
{boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
{boxLabel: 'Item 3', name: 'cb-col-3'}
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
checkColumn // the plugin instance

// create the Data Store
var store = new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,

// load remote data using HTTP
url: 'plants.xml',

// specify a XmlReader (coincides with the XML format of the returned data)
reader: new Ext.data.XmlReader({
// records will have a 'plant' tag
record: 'plant',
// use an Array of field definition objects to implicitly create a Record constructor
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}

sortInfo: {field:'common', direction:'ASC'}

// create the editor grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'editor-grid',
width: 600,
height: 300,
autoExpandColumn: 'common', // column with this id will be expanded
title: 'Edit Plants?',
frame: true,
// specify the check column plugin on the grid so the plugin is initialized
plugins: checkColumn,
clicksToEdit: 1,
tbar: [{
text: 'Add Plant',
handler : function(){
// access the Record constructor through the grid's store
var Plant = grid.getStore().recordType;
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: (new Date()).clearTime(),
indoor: false
store.insert(0, p);
grid.startEditing(0, 0);

// manually trigger the data store load
// store loading is asynchronous, use a load listener or callback to handle results
callback: function(){
title: 'Store Load Callback',
msg: 'store was loaded, data available for processing',
modal: false,
icon: Ext.Msg.INFO,
buttons: Ext.Msg.OK

I understand there is the SimpleLOV plugin available but I want the simplest thing possible, which is simply a group of checkboxes. Is this possible with the code supplied with Ext?


Mark Mansour
[email protected]

31 Mar 2011, 12:16 AM
I'm trying to get it work too. I've got the same problems. It seems that you can use TextField,Numberfield,ComBox,Datefield,Timefield and Checkbox for editing the grid. Or you've got to extend one of these. Did you find a solution?

1 Apr 2011, 10:26 PM
I ended up using the SuperSelectBox plugin to achieve the same thing. But styling that is also tricky.

6 Apr 2011, 7:27 AM
I solved it with the Ext.ux.form.CheckboxCombo plugin.