ExtJS 4.2.x: Tree bound to grid - extjs

Question

I'm having some problems binding selected data from a treepanel to a gridpanel.
When I select a node that is a leaf in the tree, I want its children to load in the bound grid below.
My solution to it is to load the entire store at once, then filter the results using the built-in functionality, but I have yet to produce the wanted results. One of the filters are producing what I want, but that's the only one (check the JSFiddle link) - and no errors are thrown.
I have created a demonstration at JSFiddle: http://jsfiddle.net/E3LPa/
I believe the problem is in this controller:
Ext.define('Exxica.controller.CalculationSidebar', {
extend: 'Ext.app.Controller',
models: [
'ResourceGroup',
'ResourceItem'],
stores: [
'ResourceGroups',
'ResourceItems'],
views: [
'ResourceItemsGrid',
'Debug'],
onTeCalculation_RightSidebar_TabPanel_ResourceGroupsSelect: function (model, selected, eOpts) {
var store = this.getStore("ResourceItems");
var item = selected[0];
if (item.get('leaf')) {
if (this.setFilter(item.get('id'), store)) store.reload();
}
},
setFilter: function (f, s) {
var fId = parseInt(f, 10);
console.log(s);
if (fId !== 0) {
s.clearFilter();
s.filter('group_id', fId);
return true;
} else {
return false;
}
},
init: function (application) {
this.control({
"#teCalculation_RightSidebar_TabPanel_ResourceGroups": {
selectionchange: this.onTeCalculation_RightSidebar_TabPanel_ResourceGroupsSelect
}
});
}
});
If anyone could help me figure out what I am doing wrong, that would be greatly appreciated.

Answer 1

Your sidebar class was reloading the store unnecessarily and that was probably screwing things up, try this code which has various fixes to remedy this:
Ext.define('Exxica.controller.CalculationSidebar', {
extend: 'Ext.app.Controller',
models: [
'ResourceGroup',
'ResourceItem'],
stores: [
'ResourceGroups',
'ResourceItems'],
views: [
'ResourceItemsGrid',
'Debug'],
loaded: false,
onTeCalculation_RightSidebar_TabPanel_ResourceGroupsSelect: function (model, selected, eOpts) {
var store = this.getStore("ResourceItems");
var item = selected[0];
if(!this.loaded)
{
store.load();
this.loaded = true;
}
if (item.get('leaf')) {
this.setFilter(item.get('id'), store);
}
else
{
this.setFilter(-1, store);
}
},
setFilter: function (f, s) {
var fId = parseInt(f, 10);
console.log(s);
if (fId !== 0) {
s.clearFilter();
s.filter('group_id', fId);
return true;
} else {
return false;
}
},
init: function (application) {
this.control({
"#teCalculation_RightSidebar_TabPanel_ResourceGroups": {
selectionchange: this.onTeCalculation_RightSidebar_TabPanel_ResourceGroupsSelect
}
});
}
});