extJs(设置高度和宽度)(以百分比表示)
extJs (set height and width) in percentage
我正在开发一个门户,如http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html。这个例子的好处是,如果您使用浏览器的高度和宽度,则在运行时会重新调整高度和宽度。现在我有了一个面板(就像图表中的一样),但不同的是,我有两个图表要显示在那个面板中,所以我不能使用布局:"填充"。问题是,我必须用点来定义两个图表的宽度和高度。因此,调整面板大小时图表不会调整大小。如何使它们以相对于其父对象的百分比获得高度和宽度??对于记录的高度和宽度,"auto"jsut不会渲染图形。
非常感谢您的帮助
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)}});
使用方框布局:
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'
}]
})
});
相关文章:
- React中的数据集表示
- 如果宽度是百分比,如何设置以px为单位的图像高度
- 使用javascript可以设置css动画的当前百分比
- 任何将(SSH)终端嵌入到一些HTML5表示系统中的想法(例如,show.js)
- 文本表示法VS.构造函数,用于在JavaScript中创建对象
- 如何将Date字段设置为等于另一个Date+Int值,该值表示月份值
- regex表示逗号,后跟空格或仅逗号
- 我将如何将其更改为循环和数组表示法
- 当我使用高度百分比时,谷歌地图javascript api不会显示
- Javascript差异百分比数学
- 如何使用Undercore和Backbone在HTML中表示模型属性
- 如何从二进制int中获取百分比,每个位表示x%
- extJs(设置高度和宽度)(以百分比表示)
- JQuery更改以百分比问题表示的宽度
- 如何使用jquery获取以百分比表示的行高
- 将圆内的点位置表示为任意线段的百分比
- 把数字表示成百分比
- 用D3将数字快速表示为百分比
- 调整高度&宽度以百分比而非像素表示
- 获取光标位置(以百分比表示)