extJs (установить высоту и ширину) в процентах - PullRequest
Новая
       12

extJs (установить высоту и ширину) в процентах

2 голосов
/ 21 марта 2012

Я разрабатываю портал как в http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html.В этом примере хорошо то, что высота и ширина корректируются во время выполнения, если вы играете с высотой и шириной браузера.Теперь у меня есть панель (точно так же, как на графике для диаграммы), но разница в том, что у меня есть две диаграммы для отображения на этой панели, поэтому я не могу использовать макет: 'fill'.Проблема в том, что я должен определить ширину и высоту обеих диаграмм в точках.Из-за чего диаграммы не меняются при изменении размеров панели.Как я могу сделать их, чтобы получить высоту и ширину в процентах относительно его родителя?а для высоты и ширины записи '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)}});

1 Ответ

6 голосов
/ 21 марта 2012

Использовать макет коробки: 

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