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

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;因此，页脚将根据其内容调整大小。这是一个working 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。

以下是一些工作代码，您可以在this 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()
});

Answer 2

您正在搜索flex配置设置：

    items:[{
        title: 'panel1',
        flex: .3
    },{
        title: 'panel2',
        flex: .3
    },{
        title: 'panel3',
        flex: .4
    }]

Answer 3

这有效（至少是你的第一个问题）：

    Ext.define('MyApp.view.ui.MyViewport', {
    extend: 'Ext.container.Viewport',

    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    region: 'center'
                },
                {
                    xtype: 'panel',
                    width: 150,
                    title: 'My Panel',
                    region: 'west'
                },
                {
                    xtype: 'container',
                    width: 150,
                    layout: {
                        align: 'stretch',
                        type: 'vbox'
                    },
                    region: 'east',
                    items: [
                        {
                            xtype: 'panel',
                            title: 'My Panel',
                            flex: 1
                        },
                        {
                            xtype: 'panel',
                            title: 'My Panel',
                            flex: 1
                        },
                        {
                            xtype: 'panel',
                            title: 'My Panel',
                            flex: 1
                        },
                        {
                            xtype: 'panel',
                            title: 'My Panel',
                            flex: 1
                        },
                        {
                            xtype: 'panel',
                            title: 'My Panel',
                            flex: 1
                        }
                    ]
                },
                {
                    xtype: 'panel',
                    height: 50,
                    title: 'My Panel',
                    region: 'north'
                },
                {
                    xtype: 'panel',
                    height: 50,
                    title: 'My Panel',
                    region: 'south'
                }
            ]
        });

        me.callParent(arguments);
    }
});