Chained comboboxes with possibility to select child cb without parent

Question

So basically i am trying to do the same as i did in my previous question - Chained combobox shows valuefield instead of displayfield when changing parent cb BUT now i want to be able to select child combo without picking parent.

Here is what i did to make basic filtering but i've stucked to make it possible to select child cb.

    Ext.define('AppTest.CategoryViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.category',
    stores: {
        categories: {
            fields: ['id', 'name'],
            proxy: {
                type: 'ajax',
                url: 'categories.json',
                reader: {
                    type: 'json'
                }
            }
        },
        users: {
            storeId: 'userStore',
            fields: ['id', 'category_id', 'number'],
            autoLoad: true,
            filters: [{
                property:'category_id',
                disabled: '{!categoryCombo.selection}',
                //disableOnEmpty:true,
                value: '{categoryCombo.selection.id}',
                /*filter: function (item) {
                    var me = this,
                        filterFn = me._filterFn || me.getFilterFn(),
                        convert = me.getConvert(),
                        value = me._value;
                    me._filterValue = value;
                    console.log(value);
                    me.isDateValue = Ext.isDate(value);
                    if (me.isDateValue) {
                        me.dateValue = value.getTime();
                    }
                    if (convert && !me.preventConvert[me.getOperator()]) {
                        me._filterValue = convert.call(me.scope || me, value);
                    }

                    return filterFn.call(me.scope || me, item);
                },*/

                //extjs is seems to be bugged here, disable doesn't work without it.
                updateDisableOnEmpty: function(disableOnEmpty) {
                    var disabled = this.getDisabled();
                    if (disableOnEmpty) {
                        disabled = Ext.isEmpty(this.getValue());
                    }
                    this.setDisabled(disabled);
                }


                //filterFn:function(item){
                    //console.log(new Error().stack);
                //}
            }],
            proxy: {
                type:'ajax',
                url:'users.json',
                reader: {
                    type:'json'
                }
            }
        }
    }
});

https://fiddle.sencha.com/#fiddle/103r

What am i missing?

Answer 1

Did it myself.

So i had to define publishers in parent config:

users: {
        alias:'store.users',
        fields: ['id', 'category_id', 'number'],
        autoLoad: true,
        filters: [{
            property:'category_id',
            value: '{categoryCombo.value}',
            //disabled: '{!categoryCombo.selection}',
            disableOnEmpty:true,
            //filter: function (item) {
            //    var me = this,
            //        filterFn = me._filterFn || me.getFilterFn(),
            //        convert = me.getConvert(),
            //        value = me._value;
            //    me._filterValue = value;
            //    console.log(value);
            //    me.isDateValue = Ext.isDate(value);
            //    if (me.isDateValue) {
            //        me.dateValue = value.getTime();
            //    }
            //    if (convert && !me.preventConvert[me.getOperator()]) {
            //        me._filterValue = convert.call(me.scope || me, value);
            //    }
            //
            //    return filterFn.call(me.scope || me, item);
            //},
            updateDisableOnEmpty: function(disableOnEmpty) {
                var disabled = this.getDisabled();
                if (disableOnEmpty) {
                    disabled = Ext.isEmpty(this.getValue());
                }
                this.setDisabled(disabled);
            }


            //filterFn:function(item){
                //console.log(new Error().stack);
            //}
        }],
        proxy: {
            type:'ajax',
            url:'resources/data/users.json',
            reader: {
                type:'json'
            }
        }
    }

 {
             //   store: 'categories',
                bind: {
                    store: '{categories}'
                },

                xtype: 'combo',
                reference: 'categoryCombo',
                displayField: 'name',
                valueField:'id',
                publishes:'value',
                name: 'category',
                typeAhead: false,
                fieldLabel: 'Category',
                emptyText: 'Select a category...',
                anchor: '95%'
            },
            {
                xtype: 'combo',
                name: 'user',
                reference: 'userCombo',
                fieldLabel: 'User',
                displayField: 'number',
                valueField: 'id',
                hiddenName: 'id',
                emptyText: 'Select a user...',
                anchor: '95%',
                //store: {
                //    type:'users'
                //},
                bind: {
                    fieldLabel: '{categoryCombo.selection.name}',
                    //filters: [{
                    //    property:'category_id',
                    //    value: '{categoryCombo.value}'
                    //    //disabled: '{!categoryCombo.selection}',
                    //    //disableOnEmpty:true
                    //}],
                    store: '{users}'
                },
                listeners: {
                    change: 'onSelectChange'
                }
            }

Behind the scenes what's the difference between this config and bind store?How did binds affect on perfomance? is this angular like?