Code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.jpg',
phoneStartupScreen: 'phone_startup.jpg',
tabletIcon: 'icon-ipad.png',
phoneIcon: 'icon-iphone.png',
glossOnIcon: false,
onReady: function() {
window.generateData = function(n, floor) {
var data = [],
p = (Math.random() * 11) + 1,
i;
floor = (!floor && floor !== 0) ? 20 : floor;
for (i = 0; i < (n || 31); i++) {
data.push({
name: i ,
data1: Math.floor(Math.max((Math.random() * 20), floor)),
data2: Math.floor(Math.max((Math.random() * 100), floor)),
data3: Math.floor(Math.max((Math.random() * 100), floor)),
data4: Math.floor(Math.max((Math.random() * 100), floor)),
data5: Math.floor(Math.max((Math.random() * 100), floor)),
data6: Math.floor(Math.max((Math.random() * 100), floor)),
data7: Math.floor(Math.max((Math.random() * 100), floor)),
data8: Math.floor(Math.max((Math.random() * 100), floor)),
data9: Math.floor(Math.max((Math.random() * 100), floor)),
data10: Math.floor(Math.max((Math.random() * 100), floor)),
data11: Math.floor(Math.max((Math.random() * 100), floor)),
data12: Math.floor(Math.max((Math.random() * 100), floor)),
data13: Math.floor(Math.max((Math.random() * 100), floor)),
data14: Math.floor(Math.max((Math.random() * 100), floor)),
data15: Math.floor(Math.max((Math.random() * 100), floor)),
data16: Math.floor(Math.max((Math.random() * 100), floor)),
data17: Math.floor(Math.max((Math.random() * 100), floor)),
data18: Math.floor(Math.max((Math.random() * 100), floor)),
data19: Math.floor(Math.max((Math.random() * 100), floor)),
data20: Math.floor(Math.max((Math.random() * 100), floor)),
data21: Math.floor(Math.max((Math.random() * 100), floor)),
data22: Math.floor(Math.max((Math.random() * 100), floor)),
data23: Math.floor(Math.max((Math.random() * 100), floor)),
data24: Math.floor(Math.max((Math.random() * 100), floor)),
data25: Math.floor(Math.max((Math.random() * 100), floor)),
data26: Math.floor(Math.max((Math.random() * 100), floor)),
data27: Math.floor(Math.max((Math.random() * 100), floor)),
data28: Math.floor(Math.max((Math.random() * 100), floor)),
data29: Math.floor(Math.max((Math.random() * 100), floor)),
data30: Math.floor(Math.max((Math.random() * 100), floor))
});
}
return data;
};
window.store1 = new Ext.data.JsonStore({
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData(31, 5)
});
var colors = ['url(#blue)'];
var onMsgTap = function () {
var msg = new Ext.MessageBox();
msg.show({
title: 'Hello World',
msg: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt',
buttons: [{text:'Sure',itemId:'sure'},{text:'No Way',itemId:'noway'}],
fn:function(response){
console.log(response)
}
});
}
var onRefreshTap = function() {
window.store1.loadData(generateData(31, 2));
};
// ******************
// ** CHART PANELS **
// ******************
// Number of cards not pulled
// Chart Panel
var cardsNotPulled = new Ext.chart.Panel({
fullscreen: true,
title: 'Cards Not Pulled At [Location]',
items: {
cls: 'column1',
//animate: {
// easing: 'bounceOut',
// duration: 750
//},
store: store1,
shadow: false,
gradients: [{
'id': 'blue',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
minimum: 0,
maximum: 30,
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: '# of Cards Not Pulled'
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: Date.monthNames[8]
}],
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']
// }]
}
});
// Number of stock out cards not pulled
// Chart Panel
var stockCardsNotPulled = new Ext.chart.Panel({
fullscreen: true,
title: 'Cards Not Pulled At [Location]',
items: {
cls: 'column1',
//animate: {
// easing: 'bounceOut',
// duration: 750
//},
store: store1,
shadow: false,
gradients: [{
'id': 'blue',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1'],
minimum: 0,
maximum: 30,
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: '# of Cards Not Pulled'
},
{
type: 'Category',
position: 'bottom',
fields: ['name'],
title: Date.monthNames[8]
}],
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']
// }]
}
});
// ****************
// ** NAVIGATION **
// ****************
// Tab bar (intended for page selection)
new Ext.TabPanel({
fullscreen: true,
ui : 'plain',
sortable : true,
tabBarDock: 'bottom',
items: [
{
title: 'Home',
html : '1',
layout: 'fit'
},
{
title: 'Cards Not Pulled',
items: [cardsNotPulled],
layout: 'fit'
},
{
title: 'Stock Cards Not Pulled',
items: [stockCardsNotPulled],
layout: 'fit'
}
]
});
}
});