chained store source from another viewmodel

Question

I want to implement chained store, whose source store placed in another ViewModel. And if I write as usual, chained store is empty, because View Model couldn't see store from another ViewModel this way.

sport_chained: {
    source: 'sport' // sport is in another viewmodel
} 

I found this solution:

// in ViewModel
constructor: function () {
    this.callParent(arguments);
    Ext.defer(function () {
        this.setStores({
            sport_chained: {
                source: Ext.data.StoreManager.lookup('sport')
            }
        });
    },10);
} 

but it's not convinient, since then I have to place in constructor all another stores in this ViewModel. Maybe someone did something like this and knows how to do it in more convinient way? https://fiddle.sencha.com/#fiddle/otn

Answer 1

Maybe helpful for others who end up here. I was able to do this...but you have to think about it a little differently...

So, I have a viewModel on a parent component somewhere, and I want the child component to be able to chain a store to the parent...

ParentViewModel.js

alias: 'viewmodel.parent',
stores: {
    parentStore: {
        model: 'MyApp.model.CoolModel'
    }
}

ChildViewModel.js

alias: 'viewmodel.child',
stores: {
    childStore: {
        model: 'MyApp.model.CoolModel'
    }
}

ChildView.js

extend: 'Ext.grid.Panel',
alias: 'wiget.child',
{
    viewModel: {
        type: 'child'
    }
}

ParentView.js

alias: 'wiget.parent',
{
    viewModel: {
        type: 'parent'
    }
},

items: [
    {
        xtype: 'child',
        viewModel: {
            stores: {
                childStore: {
                    // Notice the binding to the parent store without the bind wrapper - no idea why it's done that way
                    source: '{parentStore}'
                }
            }
        },

        // So we chained the childStore to the parentStore above using the source..then we can bind to the chained store below like you would expect
        bind: {
            store: '{childStore}'
        }
    }
]

Those are just brief snippets but hopefully it demonstrates the point on how to do chaining declaratively without having to force the issue through the controller. One other thing to note - I extended a gridpanel just so it was easy to illustrate binding the store.