PDA

View Full Version : Trying to add Chart using rowexpander



ppatel2
29 May 2013, 12:10 PM
Hi,

I wan to show the chart when the row expands using rowexpander. The data will be requested using the ajax call. Can anyone please give me any idea on how to accomplish this.

Thanks,
Parth

Farish
29 May 2013, 1:12 PM
i can tell you the general idea. i wanted to put another grid inside the rowexpander and the same idea should work for you.

In the rowexpander, you add a HTML div and assign it an id. if you need a different chart for each row, then assign an id dependent on row index or some other value which is unique (e.g. id of the grid record which are are expanding). then on the expand event, create the chart and use the renderTo config to render it to the div element. you can also load the chart's data here in the expand event handler.

ppatel2
30 May 2013, 7:11 AM
Thanks Farish, I tried to add the event expandbody to rowexpander. But what I am getting is just the static div tag content ("Hello") instead of the dynamic content. Can you please tell me what am I doing wrong or missing ? I put the alert statement but it is never triggered.

file.js

Ext.Loader.setConfig({ paths : {
'Ext.ux' : 'js/ext-4.2.0.663/examples/ux'
}
});


Ext.require(['Ext.tab.*','Ext.data.*','Ext.grid.*','Ext.ux.RowExpander']);


Ext.onReady(function(){


Ext.define('Playbooks',{
extend: 'Ext.data.Model',
fields: [
'pbid','lock','playbook','status','company','brand','launch','geography','role','log','members','expirationDate','usage'
]
});


var playbookStore = new Ext.data.JsonStore( {
model: 'Playbooks',
fields: [
'pbid','lock','playbook','status','company','brand','launch','geography','role','log','members','expirationDate','usage'
],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'sortAjax.do?action=playbookJson',
reader: {
type: 'json',
root: 'Results',
totalProperty: 'Count'
}
}
});

var expander = new Ext.ux.RowExpander({
rowBodyTpl : '<div class="ux-row-expander-box">Hello</div>',
listeners : {
expandbody : function( expander, record, body, rowIndex ) {
alert("test");
}
}
});

var playbookGrid = new Ext.grid.GridPanel({
title: 'Playbooks',
store: playbookStore,
width: '100%',
columns: [
{text: "<img src=\"images/lock-(16x16).gif\" align=\"top\"/>", flex:0.5, dataIndex: 'lock', sortable: true},
{text: "Playbook", flex:1, dataIndex: 'playbook', sortable: true},
{text: "Status", flex:0.5, dataIndex: 'status', sortable: true},
{text: "Company", flex: 2.5, dataIndex: 'company', sortable: true},
{text: "Brand", flex:3, dataIndex: 'brand', sortable: true},
{text: "Launch", flex:3, dataIndex: 'launch', sortable: true},
{text: "Geography", flex:2.5, dataIndex: 'geography', sortable: true},
{text: "Your Role", flex:3, dataIndex: 'role', sortable: true},
{text: "Log", flex:0.5, dataIndex: 'log', sortable: false},
{text: "Members", flex:0.75, dataIndex: 'members', sortable: false},
{text: "Expiration Date", flex:2, dataIndex: 'expirationDate', sortable: true},
{text: "Usage", flex:1, dataIndex: 'usage', sortable: false}
],
plugins : expander
});


var tabs2 = Ext.widget('tabpanel', {
activeTab: 0,
renderTo: 'playbooksDiv',
width: '100%',
plain: true,
defaults :{
autoScroll: true,
},
items: [
playbookGrid
,{
title: 'Archived Playbooks',
loader: {
url: 'ajax1.htm',
contentType: 'html',
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
},{
title: 'Alerts',
loader: {
url: 'ajax2.htm',
contentType: 'html',
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
}]
});
});

Thanks,
Parth

bocong
30 May 2013, 6:52 PM
The documentation is misleading.
The expandbody event actually fires on grid view, so add event listeners in viewConfig

ppatel2
31 May 2013, 6:11 AM
Thanks Bocong, It works now. But I am having a small problem of duplication of the rowBody. Everytime I expand the row it adds new charts to the div keeping the existing charts.


Ext.Loader.setConfig({ paths : {
'Ext.ux' : 'js/ext-4.2.0.663/examples/ux'
}
});


Ext.require(['Ext.chart.*','Ext.layout.container.Fit', 'Ext.window.MessageBox','Ext.tab.*','Ext.data.*','Ext.grid.*','Ext.ux.RowExpander']);


Ext.onReady(function(){


Ext.define('Playbooks',{
extend: 'Ext.data.Model',
fields: [
'pbid','lock','playbook','status','company','brand','launch','geography','role','log','members','expirationDate','usage'
]
});


var playbookStore = new Ext.data.JsonStore( {
model: 'Playbooks',
fields: [
'pbid','lock','playbook','status','company','brand','launch','geography','role','log','members','expirationDate','usage'
],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'sortAjax.do?action=playbookJson',
reader: {
type: 'json',
root: 'Results',
totalProperty: 'Count'
}
}
});

var expander = new Ext.ux.RowExpander({
rowBodyTpl : '<div id="BarChart-{pbid}" style="width:50;float:left"></div><div id="GaugeChart-{pbid}" style="width:50%;float:right"></div>'
});

var playbookGrid = new Ext.grid.GridPanel({
title: 'Playbooks',
store: playbookStore,
width: '100%',
columns: [
{text: "<img src=\"images/lock-(16x16).gif\" align=\"top\"/>", flex:0.5, dataIndex: 'lock', sortable: true},
{text: "Playbook", flex:1, dataIndex: 'playbook', sortable: true},
{text: "Status", flex:0.5, dataIndex: 'status', sortable: true},
{text: "Company", flex: 2.5, dataIndex: 'company', sortable: true},
{text: "Brand", flex:3, dataIndex: 'brand', sortable: true},
{text: "Launch", flex:3, dataIndex: 'launch', sortable: true},
{text: "Geography", flex:2.5, dataIndex: 'geography', sortable: true},
{text: "Your Role", flex:3, dataIndex: 'role', sortable: true},
{text: "Log", flex:0.5, dataIndex: 'log', sortable: false},
{text: "Members", flex:0.75, dataIndex: 'members', sortable: false},
{text: "Expiration Date", flex:2, dataIndex: 'expirationDate', sortable: true},
{text: "Usage", flex:1, dataIndex: 'usage', sortable: false}
],
plugins : expander,
viewConfig : {
listeners : {
expandbody: function(rowEl, record, bodyEl, rowIndex) {
this.rowBodyTpl = new Ext.Template(getChart('BarChart-' + record.get('pbid'),'GaugeChart-' + record.get('pbid')));
}
}
}
});

var generateData = function(n, floor){
var data = [],
p = (Math.random() * 11) + 1,
i;

floor = (!floor && floor !== 0)? 20 : floor;

for (i = 0; i < (n || 12); i++) {
data.push({
name: Ext.Date.monthNames[i % 12],
data1: Math.floor(Math.max((Math.random() * 100), 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))
});
}
return data;
};

var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9', 'data9'],
data: generateData()
});

