Wstawianie węzła w określonym miejscu w Ext.tree.panel

Question

staram się to zmienić ext js TreeGrid próbkę: http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html

Chcę tylko dodać węzeł w określonym miejscu.

Próbowałem to:

var treePanel = Ext.getCmp('treePanel'); 
var selNode = treePanel.getSelectionModel().getSelection()[0]; 
var appendedChild = selNode.appendChild({ 
         task: 'Task1', 
         user: 'Name', 
         duration: '10', 
         leaf: true 
        }); 

To daje żadnych błędów, ale UI nie aktualizuje. To samo z selNode.insertChild(0, .. Działa bez żadnych błędów, ale interfejs użytkownika nie aktualizuje się.

Jakoś to działa:

var node = treePanel.store.getRootNode(); 
node.appendChild({ 
        task: 'Task3', 
        user: 'Name', 
        duration: '10', 
        leaf: true 
       }); 

Więc jak mogę dołączyć/wkładkę w określonym miejscu oparte na wybór użytkownika.

Oto co mój pełny kod wygląda następująco: http://jsfiddle.net/4T68s/
Zmieniłem magazyn danych statycznych, ponieważ crossdomain prośba, aby uzyskać dane json nie będzie działać.

Answer 1

należy zmienić leaf właściwość false na węźle przed dodaniem dziecka do niego:

selNode.set('leaf', false); 

próbki robocze: http://jsfiddle.net/lolo/4T68s/6/

Answer 2

Jeśli chcesz dołączyć węzły, nowa jednostka dominująca nie musi być listkiem . Zaktualizowałem Twój kod, aby podać przykład dodawania węzła we właściwej lokalizacji i sposobu zmiany ikony, aby nie wyglądał on jak ikona folderu nadrzędnego, co zakładam, że starasz się unikać .

http://jsfiddle.net/4T68s/5/

Skonfiguruj swój sklep jak to tak, że węzły nadrzędne są rozszerzane i załadowany.

var store = Ext.create('Ext.data.TreeStore', { 
    model: 'Task', 
    root: { 
     expanded: true, 
     children: [ 
      { 
      task: 'Settings', 
      leaf: false, 
      expanded: true, 
      children: [ 
       { 
       task: 'System Settings', 
       expanded: true, 
       loaded: true, 
       icon: 'icon-leaf'}, 
      { 
       task: 'Appearance', 
       expanded: true, 
       loaded: true, 
       } 
      ]} 
     ] 
    } 
}); 

Następnie włóż nowy model w ten sposób.

var selNode = treePanel.getSelectionModel().getSelection()[0]; 
var newTask = Ext.create('Task'); 
newTask.set({ 
    task: 'Task1', 
    user: 'Name', 
    duration: '10', 
    expanded: true, 
    loaded: true, 
    leaf: false, 
    icon: 'icon-leaf' 
}); 

selNode.insertChild(0, newTask); 

Spowoduje to utworzenie nowego węzła nadrzędnego, do którego będzie można dodać więcej zadań. Użyj właściwości icon, aby ustawić ikonę obrazu src lub iconCls, aby to zrobić za pomocą CSS. Chociaż istnieje błąd związany ze sposobem CSS. Z jakiegoś powodu zachowuje klasę x-tree-icon-parent.