Inserire un nodo in una posizione specifica in Ext.tree.panel

Question

Sto cercando di cambiare campione treegrid questo Ext JS: http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html

Tutto quello che voglio è quello di aggiungere un nodo in una posizione specifica.

ho provato questo:

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

non dà errori, ma l'interfaccia utente non aggiorna. Stessa cosa con selNode.insertChild(0, .. Viene eseguito senza errori, ma l'interfaccia utente non si aggiorna.

qualche modo questo funziona:

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

Allora, come faccio aggiungere/inserto in una posizione specifica in base a selezione dell'utente.

Ecco quello che il mio codice completo è: http://jsfiddle.net/4T68s/
ho cambiato il negozio per dati statici, perché una richiesta crossdomain per ottenere i dati json non avrebbero funzionato.

Answer 1

Si dovrebbe cambiare leaf proprietà false sul nodo prima di aggiungere bambino ad esso:

selNode.set('leaf', false); 

campione di lavoro: http://jsfiddle.net/lolo/4T68s/6/

Answer 2

Se si desidera aggiungere i nodi, il nuovo genitore non deve essere una foglia . Ho aggiornato il tuo codice per darti un esempio di come aggiungi il nodo nella posizione corretta e come cambi l'icona in modo che non assomigli all'icona della cartella principale, che presumo tu stia cercando di evitare .

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

Imposta il tuo negozio come questo in modo che i nodi principali sono espansi e caricato.

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

Quindi inserire un nuovo modello come questo.

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

Questo creerà un nuovo nodo genitore che sarà quindi in grado di aggiungere più attività a. Usa la proprietà icon per impostare l'immagine dell'immagine src o iconCls per farlo con i CSS. Sebbene ci sia un bug con il modo CSS. Conserva la classe x-tree-icon-parent per qualche motivo.