PDA

View Full Version : Putting the HasMany Associated Data into Grid Column and Make It Editable



jakejamessteele
4 Dec 2013, 1:22 PM
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:


{
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:


editor: {
xtype: 'combo',
store: me.storeName
editable: false,
displayField: 'value',
valueField: 'id',
multiSelect: true
}


and i've hooked into the:



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.

Kevin Jackson
6 Dec 2013, 2:23 PM
ediitable is normally set on the actual column and you have it in the editor block. Can you clarify what you are doing there?

jakejamessteele
6 Dec 2013, 2:28 PM
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


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:


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:



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);