ExtJS 4.2.x：树绑定到网格

Question

我在将选定数据从树形面板绑定到网格面板时遇到一些问题。

当我在树中选择一个叶子节点时，我希望它的子节点加载到下面的绑定网格中。

我的解决方案是一次加载整个商店，然后使用内置功能过滤结果，但我还没有产生想要的结果。其中一个过滤器正在产生我想要的东西，但这是唯一的一个（检查 JSFiddle 链接） - 并且没有抛出任何错误。

我在 JSFiddle 创建了一个演示：http://jsfiddle.net/E3LPa/

我相信问题出在这个控制器上：

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
            }
        });
    }

});

如果有人能帮助我找出我做错了什么，将不胜感激。

Answer 1

您的侧边栏类不必要地重新加载了商店，这可能是搞砸了，试试这段代码，它有各种修复方法来解决这个问题：

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
            }
        });
    }

});