Code:
var colors = ['url(#v-1)', 'url(#v-2)', 'url(#v-3)', 'url(#v-4)', 'url(#v-5)'];
var store1 = new Ext.data.JsonStore({
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: [{name: 'bob', data1: 21},
{name: 'sam', data1: 33},
{name: 'sarah', data1: 44},
{name: 'wo', data1: 55},
{name: 'when', data1: 66},
{name: 'how', data1: 77}
]
});
var chartPanel = new Ext.chart.Panel({
// fullscreen: true, screws up the app -either way wont render properly
title: 'Pie Chart',
store: store1,
shadow: false,
gradients: [{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
minimum: 0,
maximum: 100,
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Value'
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Reports'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
label: {
field: 'data1'
},
xField: 'name',
yField: 'data1'
}],
interactions: [{
type: 'panzoom',
axes: ['bottom']
}]
});
var panel2 = new Ext.Panel({
title: 'Reports',
layout:'fit',
items: [{
xtype: 'list',
store: workcatalog.stores.WhichReport,
itemTpl: new Ext.XTemplate(
"{label}"
),
onItemDisclosure: function(record, btn, index) {
var store1 = workcatalog.stores.Users;
console.log(store1.getAt(index).data.id);
workcatalog.controllers.WorkController.setUser(store1.getAt(index).data.id);
Ext.dispatch({
controller: workcatalog.controllers.WorkController,
action: "displayUsedBy",
animation: {type:"slide", direction:"left"}
});
},
grouped: false,
scroll: "verticle",
//fullscreen: true
}],
});
workcatalog.views.WhichReportMenu = Ext.extend(Ext.TabPanel, {
layout: {
type: 'vbox',
align: 'stretch',
},
defaults: {flex: 1},
dockedItems: [{
xtype: "toolbar",
style: "font-size: 14px",
title: "Report Details",
items: [{
xtype:"button",
ui: 'back',
text: 'Back',
handler: function() {
Ext.dispatch({
controller: workcatalog.controllers.WorkController,
action: "goBackFromWhichReports",
animation: {type:"slide", direction: "right"}
});
}
},
{xtype:'spacer'},
{
id: 'home',
xtype: "button",
iconCls: "home x-icon-mask",
handler: function() {
workcatalog.controllers.WorkController.setFromUsersGate(0);
workcatalog.controllers.WorkController.setFeaturedGate(0);
Ext.dispatch({
controller: workcatalog.controllers.WorkController,
action: 'index',
animation: {type:'slide', direction:'right'}
});
}
}]
},{
xtype: "toolbar",
dock: "bottom",
style: "font-size: 14px",
title: "PC",
}
],
items: [panel2, chartPanel],
initComponent: function() {
workcatalog.views.WhichReportMenu.superclass.initComponent.apply(this, arguments);
}
});