Sencha ExtJS 4.2: how can I synchronize two combo editors in a grid?

Question

I need to edit two columns of my grid using combos as editors, and I need the values shown in the second to be filtered accordingly to the value selected in the first one. There is also the problem that I need to show the "bound" value (ie "description") instead of the Id, in the grid cell. I prepared a (very simplified) fiddle to show the problem here

Click here for the fiddle

Looking at the fiddle, I'd need to select the brand in the first combo and then a model in the second, but I should obviously find only the models from the selected brand in there. How can I show the descriptive text in the cell? How can I filter the second combo?

Thanks

Answer 1

The editing plugin has an beforeedit event you can use, for example:

listeners: {
    beforeedit: function(editor, context) {
        var record = context.record;

         if (context.field !== 'modelId') {
             return;
         }

         models.clearFilter(true);

         models.filter({
             property: 'brandId',
             value: record.getId()
        });
    }
}

Working example: https://fiddle.sencha.com/#fiddle/12hn