javascript extJs（设置高度和宽度）的百分比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9799548/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
extJs (set height and width) in percentage
提问by dev
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.
我正在开发一个门户网站，如http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html。这个例子的好处是如果你玩浏览器的高度和宽度，高度和宽度会在运行时重新调整。现在我有一个面板（就像图表中的图表一样），但不同的是我有两个图表要显示在该面板中，所以我不能使用 layout:'fill' 。问题是我必须以点为单位定义两个图表的宽度和高度。因此，在调整面板大小时图表不会调整大小。我怎样才能让它们获得相对于其父级的百分比高度和宽度？对于记录高度和宽度的 'auto' jsut 不会渲染图形。
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)}});
回答by Evan Trimboli
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'
}]
})
});
