title: How to auto height viewport child panels in it?
body: <p>I am working in ExtJS4. I am getting stuck at a point where I want to auto height the east region of border layout. Actually my requirement is to automatically increase height of any region based on child elemtents content inside it. I tried a lot but I did not get solution for it. Please give me some suggestion.</p>
  
  <p>In my code I am just testing a simple code containing 5 panels in east region, out of those four panels are displayed. The fifth panel is not displayed, how can I make it visible? I am just using a sample code for reference.</p>
  
  <p>Here is my viewport code :</p>
  
  <pre><code>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:'&lt;p&gt;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&lt;br&gt;hello&lt;br&gt;good&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;morning&lt;br&gt;nice&lt;br&gt;looking',
                                    },
                                    {
                                        xtype:'panel',
                                        title:'panel2',
                                        html:'hi&lt;br&gt;hello&lt;br&gt;good&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&lt;br&gt;noon&lt;br&gt;nice&lt;br&gt;looking',
                                    },
                                    {
                                        xtype:'panel',
                                        title:'panel3',
                                        html:'hi&lt;br&gt;hello&lt;br&gt;good&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;brafter noon&lt;br&gt;nice&lt;br&gt;looking'
                                    },
                                    {
                                        xtype:'panel',
                                        title:'panel4',
                                        html:'hi&lt;br&gt;hello&lt;br&gt;good&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;brnigth&lt;br&gt;nice&lt;br&gt;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
  </code></pre>
  
  <p>And here is my screen shot output :
  <img src="https://i.stack.imgur.com/dtWnu.png" alt="enter image description here"></p>
  
  <p>Child component panel5 is not displayed. How can I make it visible?
  How can I display all panels with this requirement? I want to make auto increase the size of east region based on panel contents.<br>
  Please give me some suggestion.</p>