Chained comboboxes with possibility to select child cb without parent - extjs

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?