extJs (set height and width) in percentage

Question

I am developing a portal as in http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html . 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.

Your help is appreciated

   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<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&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)}});

Solution

Use a box layout:

Ext.onReady(function(){
    Ext.create('Ext.container.Container', {
        width: 300,
        height: 300,
        renderTo: document.body,
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items: [{
            flex: 1,
            title: 'Some panel'
        }, {
            flex: 1,
            title: 'Other panel'
        }]
    })
});

Comments

[dev]

currently the next item comes below the first one how can i edit the above code so that the items come as in a row ||.

[Evan Trimboli]

Use an hbox layout instead, suggest you read the docs in future: docs.sencha.com/ext-js/4-0

[GreenGiant]

@dev try asking a new question, focused just on the problem you're facing; you might try mocking up your problem using jsfiddle