2
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.htmlのようなポータルを開発中です。この例の良い点は、ブラウザの高さと幅でプレイすると、実行時に高さと幅が再調整されることです。今、私はパネルを持っています(グラフのグラフに似ています)が、そのパネルに表示するグラフが2つありますので、レイアウトを使用できません: '塗りつぶし'。問題は、両方のグラフの幅と高さをポイントで定義する必要があることです。これにより、パネルのサイズを変更したときにグラフのサイズが変更されません。どのように私はそれらの親に相対的な割合で高さと幅を取得することができますか?レコードの高さと幅に対して 'auto'はグラフをレンダリングしません。あなたの助けが高く評価されextJs(高さと幅の設定)パーセンテージ
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)}});
は完璧に動作します。サポート – dev
ありがとうございます。現在、次のアイテムは最初のアイテムの下にあります。どのようにアイテムが行になるように上記のコードを編集できますか? – dev
代わりにhboxレイアウトを使用して、今後ドキュメントを読むことをお勧めします。http://docs.sencha.com/ext-js/4-0/ –