Деревья в Ext JS 6

Ext.tree.Panel наследуется от Ext.panel.Table, поэтому есть поддержка столбцов. Дереву нужен специальный стор типа Ext.Store.TreeStore.

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        text: 'Continents',

        children: [{
            text: 'Antarctica',
            leaf: true
        }, {
            text: 'South America',
            expanded: true,
            children: [{
                text: 'Brazil',
                leaf: true
            }, {
                text: 'Chile',
                leaf: true
            }]
        }, {
            text: 'Asia',
            expanded: true,
            children: [{
                text: 'India',
                leaf: true
            }, {
                text: 'China',
                leaf: true
            }]
        }, {
            text: 'Africa',
            leaf: true
        }]
    }
});

Пример простого дерева:

Ext.create('Ext.tree.Panel', {
    title: 'Basic Tree',
    width: 200,
    height: 450,
    store: store,
    rootVisible: true,
    renderTo: Ext.getBody()
});

Поддержка drag and drop реализуется с помощью плагина treeviewdragdrop:

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        text: 'Continents',

        checked: false,
        children: [{
            text: 'Antarctica',
            leaf: true,
            checked: false
        }, {
            text: 'South America',
            expanded: false,
            checked: true,
            children: [{
                text: 'Chile',
                leaf: true,
                checked: true
            }]
        }, {
            text: 'Asia',
            expanded: true,
            checked: true,
            children: [{
                text: 'India',
                leaf: true,
                checked: true
            }, {
                text: 'China',
                leaf: true,
                checked: true
            }]
        }, {
            text: 'Africa',
            leaf: true,
            checked: true
        }]
    }
});

Ext.create('Ext.tree.Panel', {
    title: 'Basic Tree',
    width: 200,
    height: 450,
    store: store,
    rootVisible: true,
    useArrows: true,
    lines: false,
    renderTo: Ext.getBody(),
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            containerScroll: true
        }
    }
});

В дерево можно добавлять столбцы. По умолчанию в дереве один столбец для которого используется текстовое поле чтобы отображать узлы.

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        text: 'Continents',
        children: [{
            name: 'Antarctica',
            population: 0,
            area: 14,
            leaf: true
        }, {
            name: 'South America',
            population: 385,
            area: 17.84,
            expanded: false,
            children: [{
                name: 'Chile',
                population: 18,
                area: 0.7,
                leaf: true,
            }]
        }, {
            name: 'Asia',
            expanded: true,
            population: 4164,
            area: 44.57,
            children: [{
                name: 'India',
                leaf: true,
                population: 1210,
                area: 3.2
            }, {
                name: 'China',
                leaf: true,
                population: 1357,
                area: 9.5
            }]
        }, {
            name: 'Africa',
            leaf: true,
            population: 1110,
            area: 30
        }]
    }
});

Как и у грида столбцы дерева могут быть любого типа (checkbox, picture, button, URL, ...).

Ext.create('Ext.tree.Panel', {
    title: 'Tree Grid',
    width: 500,
    height: 450,
    store: store,
    rootVisible: false,
    useArrows: true,
    lines: false,
    scope: this,
    renderTo: Ext.getBody(),
    columns: [{
        xtype: 'treecolumn',
        text: 'Name',
        flex: 1,
        sortable: true,
        dataIndex: 'name'
    }, {

        text: 'Population (millons)',
        sortable: true,
        width: 150,
        dataIndex: 'population'
    }, {

        text: 'Area (millons km^2)',
        width: 150,
        sortable: true,
        dataIndex: 'area'
    }],
});