var getChart = function(barChartId, gaugeChartId) {
var chart = Ext.create('Ext.chart.Chart', {
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
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('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
});

var chart1 = Ext.create('Ext.chart.Chart', {
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
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('data1') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data1',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
});

var panel1 = Ext.create('widget.panel', {
width: 600,
height: 400,
title: 'Column Chart with Reload - Hits per Month',
renderTo: barChartId,
autoDestroy: 'true',
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
store1.loadData(generateData());
});
}
}],
items: chart
});

var panel2 = Ext.create('widget.panel', {
width: 600,
height: 400,
title: 'Column Chart with Reload - Hits per Month',
renderTo: gaugeChartId,
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
store1.loadData(generateData());
});
}
}],
items: chart1
});

return chart;
};



var tabs2 = Ext.widget('tabpanel', {
activeTab: 0,
renderTo: 'playbooksDiv',
width: '100%',
plain: true,
defaults :{
autoScroll: true,
},
items: [
playbookGrid
,{
title: 'Archived Playbooks',
loader: {
url: 'ajax1.htm',
contentType: 'html',
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
},{
title: 'Alerts',
loader: {
url: 'ajax2.htm',
contentType: 'html',
loadMask: true
},
listeners: {
activate: function(tab) {
tab.loader.load();
}
}
}]
});
});

bocong
31 May 2013, 7:39 PM
I think in the expandBody event listener, you can check if the chart component already exists before creating a new one.