View Full Version : Treepanel with Editable Grid?

5 Apr 2012, 8:30 AM

I've arranged a treepanel (backed by a treestore) with additional gridcolumns that are editable. Everything initiates fine. The problem happens when I attempt to edit the gridcell configured with the "editor:" (3rd Column).

The error I get is: [object][object] has no method 'indexOf'.

The reason I'm using a treepanel + treestore (opposed to a standard store + grid) is because the records contain a structured hierarchy and the individual records must support drag+drop into other grouped records. In other words, the user can change the order of the records in a group and/or move a record to other groups of records. Treestore/Treepanel seemed the best way to go here...

I'm wondering if I'm taking the correct approach to begin with, and, if my approach is OK, then I'm wondering what I've messed-up on with editor configuration.

The treepanel looks like this:

And here's some code for the panel and it's columns:

Ext.define('Nile.view.layout.BillingPlanEditGrid', {
requires: ['Nile.store.BillPlanTreeStoreMstr'],

extend: 'Ext.tree.Panel',

alias: 'widget.billingplaneditgrid',

id: 'BillingPlanEditGrid',

layout: 'auto',

autoHeight: true,

hideHeaders: false,

autoScroll: true,

margin: '0 0 0 0',

padding: '5 5 5 5',

useArrows: false,

expanded: true,

rootVisible: false,

store: 'BillPlanTreeStoreMstr',

//cell editing config

selType: 'cellmodel',

plugins: [

Ext.create('Ext.grid.plugin.CellEditing', {

clicksToEdit: 1



//DD config

viewConfig: {

plugins: {

ptype: 'treeviewdragdrop',

allowContainerDrop: false,

allowParentInsert: false,



initComponent: function() {

Ext.applyIf(this, {

columns: [{

xtype: 'actioncolumn',

id: 'iconImg',

text: 'icon',

width: 56,

items: [{

icon: '',

/* The getClass() determines what CSS style to apply to

* the record before rendering to cell in action column.

* It expects the CSS style to be the return param. Here we simplely

* get the iconCls property of the record (treestore records have

* this property), and return it.*/

getClass: function(value,metadata,record){

var recIconCls = record.get('iconCls');

return recIconCls;




xtype: 'gridcolumn',

id: 'taskCol',

text: 'Description',

dataIndex: 'task',

flex: 1,


xtype: 'gridcolumn',

id: 'rhs',

text: 'Left-Condition',

dataIndex: 'task',

width: 200,

editor: {

xtype: 'textfield'



xtype: 'gridcolumn',

id: 'operator',

text: 'Operator',

width: 100


xtype: 'gridcolumn',

id: 'lhs',

text: 'Right-Condition',

width: 200


xtype: 'actioncolumn',

text: 'Delele Rec',

dataIndex: 'edit',

width: 16,

items: [{

icon: 'resources/images/icon-trash.png'






Much thanks,

5 Apr 2012, 9:27 AM
That would be hard to tell without setting breakpoints in FireBug and see what is going on underneath.

Something that may be of interest: