How to fetch values of dropdown box on click event in ExTJS - combobox

Question

My task is to fetch different types of charts ,when i click from the drop down box.
Based on which graph i select from dropdown ,i need to display the same in JS file.
Currently i can display different types of charts.
Can you please help me how to fetch from based on dropdown values through sencha EXT JS.
Thanks in advance..
please find the attached code below.
/*global Ext:false */
Ext.onReady(function () {
// The data store containing the list of states
var charts = Ext.create('Ext.data.Store', {
fields: [ 'name'],
data: [{
"name": "Bar"
}, {
"name": "Pie"
}, {
"name": "Line"
},{
"name": "Area"
}, {
"name": "Column"
}, {
"name": "Gauge"
}
]
});
// Create the combo box, attached to the charts data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Chart',
store: charts,
queryMode: 'local',
displayField: 'name',
renderTo: Ext.getBody()
});
//Line Chart
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{ 'name': 'metric one', 'data1': 10, 'data2': 12, 'data3': 14, 'data4': 8, 'data5': 13 },
{ 'name': 'metric two', 'data1': 7, 'data2': 8, 'data3': 16, 'data4': 10, 'data5': 3 },
{ 'name': 'metric three', 'data1': 5, 'data2': 2, 'data3': 14, 'data4': 12, 'data5': 7 },
{ 'name': 'metric four', 'data1': 2, 'data2': 14, 'data3': 6, 'data4': 1, 'data5': 23 },
{ 'name': 'metric five', 'data1': 4, 'data2': 4, 'data3': 36, 'data4': 13, 'data5': 33 }
]
});
var linechart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
},
{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}
]
});
//Bar Chart
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data':10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data':27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
//pie chart
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'metric one', 'data': 10 },
{ 'name': 'metric two', 'data': 7 },
{ 'name': 'metric three', 'data': 5 },
{ 'name': 'metric four', 'data': 2 },
{ 'name': 'metric five', 'data': 27 }
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
//column chart
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [
{ 'name': 'January', 'data': 10 },
{ 'name': 'February', 'data': 20 },
{ 'name': 'March', 'data': 30},
{ 'name': 'April', 'data': 40 },
{ 'name': 'May', 'data': 50 },
{ 'name': 'June', 'data': 60 },
{ 'name': 'July', 'data': 70 },
{ 'name': 'August', 'data': 60 },
{ 'name': 'September', 'data': 50 },
{ 'name': 'October', 'data': 40},
{ 'name': 'November', 'data': 30},
{ 'name': 'December', 'data': 20}
]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 1000,
height: 500,
animate: true,
store: store,
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}
],
series: [
{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}
]
});
});

Answer 1

You're going to want to get yourself familiar with the card layout:
For the component to switch views, I feel you're better off using a button with a menu selecting your charts than trying a combo box.
Ext.create('Ext.button.Button', {
text: 'Select Chart',
menu: this.getChartList,
action: 'selectChart',
menuAlign: 'tl-bl'
}]
getChartList: function() {
var menuItems = [];
this.store.each(function(rec) {
mainMenuItems.push({
text: rec.get('name')
});
}
return new Ext.menu.Menu({
items: mainMenuItems
});
}
Then in your controller, or wherever you want to listen to your button:
this.control({
'button[action=selectChart] menuitem': {
click: this.onSelectChartClick,
}
});
onSelectChartClick: function(item) {
switch (item.text) {
case 'Bar':
//logic for showing bar graph
break;
case 'Pie':
//logic for showing pie chart
break;
case 'Line':
//logic for showing line graph
break;
}
}
As for the logic to show the charts, on init you should create a card layout... you could start with a container that holds your items:
this.p = Ext.create('Ext.panel.Panel', {
layout: 'card',
items: [
this.createBarGraph(),
this.createPieChart(),
this.createLineGraph()
]
});
and then on your button listener you can set the active item to your charts:
this.p.getLayout().setActiveItem(this.barGraph);