1. #1
    Sencha User
    Join Date
    Jun 2008
    Location
    Baltimore, Maryland
    Posts
    19
    Vote Rating
    0
    Michael Reach is on a distinguished road

      0  

    Default Editor Type in Grid Different for Different Cells

    Editor Type in Grid Different for Different Cells


    Hi! I saw this neat trick in Extjs v.2 for making an editable grid where different cells in a grid column can be of different types, with different editors.
    http://www.sencha.com/forum/showthre...-box-selection
    Is this something that will work in Ext v.4, and if so, how? I had trouble finding some of the objects in the documentation, so I'm wondering if they've moved.
    Thanks.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    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


    Please have a look at the following:
    http://dev.sencha.com/deploy/ext-4.1...l-editing.html

    Scott.

  3. #3
    Sencha User
    Join Date
    Jun 2008
    Location
    Baltimore, Maryland
    Posts
    19
    Vote Rating
    0
    Michael Reach is on a distinguished road

      0  

    Default


    Thanks, but that example has a single editor for all the cells in a given column. I was looking for something like the example I posted above (#8 there by Condor), where different rows in the same column have different editors, depending on the cell.
    Michael

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    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 may be able to do something with this component?
    http://skirtlesden.com/ux/component-column

    If this does not help, then you will have to RYO.

    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    137
    Vote Rating
    29
    bogc will become famous soon enough bogc will become famous soon enough

      0  

    Default


    This is doable by doing two things:

    1. Override the column getEditor function to return the editor your own custom logic dictates. Example below.

    2. Call editor.editors.clear(); because the CellEditing plugin stores the editors in a map (don't know why - I guess for speed purposes) and it would return always the first editor that the user opens. By calling this you wipe out the cache and force the plugin to always use the editor returned by the column. This was one way to do it. I noticed that there is also a column activeEditorId property that is used as a key. Another solution might use this column. Perhaps some of the Sencha guys can chip in to let us know how the activeEditorId property is supposed to be used.



    I tested the code with 4.1. I am pretty sure it would work with 4.2...

    View:

    Code:
    Ext.define('MyApp.view.MyGridPanel', {
      extend: 'Ext.grid.Panel',
    
      height: 250,
      width: 400,
      title: 'My Grid Panel',
      store: 'MyArrayStore',
    
      initComponent: function() {
        var me = this;
    
        Ext.applyIf(me, {
          columns: [
            {
              xtype: 'gridcolumn',
              dataIndex: 'Name',
              text: 'Name',
              editor: {
                xtype: 'textfield'
              }
            },
            {
              xtype: 'numbercolumn',
              dataIndex: 'Discriminator',
              text: 'Discriminator',
              editor: {
                xtype: 'numberfield'
              }
            },
            {
              xtype: 'gridcolumn',
              getEditor: function(record, defaultField) {
    
                var type = record.get('Discriminator');
    
                //alert('GetEditor');
    
                if (type === 1) {
                  return this.getEditor1();
                } else if (type === 2) {
                  return this.getEditor2();
                }
    
    
    
              },
              getEditor1: function() {
                if (this.editor1 == null)
                {
                  this.editor1 = Ext.create('Ext.grid.CellEditor', {
                    field: Ext.create('Ext.form.field.Text')
                  });
                }
    
                return this.editor1;
              },
              getEditor2: function() {
                if (this.editor2 == null)
                {
                  this.editor2 = Ext.create('Ext.grid.CellEditor', {
                    field: Ext.create('Ext.form.field.ComboBox')
                  });
                }
    
                return this.editor2;
              },
              dataIndex: 'Value',
              text: 'Value'
            }
          ],
          plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
              clicksToEdit: 1,
              listeners: {
                edit: {
                  fn: me.onCellEditingEdit,
                  scope: me
                },
                beforeedit: {
                  fn: me.onCellEditingBeforeEdit,
                  scope: me
                }
              }
            })
          ]
        });
    
        me.callParent(arguments);
      },
    
      onCellEditingEdit: function(editor, e, eOpts) {
    
        /*
        grid - The grid
        record - The record that was edited
        field - The field name that was edited
        value - The value being set
        originalValue - The original value for the field, before the edit.
        row - The grid table row
        column - The grid Column defining the column that was edited.
        rowIdx - The row index that was edited
        colIdx - The column index that was edited
        */
    
      
      },
    
      onCellEditingBeforeEdit: function(editor, e, eOpts) {
         editor.editors.clear();
      }
    
    });
    Store:

    Code:
    Ext.define('MyApp.store.MyArrayStore', {
      extend: 'Ext.data.Store',
    
      requires: [
        'MyApp.model.MyModel'
      ],
    
      constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
          model: 'MyApp.model.MyModel',
          storeId: 'MyArrayStore',
          data: [
            {
              Name: 'Parameter 1',
              Discriminator: 1,
              Value: 1
            },
            {
              Name: 'Parameter 2',
              Discriminator: 2,
              Value: 1
            }
          ],
          proxy: {
            type: 'ajax',
            reader: {
              type: 'array'
            }
          }
        }, cfg)]);
      }
    });
    Model:

    Code:
    Ext.define('MyApp.model.MyModel', {
      extend: 'Ext.data.Model',
    
      fields: [
        {
          name: 'Name',
          type: 'string'
        },
        {
          name: 'Discriminator',
          type: 'int'
        },
        {
          name: 'Value'
        }
      ]
    });

Thread Participants: 2