如何使用商店在手风琴内创建 ExtJs 4 树？答案

【问题标题】：how to create ExtJs 4 Tree inside accordion using store?如何使用商店在手风琴内创建 ExtJs 4 树？
【发布时间】：2014-04-14 06:56:48
【问题描述】：

我有一个可能有 4 级菜单的应用程序，

我想在第一级使用 Accordion 和每个手风琴面板内的树来实现它。

如何在商店中实现这一点？

http://i.stack.imgur.com/DFQDl.png

【问题讨论】：

标签： extjs tree accordion datastore

【解决方案1】：

这是工作示例：

ExtJS - Treepanel inside the Accordion Menu

Ext.onReady(function () {
    Ext.create('Ext.panel.Panel', {
        title: 'Accordion Layout',
        width: 300,
        height: 300,
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true
        },
        items: [{
            title: 'Panel 1',
            id: 'panelOne',
            html: 'Panel content!'
        }, {
            title: 'Panel 2',
            html: 'Panel content!'
        }, {
            title: 'Panel 3',
            html: 'Panel content!'
        }],
        renderTo: Ext.getBody()
    });

    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [
                { text: "detention", leaf: true },
                { text: "homework", expanded: true, children: [
                    { text: "book report", leaf: true },
                    { text: "algebra", leaf: true}
                ] },
                { text: "buy lottery tickets", leaf: true }
            ]
        }
    });

    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree',
        id: 'treePanel',
        header: false,
        width: 200,
        height: 150,
        store: store,
        rootVisible: false,
        renderTo: Ext.getBody()
    });    

    var panel = Ext.getCmp('panelOne');
    var tree = Ext.getCmp('treePanel');
    panel.add(tree);

});

【讨论】：

感谢您的回答，但我有这个数据jsonfiddle.net/h5eb4，ii 现在是一棵树，我想知道如何编辑第一级以自动绑定到每个选项卡内的手风琴和树，是有可能还是我需要扩展手风琴来实现这样的绑定？
阿里，我不明白。哪个节点将成为菜单的根节点？
现在看起来像这样：i57.tinypic.com/29yjwo5.png，我想制作第一级手风琴，第 2、3、4 级将保留为一棵树，我知道如何在像 knockoutJs 这样的库中制作它，使一些嵌套模型成为模板，并且使用单行代码我可以绑定它，但我是 extjs 的新手！
阿里，我来实现完整代码，稍等。

【解决方案2】：

阿里，

这里是修改版，希望是对的！

ExtJS - TreePanel inside the Panel

Ext.define('AccModel', {
    extend: 'Ext.data.Model',
    fields: ['id','text']
});

var accordion = Ext.create('Ext.panel.Panel', {
    width: 400,
    height: 620,
    id: 'accordionPanel',
    defaults: {
        bodyStyle: 'padding:15px'
    },
    layout: {
        type: 'accordion',
        titleCollapse: false,
        animate: true,
        activeOnTop: false
    },
    renderTo: Ext.getBody()
});

var addAccordion = function() {
    Ext.Ajax.request({
        url: 'treenode.json',
        success: function(response) {
            var nodes = Ext.JSON.decode(response.responseText);

            Ext.each(nodes, function(node) {
                accordion.add({
                    title: node.id,
                    id: node.id,
                    items: Ext.create('Ext.tree.Panel', {
                        header: false,
                        width: 380,
                        height: 600,
                        rootVisible: false,
                        root: {
                            expanded: false,
                            children: node.children
                        }
                    })
                });
            })
        }
    });
}

var init=function() {
    addAccordion();
}

Ext.onReady(function () {
    init();
});

【讨论】：

谢谢我明白了，我需要手动创建手风琴面板，并在主题内添加树，例如为“Saramad.ERP.Accounting”创建一个手风琴面板，然后将其所有子项添加为一棵树。
我以前在 knockoutjs 中这样做是这样的：knockoutjs.com/examples/collections.html
阿里，最后我想我解决了这个问题，但有一个问题。如您所知，您的 json 数据包含所有信息。我们应该将 json 数据按“Accordion Section”划分。我尝试了一切，但没有成功。我可以在手风琴内加载树的每个部分，但是当我更改树的根节点时，另一棵手风琴树消失了。我会尽快分享代码。
阿里，我终于做到了，请检查代码并小提琴！
我通过扩展面板类并将所有数据加载到树存储中编写了类似的代码，但没有成功。你救了我的命。