2012-03-21 162 views
2

我正在開發一個門戶,如http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html。關於這個例子的好處是,如果您使用瀏覽器的高度和寬度進行播放,則會在運行時重新調整高度和寬度。現在我有一個面板(就像圖表中的圖表),但區別在於我有兩個圖表顯示在該面板中,因此我無法使用佈局:「填充」。問題是我必須定義兩個圖表的寬度和高度。由此導致在面板調整大小時圖表不會調整大小。我如何讓他們獲得相對於其父母的百分比高度和寬度?並記錄高度和寬度'自動'jsut不會呈現圖形。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)}}); 

回答

6

使用盒佈局:

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

完美。感謝支持 – dev 2012-03-21 06:33:58

+0

目前下一個項目下面的第一個如何編輯上面的代碼,以便項目來作爲行||。 – dev 2012-03-21 06:35:55

+0

改爲使用hbox佈局,建議您在將來閱讀文檔:http://docs.sencha.com/ext-js/4-0/ – 2012-03-21 06:49:14