Problem to add item in Tree with Extjs

Question

How do I add an item using Tree in extjs. But I wanted to add somewhere specific, ex: add an item inside a specific folder. Follow my code for if necessary:

Ext.require(['Ext.tree.plugin.TreeViewDragDrop']);


var storeInt = Ext.create('Ext.data.TreeStore', {
    root: {
        children: []
    },
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }]
});

var storeProc = Ext.create('Ext.data.TreeStore', {
    root: {
        children: [{
            text: "022.33.55.66",
            expanded: false,
            children: [{
                text: 'ManifestacaoContestacao.doc',
                leaf: true
            }]
        },{
            text: '033.44.66.77',
            expanded: false,
            children: [{
                text: 'contrarazao.doc',
                leaf: true
            }]
        }]
    },
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }]
});


Ext.define('Procuradoria.view.menuPrincipal.Intimacao', {
    extend: 'Ext.panel.Panel',
    requires: ['Ext.layout.container.HBox'],

    title: 'Controle de Intimacoes',
    layout: 'hbox',
    width: '100%',
    frame: true,
    items: [{
        id: 'int-int',
        xtype: 'treepanel',
        title: 'Intimacoes',
        width: '50%',
        border: 0,
        margin: '10 0 0 1%',
        rootVisible: false,
        useArrows: true,
        collapsible: false,
        collapseFirst: false,
        collapsed: false,
        hideHeaders: true,
        store: storeInt
    },{
        id: 'int-proc',
        xtype: 'treepanel',
        title: 'Processos',
        width: '49.9%',
        border: 0,
        margin: '10 1% 0 1%',
        rootVisible: false,
        useArrows: true,
        collapsible: false,
        collapseFirst: false,
        collapsed: false,
        hideHeaders: true,
        store: storeProc
    }],
    tbar: [{
        id: 'bt-novo-int',
        xtype: 'button',
        cls: 'x-btn-text-icon',
        icon: imageSource('page_add.png'),
        text: 'Novo',
        handler: function(){
            CadIntimacao('add');
        }
    },{
        id: 'bt-excluir-int',
        xtype: 'button',
        disabled: false,
        cls: 'x-btn-text-icon',
        icon: imageSource('page_delete.png'),
        text: 'Excluir',
        handler: function(){
            /* pega objeto selecionado da tree*/
            var selected = Ext.getCmp("int-int").getSelectionModel().getSelection()[0].remove(true);
         }
    },{
        id: 'bt-procurar-int',
        xtype: 'button',
        cls: 'x-btn-text-icon',
        icon: imageSource('list.bmp'),
        text: 'Visualizar Documento',
        disabled: false,
        handler: function(){
          var selected = Ext.getCmp("int-int").getSelectionModel().getSelection()[0];
          window.open(getPageRoot()+''+'/pages/app/view/openWindow/intimacao/upfile/files/'+selected.data['text'], "_blank", "width=600px, height=600px");
        }
    }]

});

Answer 1

You must get the train .getRootNode();, which is a Ext.data.NodeInterface of your Tree.

With the NodeInterface, you have the methods: appendChild, getChildAt, getChildAt. By combining these methods, you can add an element to a specific position.

** Example ** To make it easier, create an example:

var tree = new Ext.tree.TreePanel({
    id: 'treePanel',
    autoscroll: true,
    root: rootNode // rootNode é o seu store
});


var treeNode = tree.getRootNode();
treeNode.expandChildren(true); // expande todos os nós.

// Adiciona no final da tree.
treeNode.appendChild({
        id: 'f3',
        text: 'filho 3',
        leaf: true
});

// Adiciona em um ramo específico. Nesse caso no ramo de índice 1
treeNode.getChildAt(1).getChildAt(0).appendChild({
        id: 'ff13',
        text: 'Filho de filho 3',
        leaf: true
});