ExtJS的 - >如何創建一個使用2個相關模型（的hasMany關係）

Question

我想要繪製在ExtJS的分組條形圖類似於分組條形圖煎茶的example.

你可以使用一個字段是的一個領域屬於系列xField/yField中圖表商店模型的子模型？

如果一個「高爾夫球手」模型有許多「高爾夫球杆」，是否可以呈現一個分組條形圖來顯示屬於高爾夫球員的每個高爾夫俱樂部的杆（每個高爾夫球手的名字將是一個軸標籤）？

在sencha的例子中，商店擁有一條記錄中的所有數據，但我希望它可以自動綁定到一個「hasmany」相關模型？

//模型

Ext.define('GolfClub', { 

extend : 'Ext.data.Model', 

fields : [{ 
    name : 'ClubType', 
    type : 'string' 
}, { 
    name : 'Weight', 
    type : 'float' 
}] 

}); 

Ext.define('Golfer', { 
    extend : 'Ext.data.Model', 
    requires: ['GolfClub'], 
    fields : [{ 
     name : 'GolferName', 
     type : 'string' 
    }], 

    hasMany: {model: 'GolfClub', name: 'golfClubs'} 
}); 

//高端機型

//本地數據（只是爲了得到它的工作第一）

function data(){ 

var golfers = []; 
    var rory = Ext.create('Golfer', { 
     GolferName : 'Rory' 
    }); 

    var rorysDriver = Ext.create('GolfClub', { 
     ClubType : 'Driver', 
     Weight : 80 
    }); 

var rorysPutter = Ext.create('GolfClub', { 
     ClubType : 'Putter', 
     Weight : 60 
    }); 

var rorysSandWedge = Ext.create('GolfClub', { 
     ClubType : 'SandWedge', 
     Weight : 50 
    }); 

    var rorysClubs = rory.golfClubs(); 

    rorysClubs.add(rorysDriver); 
    rorysClubs.add(rorysPutter); 
    rorysClubs.add(rorysSandWedge); 

    golfers.push(rory); 



    var tiger = Ext.create('Golfer', { 
     GolferName : 'Tiger' 
    }); 

    var tigersDriver = Ext.create('GolfClub', { 
     ClubType : 'Driver', 
     Weight : 85 
    }); 

var tigersPutter = Ext.create('GolfClub', { 
     ClubType : 'Putter', 
     Weight : 55 
    }); 

var tigersSandWedge = Ext.create('GolfClub', { 
     ClubType : 'SandWedge', 
     Weight : 58 
    }); 

    var tigersClubs = tiger.golfClubs(); 

    tigersClubs.add(tigersDriver); 
    tigersClubs.add(tigersPutter); 
    tigersClubs.add(tigersSandWedge); 

    golfers.push(tiger); 

return golfers; 
} 

//結束本地數據

//本地商店

function store1(){ 
var golferStore = Ext.create('Ext.data.Store', { 
    model: 'Golfer', 
    data : data()}); 

return golferStore; 
} 

//結束本地存儲

Ext.onReady(function() { 
     var chart = Ext.create('Ext.chart.Chart', { 
     style: 'background:#fff', 
     animate: true, 
     shadow: true, 
     store: store1(), 
     legend: { 
      position: 'right' 
     }, 
     axes: [{ 
      type: 'Numeric', 
      position: 'bottom', 
      fields: ['golfClubs.Weight'] 
     }, { 
      type: 'Category', 
      position: 'left', 
      fields: ['GolferName'], 
      title: 'Golfer' 
     }], 
     series: [{ 
      type: 'bar', 
      axis: ['bottom'], 
      xField: ['golfClubs.Weight'],//Is that how you bind to child record? 
      yField: ['GolferName'] 
     }] 
    }); 


var win = Ext.create('Ext.Window', { 
    width: '100%', 
    height: '100%', 
    title: 'Breakdown of Golfers and their Clubs..', 
    autoShow: true, 
    layout: 'fit', 
    items: chart 
}); 
}); 

乾杯， 湯姆。

Answer 1

這已在Sencha論壇中回答，以防有人對此問題感興趣。

圖表的商店將需要在商店內填充所有數據/記錄（-vs-商店使用父記錄進行填充，每個商店都有其自己關聯的子記錄集）。所以，我怕你想做的事情不能直接做。

Answer from Sencha Support Team Member

的解決方案似乎是父母和孩子型號的字段合併成可以在圖表的存儲與groupField並延伸串聯式混合使用的新模型。

