如何使用store在accordion中创建ExtJS4树？

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

我想实现它与第一级和每个手风琴面板内的树手风琴

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

---

以下是工作示例：

阿里

这是修改版，希望是对的

---

谢谢你的回答，但我有这个数据，ii现在是一棵树，我想知道如何编辑第一级自动绑定到每个选项卡内的一棵树，是可能的还是我需要扩展手风琴来实现这样的绑定？阿里，我不明白。哪个节点将是菜单的根节点？现在看起来是这样的：，我想让第一层成为手风琴，第二层、第三层、第四层将保持为一棵树，我知道如何在像knockoutJs这样的库中实现这一点，让一些嵌套模型成为模板，我可以用一行代码绑定它，但我是extjs的新手！阿里，我将实现完整的代码，请稍等。谢谢我明白了这一点，我需要手动创建手风琴面板，并在主题中添加树，例如为“Saramad.ERP.Accounting”创建手风琴面板，然后将其所有子项添加为树。我以前在knockoutjs中这样做：阿里，最后我想我解决了这个问题，但有一个问题。正如您所知，json数据包含所有信息。我们应该用“Accordion部分”来划分json数据。我什么都试过了，但没有成功。我可以在accordion中加载树的每个部分，但是当我更改树的根节点时，另一个accordion树就会消失。我会尽快分享代码的。阿里，我终于做到了，请检查代码并拨弄！我通过扩展panel类并将所有数据加载到treestore中编写了类似的代码，但没有成功。你救了我的命。

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

});

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