Custom Grid Cell Editor

[harman]

Hi All,

I am defining an ExtJS 4.0.7 component to use it as an editor for a grid cell as follows

Ext.define('My.pickerField',{
    extend:'Ext.form.field.Picker',
    alias: ['widget.customPicker'],
    width:155,
    editable:false,
    value: gridStore.getAt(rowIndex).get('somefield'),
    createPicker: function() {
    return Ext.create('Ext.panel.Panel', {
    //....    
    //....
    });
}
});

//Column where editor is placed
{
    text: "Header",
    dataIndex: 'field1',
    width:158,
    align : 'center',
    sortable: true,
    editor: {
        xtype: 'customPicker'
    }
}

Now the problem is to pass the grid store and row index to the xtype.
How can i do that?

May be i am doing it with wrong approach.
If so how do i use a custom editor ?

Thanks in advance.

[scottmartin]

You should not need to .. it is already part of a form that is updated.

See the following:

Ext.onReady(function(){

    Ext.define('MyPickerField',{
        extend:'Ext.form.field.Picker',
        alias: 'widget.customPicker',
        editable:false
    });

    var store = Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'change'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "change":100  },
            { 'name': 'Bart', "email":"bart@simpsons.com", "change":-20  },
            { 'name': 'Homer', "email":"home@simpsons.com",  "change":23   },
            { 'name': 'Marge', "email":"marge@simpsons.com", "change":-11   }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });

    var editor = {
        xtype: 'textfield',
        allowBlank: false
    };

    var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToMoveEditor: 1,
        autoCancel: false
    });

    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: store,
        columns: [
            { header: 'Name',  dataIndex: 'name', editor: { xtype: 'customPicker' } },
            { header: 'Email', dataIndex: 'email', flex: 1, editor: editor },
            { header: 'Change', dataIndex: 'change', editor: editor }
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),

        plugins: [rowEditing]
    }); 

});

Scott.

[harman]

Hi Scott,

Thanks for pointing in the right way to implement editor. But i have a few things
Firstly, I am using a cell editor as its view suits more to my requirements.
so i use Cell Editing plugin instead but that is not a prob.
secondly i am making a tree panel when the createPicker function executes.
something like

createPicker: function() {    return Ext.create('Ext.tree.Panel', {
    //....    
    //....
    });
}

Inside tree i need the rowIndex for some operations.
How can i get rowIndex in picker so i can pass it on to inner tree?