Results 1 to 3 of 3

Thread: Putting the HasMany Associated Data into Grid Column and Make It Editable

  1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    48
    Answers
    3

    Default Putting the HasMany Associated Data into Grid Column and Make It Editable

    What I am trying to do:

    Display the data that is passed as associate data in a column. I want to display that data as their Value property in the record. I also want to be able to edit this column using the row editor so you can chose from the drop down and select more types or deselect types.


    My data is loading properly with the HasMany Data.
    The data is stored in a Store within a Store all correctly.

    So currently to display the data I am using:
    Code:
    {
    text: 'Funds',
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
           var displayString = "";
           Ext.Array.forEach(record.fundTypesStore.getRange(), function (value) {
                   displayString += me.fundTypeEnumStore.getById(value.get("fundTypeId")).get('value') + ", ";
            }, this);
            displayString = displayString.substring(0, displayString.length - 2);
            return displayString;
    },
    }
    Which displays fine, however the editor: { } plugin doesnt work with that method.

    I want to use the editor plugin to be able to edit the values. My Editor currently looks like:

    Code:
     editor: {
                            xtype: 'combo',
                            store: me.storeName
                            editable: false,
                            displayField: 'value',
                            valueField: 'id',
                            multiSelect: true
                        }
    and i've hooked into the:

    Code:
    me.on('beforeedit', function (editor, context) {
            });
    was thinking maybe I can hook into the beforeedit and grab the index values for the values in the column and then pass them to the editor combo box?

    Was hoping someone could point me in the right direction.

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Posts
    432
    Answers
    11

    Default

    ediitable is normally set on the actual column and you have it in the editor block. Can you clarify what you are doing there?

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    48
    Answers
    3

    Default

    So basically you can select multiple values from the combo box in the editor and it changes the HasMany Associated Store on the Main Model which updates the column in the grid.

    Grid Column (from associated store) and being able to edit it using the editor plugin (and its a multi select combo field)

    Is there a better way to do this?

    Heres my solution, I am not sure this is the best way but here it goes:

    Edit Combo
    Code:
    Ext.define('MyApp.utility.FundMultiSelect', {
        extend: 'Ext.form.field.ComboBox',
        multiSelect: true,
        fundTypeEnumStore: null,
        initComponent: function() {
            var me = this;
            me.store = Ext.create('MyApp.utility.EnumHelper').getStoreByEnumName('fTypes');
            me.store.load();
            Ext.apply(this, {
                displayField: 'value',
                valueField: 'key'
            });
    
    
            me.callParent();
        },
        listeners: {
            change: function (combo, newValue, oldValue, eOpts) {            
                if (!newValue || !newValue[0]) {
                    newValue = oldValue;
                    combo.setValue(oldValue);
                }
            }
        }
    });
    Column:
    Code:
    Ext.define('MyApp.utility.FundTypeColumn', {
        extend: 'Ext.grid.column.Column',
        fundTypeEnumStore: null,
        editPlugin: true,
        initComponent: function () {
            var me = this;
            me.fundTypeEnumStore = Ext.create('MyApp.utility.EnumHelper').getStoreByEnumName('fTypes');
            Ext.apply(this, {
    
    
                text: 'Fund(s)',
                renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
                    var displayString = "";
                    Ext.Array.forEach(record.fundTypes().getRange(), function (value) {
                        displayString += me.fundTypeEnumStore.getById(value.get('key')).get('value') + ", ";
                        }, this);
                        if (displayString.length > 3) {
                            displayString = displayString.substring(0, displayString.length - 2);
                        }
                    return displayString;
                },
                editor: (me.editPlugin === true ) ? Ext.create('ExpenseTracker.utility.FundMultiSelect', {
                    name: 'FundCol',
                    displayField: 'value',
                    valueField: 'key'
                }) : false
            });
    
    
            me.callParent();
        }
    });
    and Finally the Save on Edit:

    Code:
    if (e.record.fTypesStore.getRange().length > 0) {
                    var values = e.record.fTypesStore.getRange();
    
    
                    var oldFunds = [];
                    var newFunds = e.newValues.FundCol;
    
    
                    for (var i = 0; i < values.length; i++) {
                        oldFunds.push(values[i].get('key'));
                    }
    
    
                    toRemove = Ext.Array.difference(oldFunds, newFunds);
                    toAdd = Ext.Array.difference(newFunds, oldFunds);
    
    
                    Ext.Array.forEach(toRemove, function (removeId) {
                        var index = e.record.fTypesStore.find('key', removeId);
                        if (index > -1) {
                            var rec = e.record.fTypesStore.getAt(index);
                            e.record.fTypesStore.remove(rec);
                            e.grid.store.getAt(e.rowIdx).fTypes().remove(rec)
                        }
                    }, this);
                } else {
                    var toAdd = e.newValues.FundCol;
                }
    
    
                Ext.Array.forEach(toAdd, function (addId) {
                    var rec = me.fTypeEnumStore.getById(addId);
                    e.record.fTypes().add(rec);
                }, this);

Posting Permissions

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