Привязанные комбобоксы в ExtJS в примере справочника

У всех нас возникала проблема в ExtJS или вообще в любом языке программирования с использованием множеств комбобоксов.
Понятное дело сразу в голову приходит мысль использовать для этого справочники (в одной таблице конечно).
С серверной стороной вроде понятно. И с одинокими справочниками тоже (ни детей, ни отцов). Не будем углубляться.

Вся проблема в том что когда загружаете Store в привязанных комбобоксах они загружают весь справочник из-за того что не знают отцовского ID.

Не будем же например загружать весь список городов России. Все привязанные комбобоксы (точнее ихние Store) будем загружать после загрузки отцовских Store, а «отцы» загружаются без никаких нареканий.



Смотрим код. Тут думаю все и всем понятней будет:

Ext.define('Ext.ux.combo.SpravCombo', {
    extend:'Ext.form.field.ComboBox',
    alias:['widget.spravcombo'],
    displayField:'value',
    valueField:'valueid',
    queryMode:'local',
    typeAhead:false,
    editable:false,
    firstTime:true,
    listeners:{
        'render':function (combo) {
            if (!combo.parentCombo) combo.getStore().load();
            //Будем искать отцовское комбо
            if (this.parentCombo) {
                var parentCombo = this.up().down("spravcombo[name=" + this.parentCombo + "]");
                parentCombo.on("parentChange", function (parentcombo) {
                    var myStore = combo.getStore();
                    myStore.proxy.extraParams.parentId = parentCombo.getValue();
                    myStore.load();
                    //Если первый раз меняется значение то не трогаем
                    if (combo.firstTime) {
                        combo.firstTime = false;
                    } else {
                        combo.clearValue();
                    }
                });
            }
        },
        'change':function (combo, newValue, OldValue) {
            this.fireEvent('parentChange');
        }
    },
    constructor:function (config) {
        this.store = Ext.create('Ext.data.Store', {
            autoLoad:false,
            fields:['valueid', 'value'],
            proxy:{
                type:'ajax',
                url:'/index.php/api/sprav', //Тут свой url
                reader:{
                    type:'json',
                    root:'data'
                },
                extraParams:{
                    classId:config.classId //Тут можно дальше добавлять своих параметров. Немножко некрасиво сделал
                }
            }
        });
        this.callParent(arguments);
    }
});

Примерно в коде используем так:

{
    xtype:'spravcombo',
    classId:'1',
    fieldLabel:'Страна',
    allowBlank:false,
    name:'country'
},
{
    xtype:'spravcombo',
    classId:'2',
    fieldLabel:'Регион',
    parentCombo:'country',
    allowBlank:false,
    name:'region'
},
{
    xtype:'spravcombo',
    classId:'3',
    fieldLabel:'Город',
    parentCombo:'region',
    allowBlank:false,
    name:'city'
}

Тут classId — Id справочника. А parentCombo — name отцовского комбобокса. А серверная сторона на Ваше усмотрение.
Если не указан parentCombo то этот комбобокс «одиночка».