Question

我正在开发http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html中的门户网站。我开发了以下代码，显示了一个包含两个项目的面板。它们的高度和宽度会自动调整。但我想要做的是让它们站成一排。目前第二项放在第一项下面。我用hbox取代了vbox，但图表就消失了。请帮帮....

感谢您的帮助

 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)}});

Answer 1

您展示的代码使用VBox进行对齐拉伸，这意味着项目将放在彼此之下。对齐拉伸意味着它们的宽度应占父容器的100％，因此您不应指定宽度。您发布的当前代码：http://jsfiddle.net/dbrin/kcd9g/show/light/ 我纠正了失踪;和宽度设置，其余的是你的。

extJs（Hbox问题）

1 个答案: