Tweet
Hello,
I'm using the dashboard example 2 as my base. I have three components. Two charts and a grid at the bottom. I've created each element separately and they work as expected. I have created a northwest panel for some horizontal bullet widgets, a northeast panel for a column2D chart and a center panel for the grid. The problem is getting the vbox and hbox to sit horizontally on top of the grid. After reading tons of forum entries from here and ExtJS and using google. I have not been able to find an example of what I'm trying to do. I've tried many combinations, nothing works and could use some guidance. Thanks for any help.
I'm using the dashboard example 2 as my base. I have three components. Two charts and a grid at the bottom. I've created each element separately and they work as expected. I have created a northwest panel for some horizontal bullet widgets, a northeast panel for a column2D chart and a center panel for the grid. The problem is getting the vbox and hbox to sit horizontally on top of the grid. After reading tons of forum entries from here and ExtJS and using google. I have not been able to find an example of what I'm trying to do. I've tried many combinations, nothing works and could use some guidance. Thanks for any help.
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Copyright 2008-2012 CNX Corporation, All Rights Reserved">
<title>Production Goals by Line</title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence-extjs4.js"></script>
<script type="text/javascript" src="/FusionCharts/Charts/FusionCharts.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var myChart1, myChart2, myChart3, myChart4, myChart5;
// function to render the first chart
var renderChart1 = function(p) {
if (myChart1) {
myChart1.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink1 = "../FusionWidgets/charts/HBullet.swf";
myChart1 = new FusionCharts(chartLink1, "myChart1", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'prodgoalO1',
action: 'getShift1Data'
},
success: function(response) {
myChart1.setDataXML(response.responseText);
myChart1.setTransparent(true);
myChart1.render("chartdiv1");
}
});
}
};
// function to render the second chart
var renderChart2 = function(p) {
if (myChart2) {
myChart2.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink2 = "../FusionWidgets/charts/HBullet.swf";
myChart2 = new FusionCharts(chartLink2, "myChart2", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'prodgoalO1',
action: 'getShift2Data'
},
success: function(response) {
myChart2.setDataXML(response.responseText);
myChart2.setTransparent(true);
myChart2.render("chartdiv2");
}
});
}
};
// function to render the third chart
var renderChart3 = function(p) {
if (myChart3) {
myChart3.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink3 = "../FusionWidgets/charts/HBullet.swf";
myChart3 = new FusionCharts(chartLink3, "myChart3", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'prodgoalO1',
action: 'getShift3Data'
},
success: function(response) {
myChart3.setDataXML(response.responseText);
myChart3.setTransparent(true);
myChart3.render("chartdiv3");
}
});
}
};
// function to render the fourth chart
var renderChart4 = function(p) {
if (myChart4) {
myChart4.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink4 = "../FusionWidgets/charts/HBullet.swf";
myChart4 = new FusionCharts(chartLink4, "myChart4", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'prodgoalO1',
action: 'getSummaryData'
},
success: function(response) {
myChart4.setDataXML(response.responseText);
myChart4.setTransparent(true);
myChart4.render("chartdiv4");
}
});
}
};
// function to render the fifth chart
var renderChart5 = function(p) {
if (myChart5) {
myChart5.resizeTo(p.getWidth(true), p.getHeight(true));
} else {
var chartLink5 = "../FusionCharts/charts/Bar2D.swf";
myChart5 = new FusionCharts(chartLink5, "myChart5", p.getWidth(true), p.getHeight(true), "0", "0");
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'downoccro1',
action: 'getChartData'
},
success: function(response) {
myChart5.setDataXML(response.responseText);
myChart5.setTransparent(true);
myChart5.render("chartdiv5");
}
});
}
};
// create a panel to hold chart 1 (first horizontal bullet)
var panelChart1 = Ext.create('Ext.panel.Panel', {
flex: 1,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv1"></div>',
listeners: {
resize: renderChart1
}
});
// create a panel to hold chart 2 (second horizontal bullet)
var panelChart2 = Ext.create('Ext.panel.Panel', {
flex: 1,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv2"></div>',
listeners: {
resize: renderChart2
}
});
// create a panel to hold chart 3 (third horizontal bullet)
var panelChart3 = Ext.create('Ext.panel.Panel', {
flex: 1,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv3"></div>',
listeners: {
resize: renderChart3
}
});
// create a panel to hold chart 4 (fourth horizontal bullet)
var panelChart4 = Ext.create('Ext.panel.Panel', {
flex: 1,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv4"></div>',
listeners: {
resize: renderChart4
}
});
// create a panel to hold chart 5 (column2d)
var panelChart5 = Ext.create('Ext.panel.Panel', {
flex: 1,
border: false,
style: {
padding: 1
},
html: '<div id="chartdiv5"></div>',
listeners: {
resize: renderChart5
}
});
// define a northwest panel that will hold the production goals
var northwestMain = Ext.create('Ext.panel.Panel',{
anchor: '50%, 50%',
border : false,
style : {
padding : 1
},
layout: {
type: 'vbox',
pack: 'start',
align: 'stretch'
},
items: [panelChart1, panelChart2, panelChart3, panelChart4]
});
// define a northeast panel that will hold the production goals
var northeastMain = Ext.create('Ext.panel.Panel',{
anchor: '50%, 50%',
border : false,
style : {
padding : 1
},
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [panelChart5]
});
// define a north panel that will hold the northeast and northwest panels
var northMain = Ext.create('Ext.panel.Panel',{
anchor: '100%, 75%',
border : false,
style : {
padding : 1
},
layout: {
type: 'anchor',
pack: 'start',
align: 'stretch'
},
items: [northwestMain, northeastMain]
});
Ext.define('planneddown', {
extend: 'Ext.data.Model',
fields: ['LINE', 'BEGDTTM', 'PRODUCT', 'ACTIVITY']
});
var dsPlannedDown = Ext.create('Ext.data.Store',{
model : 'planneddown',
autoLoad : true,
proxy : {
type: 'ajax',
url: 'vvcall.pgm',
extraParams : {
pgm: 'downplndo1',
action: 'getRecords'
},
reader: {
type: 'json',
root: 'autogrid'
}
}
});
var columns = [
{header: '<b>Line</b>',width: 110,sortable: true,dataIndex: 'LINE'},
{header: '<b>Date/Time</b>',width: 133,sortable: true,dataIndex: 'BEGDTTM'},
{header: '<b>Product</b>',width: 225,sortable: true,dataIndex: 'PRODUCT'},
{header: '<b>Activity</b>',width: 225,sortable: true,dataIndex: 'ACTIVITY'}
];
// customer grid
var gridPlannedDown = new Ext.grid.GridPanel({
region: 'center',
title: 'Detail',
header: false,
loadMask: true,
store: dsPlannedDown,
columns: columns,
style : {
padding : 1
},
viewConfig: {
forceFit: true
}
});
// create a center panel for the planned downtimes grid
var centerMain = new Ext.Panel({
anchor: '100%, 25%',
layout: 'border',
border : false,
style : {
padding : 1
},
items: [gridPlannedDown]
});
// viewport to hold north and center panels
new Ext.Viewport({
id: 'viewport',
layout: 'anchor',
items: [northMain, centerMain]
});
});
</script>
</head>
<body>
</body>
</html>
Comment