6 'Ext.layout.container.Column'
10 Ext.onReady(function(){
12 //use a renderer for values in the data view.
17 var bd = Ext.getBody(),
20 selectedStoreItem = false,
21 //performs the highlight of an item in the bar series
22 selectItem = function(storeItem) {
23 var name = storeItem.get('company'),
24 series = barChart.series.get(0),
27 series.highlight = true;
28 series.unHighlightItem();
29 series.cleanHighlights();
30 for (i = 0, items = series.items, l = items.length; i < l; i++) {
31 if (name == items[i].storeItem.get('company')) {
32 selectedStoreItem = items[i].storeItem;
33 series.highlightItem(items[i]);
37 series.highlight = false;
39 //updates a record modified via the form
40 updateRecord = function(rec) {
41 var name, series, i, l, items, json = [{
43 'Data': rec.get('price %')
46 'Data': rec.get('revenue %')
49 'Data': rec.get('growth %')
52 'Data': rec.get('product %')
55 'Data': rec.get('market %')
60 createListeners = function() {
62 // buffer so we don't refire while the user is still typing
64 change: function(field, newValue, oldValue, listener) {
65 form.updateRecord(rec);
71 // sample static data for the store
76 ['American Express Company'],
77 ['American International Group, Inc.'],
82 ['E.I. du Pont de Nemours and Company'],
84 ['General Electric Company'],
85 ['General Motors Corporation'],
86 ['Hewlett-Packard Co'],
87 ['Honeywell Intl Inc'],
88 ['Intel Corporation'],
89 ['International Business Machines'],
90 ['Johnson & Johnson'],
91 ['JP Morgan & Chase & Co'],
92 ['McDonald\'s Corporation'],
93 ['Merck & Co., Inc.'],
94 ['Microsoft Corporation'],
96 ['The Coca-Cola Company'],
97 ['The Home Depot, Inc.'],
98 ['The Procter & Gamble Company'],
99 ['United Technologies Corporation'],
100 ['Verizon Communications'],
101 ['Wal-Mart Stores, Inc.']
104 for (var i = 0, l = myData.length, rand = Math.random; i < l; i++) {
105 var data = myData[i];
106 data[1] = ((rand() * 10000) >> 0) / 100;
107 data[2] = ((rand() * 10000) >> 0) / 100;
108 data[3] = ((rand() * 10000) >> 0) / 100;
109 data[4] = ((rand() * 10000) >> 0) / 100;
110 data[5] = ((rand() * 10000) >> 0) / 100;
113 //create data store to be shared among the grid and bar series.
114 var ds = Ext.create('Ext.data.ArrayStore', {
117 {name: 'price %', type: 'float'},
118 {name: 'revenue %', type: 'float'},
119 {name: 'growth %', type: 'float'},
120 {name: 'product %', type: 'float'},
121 {name: 'market %', type: 'float'}
126 //create radar dataset model.
127 var chs = Ext.create('Ext.data.JsonStore', {
128 fields: ['Name', 'Data'],
148 //Radar chart will render information for a selected company in the
149 //list. Selection can also be done via clicking on the bars in the series.
150 var radarChart = Ext.create('Ext.chart.Chart', {
186 //create a grid that will list the dataset items.
187 var gridPanel = Ext.create('Ext.grid.Panel', {
191 title:'Company Data',
205 dataIndex: 'price %',
212 dataIndex: 'revenue %',
219 dataIndex: 'growth %',
226 dataIndex: 'product %',
233 dataIndex: 'market %',
239 selectionchange: function(model, records) {
240 var json, name, i, l, items, series, fields;
243 form = form || this.up('form').getForm();
244 fields = form.getFields();
245 // prevent change events from firing
246 fields.each(function(field){
247 field.suspendEvents();
249 form.loadRecord(rec);
251 fields.each(function(field){
252 field.resumeEvents();
259 //create a bar series to be at the top of the panel.
260 var barChart = Ext.create('Ext.chart.Chart', {
293 display: 'insideEnd',
296 orientation: 'vertical',
297 'text-anchor': 'middle'
300 'itemmouseup': function(item) {
301 var series = barChart.series.get(0),
302 index = Ext.Array.indexOf(series.items, item),
303 selectionModel = gridPanel.getSelectionModel();
305 selectedStoreItem = item.storeItem;
306 selectionModel.select(index);
314 //disable highlighting by default.
315 barChart.series.get(0).highlight = false;
317 //add listener to (re)select bar item after sorting or refreshing the dataset.
318 barChart.addListener('beforerefresh', (function() {
322 if (selectedStoreItem) {
323 timer = setTimeout(function() {
324 selectItem(selectedStoreItem);
331 * Here is where we create the Form
333 var gridForm = Ext.create('Ext.form.Panel', {
334 title: 'Company data',
359 layout: {type: 'hbox', align: 'stretch'},
362 bodyStyle: 'background-color: transparent',
371 title: 'Company Details',
376 title:'Company details',
381 defaultType: 'textfield',
387 fieldLabel: 'Price %',
389 listeners: createListeners('price %')
391 fieldLabel: 'Revenue %',
393 listeners: createListeners('revenue %')
395 fieldLabel: 'Growth %',
397 listeners: createListeners('growth %')
399 fieldLabel: 'Product %',
401 listeners: createListeners('product %')
403 fieldLabel: 'Market %',
405 listeners: createListeners('market %')
413 var gp = Ext.getCmp('company-form');