如何在不同的小部件中显示不同级别的树存储

Question

我正在使用 extjs 开发一个页面，并且想将一个树存储的信息显示到三个小部件：两个树面板和一个网格面板。

1. 树店有四层
2. 在树面板 1 中显示级别 1 和级别 2
3. 在树面板 2 中显示级别 3，仅显示级别 2 的一个节点的子节点（在树面板 1 中选择）
4. 在表格中显示级别 4，仅级别 3 的一个节点中的子节点（在树面板 2 中选择）

关于如何实施它有什么建议吗？提前致谢。

Answer 1

这里有一个实用的解决方案。你可以看到它在那个小提琴中运行：

https://fiddle.sencha.com/#view/editor&fiddle/3ca2

/*
 * @author: César Pedro Zea Gomez
 * cesarzea@jaunesistemas.com
 * https://www.cesarzea.com
 *
 * Contact for freelancer jobs.
 *
 */
Ext.application({
    name: 'Fiddle',

    data: [],

    tStore1: null,
    tr1: null,

    tStore2: null,
    tr2: null,

    grid: null,

    launch: function () {

        this.data = {
            id: '',
            children: this.generateData("0", 1, 4)
        }

        console.log(this.data);

        this.tStore1 = Ext.create('Ext.data.TreeStore', {
            root: Ext.clone(this.data)
        });

        this.tStore1.setFilters({
            property: 'level',
            value: 3,
            operator: '<'
        })

        this.tr1 = Ext.create({
            xtype: 'treepanel',
            rootVisible: false,
            store: this.tStore1,
            title: 'Level 1 & 2 (select a level 2 node)',
            flex: 1,

            listeners: {
                selectionchange: function (cmp, selected, eOpts) {
                    let d = this.findRowInTreeData(Ext.clone(this.data), selected[0].data.id);
                    if (d !== null) {
                        d.expanded = true;
                        this.tr2.getStore().setRoot(d);
                        this.tr2.getStore().setFilters({
                            property: 'level',
                            value: 3,
                            operator: '==='
                        })
                    }
                },
                scope: this
            }
        })

        this.tStore2 = Ext.create('Ext.data.TreeStore', {
            root: {
                tag: '0',
                expanded: true,
                children: []
            }
        });

        this.tr2 = Ext.create({
            xtype: 'treepanel',
            rootVisible: false,
            store: this.tStore2,
            title: 'Level 3 (select a node)',

            width: 200,
            height: 200,

            flex: 1,

            listeners: {
                selectionchange: function (cmp, selected, eOpts) {
                    let d = this.findRowInTreeData(Ext.clone(this.data), selected[0].data.id);
                    if (d !== null) {
                        this.grid.getStore().setData(d.children);
                    }
                },
                scope: this
            }
        })

        this.grid = Ext.create({
            xtype: 'gridpanel',
            title: 'Level 4',
            store: new Ext.data.Store,
            columns: [{
                text: 'Node',
                dataIndex: 'text',
                flex: 1
            }]
        })

        Ext.create({
            fullscreen: true,
            xtype: 'panel',
            renderTo: document.body,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                    xtype: 'panel',
                    html: 'This example display the information from one treestore to three widget: two tree panel and one grid panel.<br/><br/>' +
                        'The treestore has four levels<br/>' +
                        '<ul><li>Display level 1 and level 2 in tree panel 1</li>' +
                        '<li>Display level 3 in tree panel 2, only the children nodes of one node of level 2 (which is selected in tree panel 1)</li>' +
                        '<li>Display level 4 in table, onle the children nodes in one node of of level 3 (which is selected in tree panel 2)</li></ul>'
                },
                this.tr1, this.tr2, this.grid
            ]

        });
    },

    generateData: function (tag, level, maxLevel) {

        if (level > maxLevel)
            return [];

        let d = [];
        let lv = tag + '-' + level;

        for (let i = 0; i <= 5; i++) {
            let id = lv + '-' + i;

            d.push({
                text: 'Level: ' + level + '. Node ' + id,
                children: this.generateData(id, level + 1, maxLevel),
                expanded: false,
                level: level,
                id: id
            })
        }

        return d;

    },

    findRowInTreeData: function (root, value) {

        if (root === null)
            return null;

        if (root.id === value) {
            console.log(root);
            return root;
        }

        for (let i = 0; i < root.children.length; i++) {
            let r = this.findRowInTreeData(root.children[i], value);
            if (r !== null) {
                return r;
            }
        }
        return null;

    }

});