ExtJS: Linked combobox puzzle

Question

Hello guys.

I write special combo object to use it as linked combos. Here it is:

comboDivClass = Ext.extend(Ext.form.ComboBox, {
            fieldLabel: 'Divisions',
            anchor: '95%',
            lazyRender:true,
            store:new Ext.data.Store({
                  proxy: proxy,
                  baseParams:{rfb_type:'divisions'},
                  reader: divReader,
                  autoLoad: true
            }),
            displayField:'div_name',
            allowBlank:false,
            valueField:'div_id',
            triggerAction:'all',
            mode:'local',
            listeners:{
                select:{
                    fn:function(combo, value) {

                        if (this.idChildCombo) {
                            var modelCmp = Ext.getCmp(this.idChildCombo);
                            modelCmp.setValue('');
                            modelCmp.getStore().reload({
                                params: { 'div_id': this.getValue() }
                            });
                        }   
                    }
                }
            },/**/
            hiddenName:'div_id',
            initComponent: function() {comboDivClass.superclass.initComponent.call(this);}})

As you may see, this combobox load data at child combobox store(which set as idChildCombo). Ok. Here is how i declare it

new comboDivClass({id:'sub0div',idChildCombo:'sub1div'}),
new comboDivClass({id:'sub1div'})

Yes it works, but it have some odd trouble - it load not only sub1div store, it load at sub0div store too. Why? What im doing wrong?

Answer 1

One thing I see is that you have mode: 'local' config, while it should be remote.

Other thing to consider: Why don't you do it more like this:

var c1 = new comboDivClass({id:'sub0div'});
var c2 = new comboDivClass({id:'sub1div'});
c1.on('select',function(combo, value) {c2.getStore().reload({
  params: { 'div_id': c1.getValue() }
})});

Answer 2

ChildCombo.setMasterField( masterField ) {
  masterField.on('change', function(field){
    this.getStore().filterBy( function(){ //filter by masterFIeld.getValue() } );
  })
}

The idea is to link child field to parent not parent to child and this way you can link to any kind form field no only combo.

Here in child combo you have to have store with three columns [group,value,label] where group is value of master field.

This way you can manage to have mode than one master field.