Tree Rowediting - How to accomplish dynamic Editor interaction between cells?

[Nicklori]

Tree Rowediting - How to accomplish dynamic Editor interaction between cells?


For example,in Tree Rowediting I have two columns each with an Editor which is a combobox. During the edit I want the changes in the combo box in column one to affect what items are displayed in the combobox of column two.


Just for example - if the row represents a client order and I select "Man's shoe" from the shoe combo box in column one, I want the combo box in column two to show a choice of "boots,sandals". Conversely if the user selects "Woman's shoe" I need the combo box in column two to show a choice of "Clogs, slippers".


I'm trying out extjs 4.1 which has the Ext.grid.plugin.Rowediting for Ext.tree.Panel.


My boss has also asked to see if I can remove the two buttons on the rowedit object and just have implicit updating occur - but the interactive combobox problem is the paramount tricky one I think.


extjs 4.1 looks to be a great toolkit, but modifying the performance of the tools and configuring them has me looking clueless and expendable. I would be very grateful for a helpful example or link to one.

[mitchellsimoens]

You would have to get the editor of the second column and load/filter/whatever on that editor's field.

[Nicklori]

Thank you - by adding a listener in the "master" combo I could control the "slave" combo by clearing and resetting its filter and forcing a reload. In case it is of assistance to others the method is roughly as follows:

listeners:{select:{fn:function(combo, value) {
var modelCmp = Ext.getCmp('SlaveComboName');
modelCmp.clearValue();
modelCmp.store.removeAll();
modelCmp.store.clearFilter();
var byGenderType = new Ext.util.Filter({
filterFn: function(item) {
if (MasterComboName.getValue()=='1')
return (item.data.filter == 'M');
else {
return (item.data.filter == 'W');}
}
});
modelCmp.store.filters.add(byGenderType);
modelCmp.store.load();
modelCmp.lastQuery='';
}}}