ExtJS Tree Деревья

Самый простой пример дерева в ExtJS - дерево, берущее свои данные из статического объекта.

var data1={ // корневой элемент
    text: 'Root', // текст корневого элемента
    expanded: true, // указание на то что узел развернут
    children: [ // массив дочерних элементов   
        {
            text: 'Child 1',// имя элемента
            leaf: true
        }, // указание на то, что дочерних элементов нет  
        {
            text: 'Child 2',
            leaf: true
        },
        {
            text: 'Child 3',
            expanded: true,
            children: [
                {
                    text: 'Child 31',
                    leaf: true
                }
            ]
        }
    ]
}

Ext.create('Ext.tree.Panel', { // создание панели с деревом
    rootVisible: false, // спрятать корневой узел
    renderTo: 'ex1', // рендерить в #ex1
    title: 'Simple Tree', // заголовок панели
    root: data1 // источник данных
});



В этом примере в качестве источника данных использовался статичный массив.
В следующем примере в качестве источника данных появляется прослойка - хранилище (Storage).

var data2={// структура данных та же, что и в примере выше.}  

var store2 = Ext.create('Ext.data.TreeStore', {root: data2// создается хранилище данных, взятых из data2});

Ext.create('Ext.tree.Panel', {
    rootVisible: false,  // спрятать корневой узел
    store: store2,  // указывается хранилище данных
    title: 'Simple Tree var2',
    renderTo: 'ex2',
    height: 200
});



Дерево, загружаемое через AJAX.

var store3 = Ext.create('Ext.data.TreeStore', {
     proxy: { // указание типа иисточника данных
         type: 'ajax', //  тип данных - ajax
         url: 'tree.php' //  урл источника данных
     }
});

Ext.create('Ext.tree.Panel', {
     store: store3,
     rootVisible: true,
     title: 'Ajax Tree',
     renderTo: 'ex3',
     height: 200
});

Отличие этого примера от предыдущего в том, что хранилище настроено на прием данных с сервера.
На стороне сервера скрипт tree.php выдает json-объект с такой же структурой данных, как было рассмотрено выше.

В результате выполнения данного кода ExtJS выведет на экран сформированное дерево.



treeGrid - комбинация дерева и таблицы.
Так же как и в таблице в treeGrid необходимо сначала определить поля для таблицы:

var cols=[
    {
        xtype: 'treecolumn', // тип поля - таблица
        text: 'Name', // текстовое название поля    
        dataIndex: 'name'// индекс поля
    },
    {
        text: 'Description',
        dataIndex: 'description'
    },
    {
        text: 'Owner',
        dataIndex: 'owner'
    }
];

var fields= ['name', 'description','owner']; // порядок отображения полей

Дальше идет схожий с предыдущими вариантами код, за исключением данных, в которых указываются те же поля, что и в fields.

Ext.create('Ext.tree.Panel', {
   renderTo: 'ex5',
   id:'tree',
   autoscroll:true,
   title: 'TreeGrid',
   height: 150,
   fields: fields,
   columns: cols,
   root: {
       name: 'Root',
       description: 'Root description',
       owner: 'Root owner',
       expanded: true,
       children: [
           {
               name: 'Child 1',
               description: 'Description 1',
               owner: 'owner 1',
               leaf: true
           },
           {
               name: 'Child 2',
               description: 'Description 2',
               owner: 'owner 2',
               leaf: true
           }
       ]
   }
});