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

26 Nov 2010, 8:41 AM

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
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>

<div id="container">


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;


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(){
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.