Adding and removing nodes

We can even add nodes dynamically to our tree panel. This is very handy because when we use the tree panel, in most cases, we will end up facing this requirement. Here, we will see how we can solve this problem.

In the following example, we are going to add nodes dynamically to our tree panel. In order to familiarize you with the upcoming chapters that cover this example, we will use MCV architecture. Let's start creating a file to be saved in chapter_09/appcode/view/ as nodeForm.js, and place the following code:

// JavaScript Document
Ext.define('Myapp.view.nodeForm', {
  extend:'Ext.form.Panel',
  alias: 'widget.mynodeForm',
  requires: [
    'Ext.toolbar.Toolbar', 'Ext.toolbar.Fill',
    'Ext.button.Button', 'Ext.form.field.Text',
    'Ext.form.RadioGroup', 'Ext.form.field.Radio'
  ],
  border: false,
  frame: true,
  height: 137,
  width: 323,
  bodyPadding: 10,
  header: false,
  title: '',
  dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    items...