Ext.define('Result', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     { name: 'state', type: 'string', mapping:0 }, 
     { name: 'product', type: 'string', mapping:1 }, 
     { name: 'quantity', type: 'int', mapping:2 } 
    ] 
}); 
var store = Ext.create('Ext.data.ArrayStore', { 
    model: 'Result', 
    groupField: 'state', 
    data: [ 
     ['MO','Product 1',50], 
     ['MO','Product 2',75], 
     ['MO','Product 3',25], 
     ['MO','Product 4',125], 
     ['CA','Product 1',50], 
     ['CA','Product 2',100], 
     ['WY','Product 1',250], 
     ['WY','Product 2',25], 
     ['WY','Product 3',125], 
     ['WY','Product 4',175] 
    ] 
}); 

Ext.define('Ext.chart.series.AutoGroupedColumn', { 
    extend: 'Ext.chart.series.Column', 
    type: 'autogroupedcolumn', 
    alias: 'series.autogroupedcolumn', 
    gField: null, 
    constructor: function(config) { 
     this.callParent(arguments); 
     // apply any additional config supplied for this extender 
     Ext.apply(this, config); 
     var me = this, 
      store = me.chart.getStore(), 
      // get groups from store (make sure store is grouped) 
      groups = store.isGrouped() ? store.getGroups() : [], 
      // collect all unique values for the new grouping field 
      groupers = store.collect(me.gField), 
      // blank array to hold our new field definitions (based on groupers collected from store) 
      fields = []; 
     // first off, we want the xField to be a part of our new Model definition, so add it first 
     fields.push({name: me.xField }); 
     // now loop over the groupers (unique values from our store which match the gField) 
     for(var i in groupers) { 
      // for each value, add a field definition...this will give us the flat, in-record column for each group 
      fields.push({ name: groupers[i], type: 'int' }); 
     } 
     // let's create a new Model definition, based on what we determined above 
     Ext.define('GroupedResult', { 
      extend: 'Ext.data.Model', 
      fields: fields 
     }); 
     // now create a new store using our new model 
     var newStore = Ext.create('Ext.data.Store', { 
      model: 'GroupedResult' 
     }); 
     // now for the money-maker; loop over the current groups in our store 
     for(var i in groups) { 
      // get a sample model from the group 
      var curModel = groups[ i ].children[ 0 ]; 
      // create a new instance of our new Model 
      var newModel = Ext.create('GroupedResult'); 
       // set the property in the model that corresponds to our xField config 
       newModel.set(me.xField, curModel.get(me.xField)); 
      // now loop over each of the records within the old store's current group 
      for(var x in groups[ i ].children) { 
       // get the record 
       var dataModel = groups[ i ].children[ x ]; 
       // get the property and value that correspond to gField AND yField 
       var dataProperty = dataModel.get(me.gField); 
       var dataValue = dataModel.get(me.yField); 
       // update the value for the property in the Model instance 
       newModel.set(dataProperty, dataValue); 
       // add the Model instance to the new Store 
       newStore.add(newModel); 
      } 
     } 
     // now we have to fix the axes so they work 
     // for each axes... 
     me.chart.axes.each(function(item, index, len) { 
      // if array of fields 
      if(typeof item.fields=='object') { 
       // loop over the axis' fields 
       for(var i in item.fields) { 
        // if the field matches the yField config, remove the old field and replace with the grouping fields 
        if(item.fields[ i ]==me.yField) { 
         Ext.Array.erase(item.fields, i, 1); 
         Ext.Array.insert(item.fields, i, groupers); 
         break; 
        } 
       } 
      } 
      // if simple string 
      else { 
       // if field matches the yField config, overwrite with grouping fields (string or array) 
       if(item.fields==me.yField) { 
        item.fields = groupers; 
       } 
      } 
     }); 
     // set series fields and yField config to the new groupers 
     me.fields,me.yField = groupers; 
     // update chart's store config, and re-bind the store 
     me.chart.store = newStore; 
     me.chart.bindStore(me.chart.store, true); 
     // done! 
    } 
}) 

Ext.create('Ext.chart.Chart', { 
    renderTo: Ext.getBody(), 
    width: 500, 
    height: 300, 
    animate: true, 
    store: store, 
    legend: { 
     position: 'right' 
    }, 
    axes: [ 
     { 
      type: 'Numeric', 
      position: 'left', 
      fields: ['quantity'], 
      label: { 
       renderer: Ext.util.Format.numberRenderer('0,0') 
      }, 
      title: 'Quantity', 
      grid: true, 
      minimum: 0 
     }, 
     { 
      type: 'Category', 
      position: 'bottom', 
      fields: ['state'], 
      title: 'State' 
     } 
    ], 
    series: [ 
     { 
      type: 'autogroupedcolumn', 
      axis: 'left', 
      highlight: true, 
      xField: 'state', 
      yField: 'quantity', 
      gField: 'product' 
     } 
    ] 
}); 

請參閱here

Answer 2

而且作爲煎茶搗鼓想出來：https://fiddle.sencha.com/#fiddle/207