Как построить дерево в EXTJS?

Question

Как построить дерево в EXTJS?Он должен включать изображения (с символами «+» и «-») с соответствующим узлом. Можете ли вы получить мне код для того же ????

Answer 1

Начните с определения Ext.data.TreeStore для загрузки ваших данных в:

var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: 'treeData.json'
    },
    root: {
        text: 'Countries',
        expanded: true
    }
});

Json:

[{
"text": "United Kindom",
"children": [{
    "text": "Glasgow",
    "leaf": true
}, {
    "text": "Edinburgh",
    "leaf": true
}, {
    "text": "London",
    "leaf": true
}],
"leaf": false
},
{
    "text": "France",
    "leaf": true
}
...
]

Создайте древовидную панель и отобразите ее в теле документа:

Ext.create('Ext.tree.Panel', {
    title: 'Countries & Cities',
    width: 500,
    height: 300,
    store: store,
    useArrows: false,
    rootVisible: false,
    renderTo: Ext.getBody(),
    style: 'margin: 50px'
});

Answer 2

Просто посмотрите на исходный код любого из Ext JS Tree демо .

Например :

Ext.onReady(function(){
    // shorthand
    var Tree = Ext.tree;

    var tree = new Tree.TreePanel({
        useArrows: true,
        autoScroll: true,
        animate: true,
        enableDD: true,
        containerScroll: true,
        border: false,
        // auto create TreeLoader
        dataUrl: 'get-nodes.php',

        root: {
            nodeType: 'async',
            text: 'Ext JS',
            draggable: false,
            id: 'src'
        }
    });

    // render the tree
    tree.render('tree-div');
    tree.getRootNode().expand();
});

Answer 3

Это выглядит как хороший пример: статическое дерево для статического дерева.

Саки делает много уроков и примеров, которые очень полезны для EXTJS.Один из примеров Саки - это асинхронное дерево.Вы можете найти его, посмотрев налево в состоянии.

Это похоже на хороший учебник для динамического дерева с бэкэндом Ruby on Rails: динамическое дерево с бэкэндом RoR .