Sep 01, 2013, 9:51 PM
ExtJS Charts in Ext.Net version 1.x
Hi,
With all due respect to Ext.Net version 2.x I've always been wondering if ExtJS charts could work with Ext.Net version 1.x even though the official Ext.Net package does not support them.
Well, it actually can! Based on geoffrey's post (on how to add ExtJS component to Ext.Net component) here is how to add a Ext.chart.PieChart component inside a Ext.Net Panel.
The result is shown below:
Hope this helps everyone who needs charts but cannot afford migrating to ext.net version 2.x :)
With all due respect to Ext.Net version 2.x I've always been wondering if ExtJS charts could work with Ext.Net version 1.x even though the official Ext.Net package does not support them.
Well, it actually can! Based on geoffrey's post (on how to add ExtJS component to Ext.Net component) here is how to add a Ext.chart.PieChart component inside a Ext.Net Panel.
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net 1.x and ExtJS Charts!</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />
<script type="text/javascript">
Ext.chart.Chart.CHART_URL = 'charts.swf';
var addPanel = function (pnl) {
var store = new Ext.data.JsonStore({
fields: ['season', 'total'],
data: [{
season: 'Summer',
total: 150
}, {
season: 'Fall',
total: 245
}, {
season: 'Winter',
total: 117
}, {
season: 'Spring',
total: 184
}]
});
var pie = new Ext.chart.PieChart({
store: store,
dataField: 'total',
categoryField: 'season',
extraStyle:
{
legend:
{
display: 'bottom',
padding: 5,
font:
{
family: 'Tahoma',
size: 13
}
}
}
});
pnl.add(pie);
pnl.doLayout();
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<h1>ExtJS charts and Ext.Net 1.x!</h1>
<ext:Panel
ID="Panel1"
runat="server"
width="400"
height="400"
title="PieChart">
<Listeners>
<BeforeRender Fn="addPanel" />
</Listeners>
</ext:Panel>
</form>
</body>
</html>
IMPORTANT: For this to work you need the charts.swf file provided by ExtJS in the freely available ExtJS 3.x SDK. FYI, ExtJS 3.x supports chart in the form of flash objects. You can download the ExtJS 3.4 here. Then copy the charts.swf file from the resources folder and paste it into your asp.net project folder.The result is shown below:
Hope this helps everyone who needs charts but cannot afford migrating to ext.net version 2.x :)