Ext JS 4: Simple Grid with Cell Editing

I have a straightforward grid with two columns that has cell editing enabled. Two requirements to implement:

  1. Only new rows can edit the first column, named “Key”.
  2. Make sure the cell display is html encoded

Here is how I configured the CellEditing plugin:

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
	pluginId: 'cellplugin',
	clicksToEdit: 1,
	listeners : {
		scope: this,
		beforeedit: function(e, options) {
			// Allow edits in the first column to new rows only
			if (options.colIdx === 0) {
				if (options.record.phantom === true) {
					return true;
				return false;

And here is how I configured the grid. Interesting parts are selType, plugins and the renderer on the columns.

var myGridConfig = {
	xtype: 'grid',
	store: this.myStoreStore,
	selType: 'cellmodel',
	plugins: [
	columns : [
		{text: 'Key', dataIndex: 'key', editor: 'textfield', renderer: Ext.util.Format.htmlEncode},
		{text: 'Value', dataIndex: 'value', flex: 1, editor: 'textfield', renderer: Ext.util.Format.htmlEncode}

Version Info: Ext JS 4.1

Related posts: https://ahlearns.wordpress.com/2012/03/02/ext-js-4-cell-editing-and-blur-event/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s