Page 4 of 4 FirstFirst ... 234
Results 31 to 35 of 35

Thread: set field type in editor grid based on a combo box selection

  1. #31
    Ext User
    Join Date
    Sep 2010
    Posts
    11
    Vote Rating
    0
      0  

    Default

    Sorry, just a newbie question
    i assume simply using it as renderer:'valueRenderer()', in the appropriate column config in the cm should do the trick?

    my column has two editors (both are combobxes). that is, a set of rows has one editor while the other has a different editor, on the same column. both use similar set of keys (eg {1,2,3,4,5} and {1,2}), but different display values. I kept trying to use the construct below, but it almost appears to do nothing. Must be a fault on my part.

    Any advice much appreciated.

    thanks
    bikram

    Quote Originally Posted by Condor View Post
    It's:
    Code:
    Ext.util.Format.valueRenderer = function(enumCombo){
        return function(value, metadata, record, rowIndex, colIndex, store){
            var editor = cm.getCellEditor(colIndex, rowIndex),
                field = editor ? editor.field : null;
            if(field && field.findRecord){
                var record = field.findRecord(field.valueField, value);
                return record ? record.get(field.displayField) : field.valueNotFoundText;
            }
            return value;
        }
    };
    Last edited by bikram; 27 Oct 2010 at 7:47 PM. Reason: typo in post

  2. #32
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      0  

    Default

    1. It's: renderer:'valueRenderer' (without the ()).
    2. The code I posted is not very useful, because it requires access to the 'cm' columnmodel of the grid.

  3. #33
    Ext User
    Join Date
    Sep 2010
    Posts
    11
    Vote Rating
    0
      0  

    Default thanks very much --

    for now, i added this to the columns in the cm, and so far it is working , except for a minor issue.
    I will troubleshoot that issue some more before i ask for some guidance.
    Certainly the approach below will lead to code duplication if there are several columns, but i couldn't see an easy way to have a reusable renderer that could also take in the cm as a param.

    Code:
    renderer : function(val,meta,record,rowIndex,colIndex){
                    var editor = cm.getCellEditor(colIndex, rowIndex),
                    field = editor ? editor.field : null;
                    if(field && field.findRecord){
                        var record = field.findRecord(field.valueField, val);
                        return record ? record.get(field.displayField) : field.valueNotFoundText;
                    }
                    return val;
                }
    thanks very much
    bikram

  4. #34
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    127
    Vote Rating
    1
      0  

    Default

    Quote Originally Posted by Condor View Post
    Example:

    Code:
    var store = new Ext.data.SimpleStore({
        data: [
            ['Value 1', 'text', 'text'],
            ['Value 2', 'number', 1],
            ['Value 3', 'date', new Date()]
        ],
        fields: ['name', 'type', 'value']
    });
    var comboStore = new Ext.data.SimpleStore({
        id: 0,
        data: [
            ['text', 'Text'],
            ['number', 'Number'],
            ['date', 'Date']
        ],
        fields: ['type', 'name']
    });
    var typeEditor = new Ext.form.ComboBox({
        store: comboStore,
        mode: 'local',
        triggerAction: 'all',
        valueField: 'type',
        displayField: 'name',
        editable: false    
    });
    var typeRenderer = function(value) {
        var rec = comboStore.getById(value);
        return rec ? rec.get('name') : '';
    }
    var colModel = new Ext.grid.ColumnModel({
        columns: [
            {header: 'Name', dataIndex: 'name', sortable: true, editor: new Ext.form.TextField({})},
            {header: 'Type', dataIndex: 'type', sortable: true, renderer: typeRenderer, editor: typeEditor},
            {header: 'Value', dataIndex: 'value', sortable: true, editable: true}
        ],
        editors: {
            'text': new Ext.grid.GridEditor(new Ext.form.TextField({})),
            'number': new Ext.grid.GridEditor(new Ext.form.NumberField({})),
            'date': new Ext.grid.GridEditor(new Ext.form.DateField({}))
        },
        getCellEditor: function(colIndex, rowIndex) {
            var field = this.getDataIndex(colIndex);
            if (field == 'value') {
                var rec = store.getAt(rowIndex);
                return this.editors[rec.get('type')];
            }
            return Ext.grid.ColumnModel.prototype.getCellEditor.call(this, colIndex, rowIndex);
        }
    });
    var grid = new Ext.grid.EditorGridPanel({
        ds: store,
        cm: colModel
    });
    Ext.onReady(function(){
        new Ext.Viewport({
            layout: 'fit',
            items: [grid]
        });
    });
    Is there a version of this example that is compatible with ExtJS 4.x

    Thanks in advance.

    Whatty

  5. #35
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    69
    Vote Rating
    1
      0  

    Default

    hi, Is there a version of this example that is compatible with ExtJS 4.x? Thank you!

Page 4 of 4 FirstFirst ... 234

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •