PDA

View Full Version : Trying to show the chart and the grid in the same panel in extjs?



Anil1239
23 Jul 2012, 4:49 AM
Hiii Everyone!!!

I have a requirement like to show the chart and the grid in the same xtype:'panel'. Like I will explain with an example I have a box i mean i have taken a xtype:'table' and in that i have taken columns 3. So here i have added the pie chart code and the grid code in the same panel and i have two icon images like chart image and the grid image, here when i click the chart image i should show the chart image and when i click on the grid image the grid should show in the same box, i mean in the same panel. First the chart is displaying but when i click on the grid image the grid is not displaying. I am trying this for many days and i am in a search of solution very fastly dudes.... Any ideas please share....:)


I am adding my code tooo I went any where wrong please guide me.



<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css"/>


<head>
<style >
.chart-icon
{
background:url(http://png-2.findicons.com/files//icons/1581/silk/16/chart_curve_error.png) no-repeat;
}
</style>

<style>
.grid-icon
{
background:url(http://nnnpro.com/sites/all/themes/nnnproV1/images/icon-grid.png) no-repeat;
}
</style>
</head>


<script type="text/javascript">

Ext.require('Ext.chart.*');
Ext.require('Ext.grid.*');
Ext.onReady(function ()
{

var store = Ext.create('Ext.data.JsonStore', {
fields: ['namegeo', 'datageo'],
data: [
<apex:repeat value="{!grphy}" var="a">
{
'namegeo' : '{!a.geogy}',
'datageo' :{!a.georecords}
},
</apex:repeat>
]
});

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['nameindus', 'dataI'],
data: [
<apex:repeat value="{!indus}" var="a">
{
'nameindus' : '{!a.industry}',
'dataI' :{!a.indusrec}
},
</apex:repeat>
]
});


Ext.create('Ext.Panel', {
width: 1000,
height: 770,
title: 'Reports Dashboard',
renderTo: document.body,
layout:
{
type: 'table',
columns: 3,
tableAttrs: {
style: {

width: '100%',


}
}
},
defaults:
{
bodyStyle: 'padding:4px'
},
items: [{

title: '',
border:false,
columnWidth:0.050,
rowspan:2

},

{
xtype: 'panel',
title: 'Geography Chart',
width: 480,
height: 350,
closeAction: 'hide',
renderTo: Ext.getBody(),

layout: 'fit',
tbar: [

{
xtype: 'tbspacer',
width: 400
},
{
xtype : 'button',

iconCls : 'chart-icon',
layout: 'autofit',
width : 25,
height : 25,

listeners: {
click: function() {
alert('welcome chart');
chartCmp.show();
alert('welcome chart');
gridpanel.hide();
alert('welcome chart');
chart.refresh();




},
render: function() {



}
}



},
{
xtype:'tbseparator'
},
{
xtype : 'button',
text : null,
iconCls : 'grid-icon',
layout: 'autofit',
width : 25,
height : 25,

listeners: {
click: function() {
alert('welcome grid');
gridpanel.show();
chartCmp.hide();
grid.refresh();
},
render: function() {


}
}

}

],
items:
{
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store,
align:'center',
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'datageo',
showInLegend: true,
tips: {
trackMouse: true,
width: 280,
height: 50,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store.each(function(rec) {
total += rec.get('datageo');
});
this.setTitle(storeItem.get('namegeo') + ' : ' + storeItem.get('datageo') + '-Attendees');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'namegeo',
display: 'rotate',
contrast: true,
font: '15px Arial'
}
}],


items: {
xtype:'grid',

width: 480,
height: 350,

closeAction: 'hide',
renderTo: Ext.getBody(),
title: 'Simpsons',
id:'gridpanel',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
},


} ,
},

{
xtype: 'panel',
title: 'Geography Chart',
width: 480,
height: 350,
closeAction: 'hide',
renderTo: Ext.getBody(),
tools:[
{
type:'minimize'
},
{
type:'Close'}],
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['namegeo', 'datageo'],
data: [
<apex:repeat value="{!grphy}" var="a">
{
'namegeo' : '{!a.geogy}',
'datageo' :{!a.georecords}
},
</apex:repeat>
]
});
}
},
{
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
},
{
xtype: 'tbspacer',
width: 290
},
{
xtype : 'button',
text : null,
iconCls : 'chart-icon',
layout: 'autofit',
width : 25,
height : 25,
enableToggle: true,
pressed: false,
toggleHandler: function(btn, pressed)
{
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
},
{
xtype:'tbseparator'
},
{
xtype : 'button',
text : null,
iconCls : 'grid-icon',
layout: 'autofit',
width : 25,
height : 25
}],
items:
{
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store,
align:'center',
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'datageo',
showInLegend: true,
tips: {
trackMouse: true,
width: 280,
height: 50,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store.each(function(rec) {
total += rec.get('datageo');
});
this.setTitle(storeItem.get('namegeo') + ' : ' + storeItem.get('datageo') + '-Attendees');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'namegeo',
display: 'rotate',
contrast: true,
font: '15px Arial'
}
}]
}
},






{
xtype: 'panel',
title: 'Geography Chart',
width: 480,
height: 350,
closeAction: 'hide',
renderTo: Ext.getBody(),
tools:[
{
type:'minimize'
},
{
type:'Close'}],
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['namegeo', 'datageo'],
data: [
<apex:repeat value="{!grphy}" var="a">
{
'namegeo' : '{!a.geogy}',
'datageo' :{!a.georecords}
},
</apex:repeat>
]
});
}
},
{
enableToggle: true,
pressed: false,
text: 'Donut',
toggleHandler: function(btn, pressed) {
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
},
{
xtype: 'tbspacer',
width: 290
},
{
xtype : 'button',
text : null,
iconCls : 'chart-icon',
layout: 'autofit',
width : 25,
height : 25,
enableToggle: true,
pressed: false,
toggleHandler: function(btn, pressed)
{
var chart = Ext.getCmp('chartCmp');
chart.series.first().donut = pressed ? 35 : false;
chart.refresh();
}
},
{
xtype:'tbseparator'
},
{
xtype : 'button',
text : null,
iconCls : 'grid-icon',
layout: 'autofit',
width : 25,
height : 25
}],
items:
{
xtype: 'chart',
id: 'chartCmp',
animate: true,
store: store,
align:'center',
shadow: true,
legend: {
position: 'right'
},
insetPadding: 60,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'datageo',
showInLegend: true,
tips: {
trackMouse: true,
width: 280,
height: 50,
renderer: function(storeItem, item) {
//calculate percentage.
var total = 0;
store.each(function(rec) {
total += rec.get('datageo');
});
this.setTitle(storeItem.get('namegeo') + ' : ' + storeItem.get('datageo') + '-Attendees');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'namegeo',
display: 'rotate',
contrast: true,
font: '15px Arial'
}
}]
}
},






{
xtype: 'panel',
title: 'Industry Chart',
width: 480,
height: 350,
tools:[{
type:'minimize'
},
{
type:'Close'
}],
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Reload Data',
handler: function() {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['nameindus', 'dataI'],
data: [
<apex:repeat value="{!indus}" var="a">
{
'nameindus' : '{!a.industry}',
'dataI' :{!a.indusrec}
},
</apex:repeat>
]
});
}
},
{
xtype: 'tbspacer',
width: 335
},
{
xtype : 'button',
text : null,
iconCls : 'chart-icon',
layout: 'autofit',
width : 25,
height : 25,
},
{
xtype:'tbseparator'
},
{
xtype : 'button',
text : null,
iconCls : 'grid-icon',
layout: 'autofit',
width : 25,
height : 25
}],
items: [{
xtype: 'chart',
id:'chartcmp1',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['dataI'],
title: false,
grid: true,
minimum: 0,
maximum: 100
}, {
type: 'Category',
position: 'bottom',
fields: ['nameindus'],
title: false
}],
series: [{
type: 'column',
axis: 'left',
gutter: 80,
xField: 'nameindus',
yField: ['dataI'],
tips: {
trackMouse: true,
width: 280,
height: 80,
renderer: function(storeItem, item)
{
this.setTitle(storeItem.get('nameindus') + ': ' + storeItem.get('dataI') + '-Attendees ');
}
},
}]
}]

}]
});

// grid code start

// Ext.create('Ext.data.Store', {
// storeId:'simpsonsStore',
// fields:['name', 'email', 'phone'],
// data:{'items':[
// { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
// { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
// { 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
// { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
// ]},
// proxy: {
// type: 'memory',
// reader: {
// type: 'json',
// root: 'items'
// }
// }
//});

// var win = Ext.create('Ext.grid.Panel', {
//title: 'Simpsons',
// id:'gridpanel',
// store: Ext.data.StoreManager.lookup('simpsonsStore'),
// columns: [
// { header: 'Name', dataIndex: 'name' },
// { header: 'Email', dataIndex: 'email', flex: 1 },
// { header: 'Phone', dataIndex: 'phone' }
// ],
// height: 200,
// width: 400,
// renderTo: Ext.getBody()
//});



// grid code end



});

</script>

scottmartin
23 Jul 2012, 8:59 AM
See if this will help:



Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":17 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change": 7 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":5 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":27 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change' }
],
flex: 1
});

var chart = Ext.create('Ext.chart.Chart', {
flex: 1,
animate: true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'change',
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('change') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});

var panel = Ext.create('Ext.panel.Panel', {
title: 'Hello',
height: 600,
width: 800,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [ chart ],
renderTo: Ext.getBody()
});

Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
panel.add(grid);
}
});


Scott.