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?

Here whati tried: i put filters in combo bind instead of store and it works. but i don't sure is it's good solution. — layabout

layabout layabout · Accepted Answer · 2015-10-28T11:09:41

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?

Chained comboboxes with possibility to select child cb without parent

1 Answers