2012-03-21 52 views
-1

我正在开发一个门户,如http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html。我开发了下面的代码,它显示了一个有两个项目的面板。它们的高度和宽度都会自动调整。但我想要做的是让他们站成一排。目前第二项放置在第一项以下。我用hbox取代了vbox,但图表刚刚消失。请帮助....extJs(Hbox issue)

您的帮助表示赞赏

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.Li  ne","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)}}); 

回答

0

告诉你的代码使用VBox中,对齐伸展,这意味着将放置对方下方的项目。对齐拉伸意味着它们的宽度应该占100%的父容器,所以你不应该指定宽度。 已张贴您的当前代码:http://jsfiddle.net/dbrin/kcd9g/show/light/ 我更正了丢失;和宽度设置,其余的是你的。