javascript - extJs (set height and width) in percentage - Stack Overflow

admin管理员组

文章数量:1312805

I am developing a portal as in .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)}});

I am developing a portal as in http://dev.sencha./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)}});

• javascript
• extjs
• extjs4

Share Improve this question Follow edited Mar 21, 2012 at 6:41 dev asked Mar 21, 2012 at 6:21 devdev 20733 gold badges77 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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'
        }]
    })
});

本文标签： javascriptextJs (set height and width) in percentageStack Overflow