You can bind tree's row selection with proxy extra param. Anyway you need to trigger the store load explicitly. Here is an example without the viewcontroller instance:
Ext.define('MyApp.view.main.MainModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
selectedGroup: null
},
stores: {
users: {
model: 'User',
fields: [
'name', 'email', 'phone'
],
proxy: {
type: 'ajax',
url: 'resources/users.json',
reader: {
type: 'json',
rootProperty: 'users'
},
extraParams: {
myParam: '{selectedGroup.id}'
}
},
updateProxy: function (proxy) {
proxy.onAfter('extraparamschanged', this.load, this)
}
},
groups: {
type: 'tree',
root: {
expanded: true,
children: [
{text: 'group1', leaf: true},
{
text: 'group2', expanded: true, children: [
{text: 'subgroup1', leaf: true},
{text: 'subgroup2', leaf: true}
]
},
{text: 'group3', leaf: true}
]
}
}
}
});
Ext.define('MyApp.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'MyApp.view.main.MainModel'
],
viewModel: 'main',
layout: 'hbox',
items: [{
xtype: 'treepanel',
title: 'Groups Tree',
bind: {
selection: '{selectedGroup}',
store: '{groups}'
},
flex: 1
}, {
xtype: 'grid',
title: 'Users',
bind: '{users}',
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Company',
dataIndex: 'company',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 1
}],
flex: 1
}]
});