title: Changing the Detail Container in a NestedList?
body: <p>In a small program that I have, I'm trying to have custom containers for every leaf node of my Nested List.  </p>
  
  <p>Here are a couple arbitrary example containers that I'm trying to test with:</p>
  
  <pre><code>Ext.define('DetailContainer1', {
      extend: 'Ext.Container',
      xtype: 'detail-container1',
      layout: {
          type: 'vbox'
      },
      height: 300,
      style: 'background-color: #a9a9a9;',
      //    flex: 1,
      items: [{
          html: 'Detail Container1'
      }]
  });
  
  Ext.define('DetailContainer2', {
      extend: 'Ext.Container',
      xtype: 'detail-container2',
      layout: {
          type: 'vbox'
      },
      height: 300,
      style: 'background-color: #c9c9c9;',
      //    flex: 1,
  
      items: [{
          html: 'Detail Container2',
          flex: 1
      }, {
          xtype: 'button',
          text: 'Hit me!',
          flex: 1
      }]
  });
  </code></pre>
  
  <hr>
  
  <p>How can I switch in the new containers when the user clicks on the leaf node?  </p>
  
  <p>This action should happen in <code>onLeafItemTap()</code>.  Btw the initial container (#2) isn't showing at the moment.  Is this a layout issue?  </p>
  
  <p>Here's some idea of what the screen should look like:</p>
  
  <p><img src="https://i.stack.imgur.com/qols4.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/imWV6.png" alt="enter image description here"></p>
  
  <hr>
  
  <blockquote>
    <p>Complete source:</p>
  </blockquote>
  
  <pre><code>Ext.Loader.setConfig({
      enabled: true
  });
  
  Ext.define('DetailContainer1', {
      extend: 'Ext.Container',
      xtype: 'detail-container1',
      layout: {
          type: 'vbox'
      },
      height: 300,
      style: 'background-color: #a9a9a9;',
      //    flex: 1,
      items: [{
          html: 'Detail Container1'
      }]
  });
  
  Ext.define('DetailContainer2', {
      extend: 'Ext.Container',
      xtype: 'detail-container2',
      layout: {
          type: 'vbox'
      },
      height: 300,
      style: 'background-color: #c9c9c9;',
      //    flex: 1,
  
      items: [{
          html: 'Detail Container2',
          flex: 1
      }, {
          xtype: 'button',
          text: 'Hit me!',
          flex: 1
      }]
  });
  
  Ext.define('ListItem', {
      extend: 'Ext.data.Model',
      config: {
          fields: ['text']
      }
  });
  
  Ext.define('Sencha.view.MainView', {
      extend: 'Ext.Container',
      xtype: 'mainview',
      layout: {
          type: 'hbox'
      },
      initialize: function() {
          this.treeStore = Ext.create('Ext.data.TreeStore', {
              model: 'ListItem',
              defaultRootProperty: 'items',
              root: {
                  items: [{
                      text: 'Containers',
                      items: [{
                          text: 'Detail #1',
                          leaf: true
                      }, {
                          text: 'Detail #2',
                          leaf: true
                      }]
                  }]
              }
          });
          this.detailContainer = Ext.create("DetailContainer2", {});
  
          this.nestedList = Ext.create('Ext.NestedList', {
  
              docked: 'left',
              width: 300,
              flex: 1,
              store: this.treeStore,
  
              detailCard: true,
              detailContainer: this.detailContainer,
  
              listeners: {
                  scope: this,
                  leafitemtap: this.onLeafItemTap
              }
          });
  
          this.setItems([this.detailContainer, this.nestedList]);
      },
  
      onLeafItemTap: function(nestedList, list, index, node, record, e) {
          var detailCard = nestedList.getDetailCard();
          // nestedList.setDetailContainer(Ext.create("DetailContainer1", {}))
          // detailCard.setHtml(record.get('text') + "...");
      }
  });
  
  
  Ext.application({
  
      launch: function() {
          var container = Ext.create("Ext.Container", {
              layout: {
                  type: 'hbox'
              },
              items: [{
                  xtype: 'mainview'
              }]
          });
          Ext.Viewport.add(container);
  
      }
  });
  </code></pre>