title: dynamically add container with form to another container
body: <p>I have created a <code>Panel</code> in which there is a <code>list</code> on the left side and right side there is a <code>container</code> you can see the picture below.</p>
  
  <p><img src="https://i.stack.imgur.com/tFmqJ.png" alt="enter image description here"></p>
  
  <p>now when the <code>Fruits</code> item gets clicked i want to load a form on the right side , so far i have successfully captured the <code>itemtap</code> event in controller for list item because i am using MVC pattern.</p>
  
  <pre><code>onMenuTap:function(me, index, target, record, e, eOpts){
  
  
       // here i want to dynamically load the existing container 
       // which contains the form
  
      }
  </code></pre>
  
  <p>i have already created a form as follows , name of the file is <code>FruitForm.js</code> and i want to 
  add this existing container into the right side of a container , how can i do that ?</p>
  
  <pre><code>Ext.define('market.view.FruitForm',{
  
      extend:'Ext.Container',
      xtype:'fruitform',
      requires:[
              'Ext.form.Panel'
          ],
  
      config:{
  
          items:[{
  
              xtype:'form',
              items:[{
  
                  xtype:'fieldset',
                  items:[{
                              xtype: 'textfield',
                              name: 'notitle',
                              label: 'Title:'
                          }]
  
  
              }]
  
  
          }]
  
  
      }
  
  
  
  });
  </code></pre>