Размещение двух корней в деревьях ExtJs4 - PullRequest
Новая
       0

Размещение двух корней в деревьях ExtJs4

0 голосов
/ 29 марта 2012

Я пытаюсь построить дерево на ExtJs4 с двумя вложенными корнями. Концепция этого заключается в том, чтобы иметь дерево, которое копирует «Имена участников», разделенные на два подмножества: «Обычные члены» и «Новые члены» Дерево создано правильно. Затем, когда я пытаюсь развернуть узел «Обычные члены», а затем свернуть и, наконец, снова развернуть его, я получаю следующее поведение: сохраняйте загруженные дубликаты дочерних элементов. После этого «Регулярные члены» не могут быть свернуты. То же самое происходит с узлом «Новые члены». Я мучаюсь два дня, чтобы найти решение. Может быть, есть другой способ создать что-то подобное, но я не знаю как. Любая помощь приветствуется Том

код: 

Ext.onReady(function() {

var store = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel',
proxy: {
type: 'ajax',
url: 'http://someUrl/a.cfm',
reader: {
type: 'json',
root: 'DATA'
}
},
root: {
text: 'Regular Members',
id: 'src',
expanded: false
}
});


var store1 = Ext.create('Ext.data.TreeStore', {
model: 'TreeModel1',
proxy: {
type: 'ajax',
url: 'http://someUrl/a1.cfm',
reader: {
type: 'json',
root: 'DATA'
}
},
root: {
text: 'New Members',
id: 'src1',
expanded: false
}
});



var TreeStore = Ext.create('Ext.data.TreeStore', {
root: {
text: 'Members',
id: 'rtt',
expanded: true
}
});

TreeStore.getRootNode().appendChild(store.getRootNode());
TreeStore.getRootNode().appendChild(store1.getRootNode());


var tree = Ext.create('Ext.tree.Panel', {
store: TreeStore,
hideHeaders: true,
rootVisible: true,
height: 350,
width: 400,
title: 'Directory Listing',
renderTo: 'tree',
collapsible: true
});


tree.getSelectionModel().on('selectionchange', function(sm, selectedRecord) {
var selectedMemberId = selectedRecord[0].data.id;
var rootNode = selectedRecord[0].getId();
if (selectedRecord.length && (selectedRecord[0].getId())!="src" && (selectedRecord[0].getId())!="src1" && (selectedRecord[0].getId())!="rtt"){alert(selectedMemberId);
}
else
{
alert('My root is: ' + rootNode);
}
});

});

1 Ответ

3 голосов
/ 30 марта 2012

попробуйте использовать только один магазин. Он должен иметь «виртуальный» корневой узел, содержащий столько элементов, сколько корневых узлов вы хотите на первом уровне, и установить rootVisible: false в дереве. Таким образом, у вас будет дерево, как показано ниже: 

non-visible root
|
+-- first root
|   :
|   
+-- second root
    :

Но учитывая, что вы установили rootVisible: false, вы увидите, что 

+-- first root
|   :
|   
+-- second root
    :

UPDATE Это JSON, который у меня есть в моем проекте (у меня есть дерево, которое показывает более одного корня) 

{
    "actions" : [{
        "action" : "Version 1.3.21.0",
        "url" : "/Operations/Version%201.3.21.0"
    }, {
        "action" : "Version 1.3.16.0",
        "url" : "/Operations/Version%201.3.16.0"
    }]
}

и вот модель, которую я использую: 

Ext.define('App.model.PluginAction', {
    extend : 'Ext.data.Model',
    fields : [
        {name: 'text', mapping: 'action'},
        'url',
        'description',
        {
            name: 'leaf', 
            convert: function(val, data) {
                return data.raw && data.raw.children;
            }}
        ],
    hasMany : { model: 'PluginAction', name: 'children'},
    idProperty: 'text'
});

И определение моего класса дерева: 

Ext.define('App.view.layout.PluginActionTree', {
    extend: 'Ext.tree.TreePanel',
    alias: 'widget.pluginActionTree',
    hideHeaders: true,
    rootVisible: false,
    useArrows: true,
    lines: false,
    containerScroll: true,
    autoSize: true,
    layout: 'fit',
    model : 'App.model.PluginAction'
}

Удачи!

Обновление: Проблема в том, что деревья могут иметь только один и только один корневой узел. Как только вы это знаете, вам нужно создать корневой узел (который будет скрыт), и этот корневой узел должен иметь столько узлов, сколько вам нужно. 

Ext.create('Ext.tree.Panel', {
    xtype : 'treepanel',
    hideHeaders: true,
    rootVisible: false,  // this is important
    containerScroll: true,
    autoSize: true,
    layout: 'fit',
    root: {
       children : [
          { text: 'root1' },
          { text: 'root2' }]
    },
    renderTo: Ext.getBody()
});​

это работает! пожалуйста, посмотрите на http://jsfiddle.net/FDY6v/

...