在一個盒子上的sencha圖表

Question

如何將sencha圖表添加到多個盒子。我是sencha touch.i的新手，需要動態創建多個hbox並添加differenet圖表。我只是做了一個hbox佈局和一個圖表組件。但不知道如何將圖表添加到hbox。 mycode的是

橫向盒代碼

var pnl = new Ext.Panel({ 
     width: 400, 
     height: 300, 
     fullscreen: true, 
     layout: 'hbox', 
     items: [{ 
      width : 200, 
      height: 200, 
      html: 'First', 
      bodyStyle: 'background:grey;' 
     },{ 
      width: 200, 
      height: 200, 
      html: 'Second', 
      bodyStyle: 'background:blue;' 
     },{ 
      width: 200, 
      height: 200, 
      html: 'Third', 
      bodyStyle: 'background:yellow;' 
     }] 
    }); 

圖碼

new Ext.chart.Chart({ 
       renderTo: Ext.getBody(), 
       width: 500, 
       height: 300, 
       animate: true, 
       store: store, 
       axes: [{ 
        type: 'Numeric', 
        position: 'bottom', 
        fields: ['value'], 
        label: { 
        //renderer: Ext.util.Format.numberRenderer('0,0') 
        }, 
        title: 'Quanitity', 
        grid: true, 
        minimum: 0 
       }, { 
        type: 'Category', 
        position: 'left', 
        fields: ['product'], 
        title: 'Products' 
       }], 
       series: [{ 
        type: 'bar', 
        axis: 'bottom', 
        highlight: true, 
        tips: { 
         trackMouse: true, 
         width: 140, 
         height: 28, 
         renderer: function(storeItem, item) { 
          this.setTitle(storeItem.get('product') + ': ' + storeItem.get('value') + ' views'); 
         } 
        }, 
        label: { 
         display: 'insideEnd', 
         field: 'data1', 
         //renderer: Ext.util.Format.numberRenderer('0'), 
         orientation: 'horizontal', 
         color: '#333', 
         'text-anchor': 'middle' 
        }, 
        xField: 'name', 
        yField: ['value'] 
       }] 
      }); 

尋求幫助

Answer 1

例如，你可以指定這樣

首先創建一個像

一個父面板

var Panel = new Ext.Panel({ 
             layout: 'hbox', 
            dockedItems: { 
                 dock: 'top', 
                 xtype: 'toolbar', 
                 title: 'Line & Pie chart', 
                 items: [ ] 
                 }, 
            items: [ LineChartPanel,PiePanel,] 
         }); 

，現在創建行和餅圖獨立的面板

var LineChartPanel= new Ext.chart.Chart({ 
// your required stuff for the line chart 
}); 

var PiePanel= new Ext.chart.Chart({ 

// your required stuff for the Pie chart 
});