Изменение контейнера деталей в NestedList?

Question

В небольшой программе, которую у меня есть, я пытаюсь создать пользовательские контейнеры для каждого листового узла моего вложенного списка. Вот несколько примеров произвольных контейнеров, которые я пытаюсь проверить с:

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

Как я могу перейти в новых контейнерах, когда пользователь нажимает на листовом узле? Это действие должно происходить в onLeafItemTap(). Btw, начальный контейнер (# 2) в данный момент не отображается. Это вопрос макета? Вот некоторые идеи о том, что экран должен выглядеть следующим образом:

Полный источник:

 
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() { 
     Ext.Viewport.add(
      Ext.create("Ext.Container", { 
       layout: { 
        type: 'hbox' 
       }, 
       items: [ 
        { xtype : 'mainview'} 
       ] 
      })); 
    } 
}); 

Answer 1

Наконец я понял, как правильно решить вашу проблему.

Некоторые пояснения:

• Если вы хотите, чтобы отобразить «настроенное detailContainer» на правой стороне hbox, это совершенно очевидно, что вы должны отключить detailCard конфигурации для Ext.NestedList, потому что он предназначен для отображения инлайн (т.е. место вашего Ext.NestedList).
• При использовании Ext.define, все должно быть включено в config (кроме extend, xtype, alias, id, поэтому в данном случае, layout должен быть помещен в config).
• flex также должен быть определен в config.
• В событии leafitemtap просто обновите конфигурацию detailContainer и удалите/добавьте ее снова, так как она не будет обновляться динамически.

Пожалуйста, взгляните на модифицированный фрагмент кода ниже, он отлично работает для меня.

Ext.Loader.setConfig({ enabled: true }); 

Ext.define('DetailContainer1', { 
    extend: 'Ext.Container', 
    xtype: 'detail-container1', 
    config: { 
     flex: 1, 
     layout: { 
      type: 'vbox' 
     }, 
     style: 'background-color: #a9a9a9;', 
     items: [ 
      {html: 'Detail Container1'} 
     ] 
    } 
}); 

Ext.define('DetailContainer2', { 
    extend: 'Ext.Container', 
    xtype: 'detail-container2', 
    config: { 
     flex: 1, 
     layout: { 
      type: 'vbox' 
     }, 
     style: 'background-color: #c9c9c9;', 

     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', 
    id: 'mainview', 
    config: { 
     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', { 
      flex: 1, 
      store: this.treeStore, 
      listeners: { 
       scope: this, 
       leafitemtap: this.onLeafItemTap 
      } 
     }); 

     this.setItems([this.nestedList, this.detailContainer]); 
    }, 

    onLeafItemTap: function(nestedList, list, index, node, record, e) { 
     mainview = Ext.getCmp('mainview'); 
     if (index==0) { 
      mainview.detailContainer = Ext.create("DetailContainer1"); 
     } else { 
      mainview.detailContainer = Ext.create("DetailContainer2"); 
     } 
     mainview.removeAt(1); 
     mainview.add(mainview.detailContainer); 

    } 
}); 


Ext.application({ 
    launch: function() { 
     Ext.Viewport.add(
      Ext.create("Ext.Container", { 
       layout: { 
        type: 'card' 
       }, 
       items: [ 
        { xtype : 'mainview'} 
       ] 
      })); 
    } 
});