如何在其中自动调整视口子面板？

Question

我在ExtJS4工作.我陷入了一个我想要自动高度边界布局的东部区域的点.实际上我的要求是根据其中的子元素内容自动增加任何区域的高度.我尝试了很多,但我没有得到它的解决方案.请给我一些建议.

在我的代码中,我只是在东区域测试一个包含5个面板的简单代码,在这四个面板中显示.第五个面板未显示,如何使其可见？我只是使用示例代码作为参考.

这是我的视口代码:

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',
                           //margins:'0 5 0 5',
                           flex:.3,
                           //layout:'accordion',
                           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

这是我的屏幕截图输出:

不显示子组件面板5.我怎样才能看到它？如何显示符合此要求的所有面板？我想根据面板内容自动增加东部地区的大小.
请给我一些建议.

Answer 1

使面板基于其内容自动调整大小

您应该将其设置flex为0,并确保其他面板flex与0不同.因此,在以下代码中,页脚具有flex: 0中心区域flex: 1; 因此,页脚将根据其内容调整大小.这是一个有效的JsFiddle:

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 300,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'Footer',
        region:'south',
        xtype: 'panel',
        margins: '5 0 0 5',
        flex: 0, // Notice this.
        id: 'footer',
        layout: {
            type: 'vbox',
            align : 'stretch',
            pack  : 'start',
        },
        items:[{
            title: '1',
            height: 50
        },{
            title: '2',
            height: 50                                   
        }]
    },{
        title: 'Center Region',
        flex: 1, // Notice this.
        region: 'center',
        xtype: 'panel',
        layout: 'fit',
        margins: '5 5 0 0'
    }],
    renderTo: Ext.getBody()
});

Ext.getCmp('footer').add({
    title: '3',
    height: 50                        
});

获取固定大小的面板以根据其内容滚动

只需添加autoScroll: true容器(区域面板).

这里有一些工作代码,你可以在这个JsFiddle上看到它:

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 300,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'West Region',
        region:'west',
        xtype: 'panel',
        margins: '5 0 0 5',
        width: 200,
        id: 'west-region-container',

        // Notice the next line
        autoScroll: true,
        layout: {
            type: 'vbox',
            align : 'stretch',
            pack  : 'start',
        },
        items:[{
            title: '1',
            height: 100
        },{
            title: '2',
            height: 100            
        },{
            title: '3',
            height: 100                        
        }]
    },{
        title: 'Center Region',
        region: 'center', 
        xtype: 'panel',
        layout: 'fit',
        margins: '5 5 0 0'
    }],
    renderTo: Ext.getBody()
});