Inserte un nodo en un lugar específico en Ext.tree.panel

Question

Estoy tratando de cambiar la muestra treegrid esta Ext JS: http://dev.sencha.com/deploy/ext-4.0.1/examples/tree/treegrid.html

Todo lo que quiero es añadir un nodo en un lugar específico.

yo probamos este:

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

Se da ningún error, pero el interfaz de usuario no actualiza. Lo mismo con selNode.insertChild(0, .. Se ejecuta sin errores, pero la interfaz de usuario no se actualiza.

De alguna manera esto funciona :

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

Entonces, ¿cómo anexar/inserto en un lugar específico basado en la selección del usuario.

Esto es lo que se ve mi código completo como: http://jsfiddle.net/4T68s/
He cambiado la tienda para datos estáticos debido a una solicitud crossdomain para obtener los datos json no funcionarían.

Answer 1

Debe cambiar leaf propiedad a false en el nodo antes de agregar niño a ella:

selNode.set('leaf', false); 

muestra de trabajo: http://jsfiddle.net/lolo/4T68s/6/

Answer 2

Si desea añadir nodos, el nuevo padre no debe ser una hoja . Actualicé tu código para darte un ejemplo de cómo agregar el nodo en la ubicación correcta y cómo cambiar el ícono para que no se parezca al ícono de la carpeta principal, que es lo que supongo que intentas evitar .

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

Configuración de su tienda como esta para que los nodos padre se expanden y se carga.

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

A continuación, inserte un modelo nuevo como este.

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

Eso creará un nuevo nodo primario al que luego podrá agregar más tareas. Use la propiedad del icono para configurar el icono de la imagen src o iconCls para hacerlo con CSS. Aunque hay un error con el modo CSS. Retiene la clase x-tree-icon-parent por alguna razón.