PDA

View Full Version : using chart example as input for the GroupTabs example portal item



liri
26 Nov 2010, 8:41 AM
Hey,

I altered the item: {} code inside the grouptabs.js as provided by the GroupTabs example code so that the viewport items loads up html dynamically (from a url rather than a variable that defines the html code), so I did something like this:



{ title: 'Users',
iconCls: 'x-icon-users',
tabTip: 'Users tabtip',
style: 'padding: 10px;',
//html: Ext.example.shortBogusMarkup
autoLoad:{
url: '../chart/reload-chart2.html',
scripts: true,
}



the reload-chart2.html is an altered of the original code (I removed all the <html> tags and such):



<!-- GC -->
<script type="text/javascript" src="/~user/tests/ext-3.3.0/examples/chart/reload-chart.js"></script>
<!-- Common Styles for the examples -->


<h1>Reload Column Chart Sample</h1>
<p>The js is not minified so it is readable. See
<a href="/~user/tests/ext-3.3.0/examples/chart/reload-chart.js">reload-chart.js</a>.</p>

<br/><br/>
<div id="container">

</div>




and the reload-chart.js is just the same, I only changed the url to be absolute link to the swf file:




/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
function generateData(){
var data = [];
for(var i = 0; i < 12; ++i){
data.push([Date.monthNames[i], (Math.floor(Math.random() * 11) + 1) * 100]);
}
return data;
}

Ext.onReady(function(){

var store2 = new Ext.data.ArrayStore({
fields: ['month', 'hits'],
data: generateData()
});

new Ext.Panel({
width: 700,
height: 400,
renderTo: document.body,
title: 'Column Chart with Reload - Hits per Month',
tbar: [{
text: 'Load new data set',
handler: function(){
store2.loadData(generateData());
}
}],
items: {
xtype: 'columnchart',
store: store2,
yField: 'hits',
url: '/~user/tests/ext-3.3.0/resources/charts.swf',
xField: 'month',
xAxis: new Ext.chart.CategoryAxis({
title: 'Month'
}),
yAxis: new Ext.chart.NumericAxis({
title: 'Hits'
}),
extraStyle: {
xAxis: {
labelRotation: -90
}
}
}
});
});



the chart itself doesn't show up, only the text in the html code...

What could be the reason that this doesn't work?
Other Ext code like a panel does work to show it up on the page.