extjs - 如何在 Exjs4 中动态添加布局？

Question

我在 Extjs4 中工作。我遇到了一个问题，即如何在 Exjs4 中动态添加手风琴布局？我正在使用布局 vbox 和 hbox，但我也想在东部地区添加手风琴。我尝试了很多？但没有成功请有人给我一些建议怎么做？

Ext.define('Am.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',
    id:'viewportId',
    alias:'widget.Viewport',
    autoScroll:true,

       //        closable:true,
               items: [
                       {
                           region:'north',
                                       items:[
                                  {
                                      xtype:'panel',
                                      flex:.2,
                                      title:'north region',
                                      html:'<p>north region'
                                  }

                                  ]//end of items

                       },
                       {
                           region:'west',
                           id:'westId',
                           //margins:'0 5 5 5',
                           flex:.3,
                           //layout:'accordion',
                           items:[
                                              {
                                      title:'This day in a history',
                                      xtype:'Content'
                                  }

                                  ]//end if items
                       },// end of region west
                       {
                           //title:'center',
                           region:'center',
                           id:'centerId',
                           //html:'center region',
                           items:[
                                  ]//End of itmes
                       },// end of region center
                       {
                           region:'east',
                           id:'eastId',
                           flex:.3,
                          items:[
                                  {
                                      xtype:'panel',
                                      title:'panel1',
                                      html:'hi<br>hello<br>good<br><br><br><br><br>morning<br>nice<br>looking',
                                  },
                                  {
                                      xtype:'panel',
                                      title:'panel2',
                                      html:'hi<br>hello<br>good<br><br><br><br<br>noon<br>nice<br>looking',
                                  },
                                  {
                                      xtype:'panel',
                                      title:'panel3',
                                      html:'hi<br>hello<br>good<br><br><br><br><brafter noon<br>nice<br>looking'
                                  },
                                  {
                                      xtype:'panel',
                                      title:'panel4',
                                      html:'hi<br>hello<br>good<br><br><br><br><br><br><brnigth<br>nice<br>looking'
                                  },
                                  {
                                      xtype:'panel',
                                      title:'panel5',
                                      html:'good bye'
                                  },
                                  ]//end if items
                       },
                       {
                           //title:'South',
                           region:'south',
                           id:'southId',
                           items:[{
                                  xtype:'panel',
                                  title:"footer",
                                  html:'footer '
                           }]
                       },//mainMenu   // used mainMenu when you are using mainMenu variable
                       ]//end if items
});//End of view port

我想动态地将手风琴布局添加到东部地区。请给我一些建议？

Answer 1

为什么不能在配置中设置手风琴布局？

例如

{
    region: 'east'
    ,layout: 'accordion'
    ,items: [
        // ...
    ]
}

如果你真的想动态地将区域的布局更改为手风琴，你会遇到的问题是手风琴布局需要在渲染时调整其子组件。否则会坏掉。最简单的解决方案是添加原始组件的副本，以便可以再次渲染它们。

您还需要将子组件包装在另一个容器中，因为手风琴布局需要安装在其父容器中才能正常工作。

所以，首先你应该改变你的东部地区配置如下：

{
    region: 'east'
    ,id: 'eastId'
    // set fit layout for children layout to work as intended
    ,layout: 'fit'
    // wrap children into another container, that we can replace later
    ,items: [{
        xtype: 'container'
        ,itemId: 'innerCt' // for easy access
        ,items: [
            // ... your previous items
        ]
    }]
    // ... remaining of your region configuration
    ,flex: .3
}

这是一个动态改变东部区域布局的函数：

function changeEastLayout() {
    var panel = Ext.getCmp('eastId'),
        innerCt = panel.down('#innerCt'),
        itemsCopy = [];

    // make a copy of the item so accordion layout can render them like it likes        
    innerCt.items.each(function(item) {
        itemsCopy.push(item.initialConfig);
    });

    // remove previous wrapper        
    panel.removeAll();

    // adds a new wrapper with accordion layout containing the items copy
    panel.add({
        layout: 'accordion',
        items: itemsCopy
    });    
}

如果您想更改为不需要影响其子项（例如 hbox）呈现的另一个布局，您可以使用原始项目而不是副本：

function changeEastLayout() {
    var panel = Ext.getCmp('eastId'),
        innerCt = panel.down('#innerCt'),
        items = innerCt.removeAll(false); // autoDestroy to false

    panel.add({
        layout: 'vbox'
        ,items: items
    });

    // remove the wrapper container after in order to avoid destroying children
    panel.remove(innerCt);
}