title: extJs (set height and width) in percentage
body: <p>I am developing a portal as in <a href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html" rel="nofollow">http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html</a> . The good thing about this example is that the height and width are readjusted at run time if you play with height and width of browser. Now i have a panel (just like what's in the graph for the chart), but the difference is that i have got two charts to display in that panel so i can't use layout:'fill' . The problem is that i have to define width and height of both charts in points. Due to which the charts don't resize when the panel is resized. How can i make them to get height and width in percentage relative to its parent ?? and for the record height and width 'auto' jsut wont render the graph.</p>
  
  <p>Your help is appreciated</p>
  
  <pre><code>   Ext.define("Ext.app.ChartPortlet",{extend:"Ext.panel.Panel",alias:"widget.chartportlet",requires:["Ext.data.JsonStore","Ext.chart.theme.Base","Ext.chart.series.Series","Ext.chart.series.Line","Ext.chart.axis.Numeric"],
    generateData:function(){var b=[{name:"x",djia:10000,sp500:1100}],a;for(a=1;a&lt;50;a++) {b.push({name:"x"+a,sp500:b[a-1].sp500+ ((Math.floor(Math.random()*2)%2)?-1:1)*Math.floor(Math.random()*7),djia:b[a-1].djia+    ((Math.floor(Math.random()*2)%2)?-1:1)*Math.floor(Math.random()*7)})}return b}
    ,initComponent:function()
      {Ext.apply(this,{layout: {
          type: 'vbox',
          align: 'stretch'
      }
     ,width:600,height:300,items:
     [{xtype:"chart",animate:false,shadow:false,store:Ext.create("Ext.data.JsonStore",
     {fields:["name","sp500","djia"],data:this.generateData()}),legend:        {position:"bottom"},axes:[{type:"Numeric",position:"left",fields:["djia"],
      title:"Dow Jones Average",label:{font:"11px Arial"}}, {type:"Numeric",position:"right",grid:false,fields:["sp500"],title:"S&amp;P 500",label:  {font:"11px Arial"}}],
      series:[{type:"line",lineWidth:1,showMarkers:false,fill:true,axis: ["left","bottom"],xField:"name",yField:"djia",style:{"stroke-width":1}},    {type:"line",lineWidth:1,showMarkers:false,
       axis:["right","bottom"],xField:"name",yField:"sp500",style:{"stroke-width":1}}]}]
  
  
       });this.callParent(arguments)}});
  </code></pre>