1. #1
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Answers
    2
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default Unanswered: Custom Grid Cell Editor

    Unanswered: Custom Grid Cell Editor


    Hi All,

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

    Code:
    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,069
    Answers
    673
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    See the following:

    Code:
    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.

  3. #3
    Sencha User harman's Avatar
    Join Date
    Jul 2011
    Location
    India
    Posts
    136
    Answers
    2
    Vote Rating
    3
    harman is on a distinguished road

      0  

    Default


    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
    Code:
    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?

Thread Participants: 1

Tags for this Thread