.. / 10.1 Деревья в ExtJS. Инициализация

ExtJS-4

1. Дерево со статическими данными

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

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

2. Дерево c данными подгружаемыми по Ajax

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

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

3. treeGrid

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
        }] 
    }

2011-12-11
ExtJS-4

.. / 10.1 Деревья в ExtJS. Инициализация

1. Дерево со статическими данными

2. Дерево c данными подгружаемыми по Ajax

3. treeGrid

Далее