CODEWITHSUNDEEP
extjsextjs4extjs4.2
GauteR
GauteR

Reputation: 360

ExtJS 4.2.x: Tree bound to grid

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.

Upvotes: 0

Views: 280

Answers (1)

Reimius
Reimius

Reputation: 5712

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

});

Upvotes: 1

Related Questions