PDA

View Full Version : [CLOSED] Possible to use v2 Charts in v1 app?



jchau
Apr 26, 2012, 6:36 PM
Is it possible to use v2 Charts in v1 app? Even if I have to create everything in javascript, that's fine (and preferred).

Vladimir
Apr 26, 2012, 6:49 PM
Hi,

You can create separate page with ExtJS 4.1 scripts only (without Ext.Net)
And load that page via AutoLoad (with iframe mode) to Ext.Net panel

jchau
Apr 26, 2012, 6:50 PM
hmm...so it's not possible to Ext.NET v1 scripts plus the chart scripts loaded onto the same page?

jchau
Apr 26, 2012, 6:52 PM
will this be possible with Ext.NET : http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/sandbox/sandbox.html

Vladimir
Apr 26, 2012, 7:11 PM
Well, sandbox is possible but you cannot mix ExtJS 3 and ExtJS 4 widgets still, i mean that it is impossible to add ExtJS 4 widget as item of ExtJS 3 container. You have to use content of ExtJS 3 widget to add ExtJS4 control (in this case, ExtJS4 is out layout logic of ExtJS 3 container)

Here is Ext.Net 1.x sample


<%@ Page Language="C#" %>
<%@ 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>Ext4.NET Example</title>


<link href="ExtJS4/resources/css/ext-sandbox.css" rel="stylesheet" type="text/css" />
<script src="ExtJS4/ext-all-sandbox.js" type="text/javascript"></script>

<script type="text/javascript">
function generateData (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: Ext4.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;
}

function showChart(){
var textArea;

Ext4.chart.theme.White = Ext4.extend(Ext4.chart.theme.Base, {
constructor: function() {
Ext4.chart.theme.White.superclass.constructor.call (this, {
axis: {
stroke: 'rgb(8,69,148)',
'stroke-width': 1
},
axisLabel: {
fill: 'rgb(8,69,148)',
font: '12px Arial',
'font-family': '"Arial',
spacing: 2,
padding: 5,
renderer: function(v) { return v; }
},
axisTitle: {
font: 'bold 18px Arial'
}
});
}
});

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

var chart = Ext4.create('Ext4.chart.Chart', {
id: 'chartCmp',
xtype: 'chart',
animate: true,
shadow: true,
store: store1,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data1'],
label: {
renderer: Ext4.util.Format.numberRenderer('0,0')
},
title: 'Number of Hits',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Month of the Year'
}],
theme: 'White',
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
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: Ext4.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: ['data1']
}]
});

var win = Ext4.create('Ext4.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Bar Chart',
renderTo: Ext4.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext4.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() {
store1.loadData(generateData());
}
}],
items: chart
});
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="I am ExtJS 3.4 button" Handler="function(){showChart();}">
</ext:Button>
</form>
</body>
</html>

Daniil
Jan 27, 2015, 6:16 AM
There is a related discussion. With some efforts there is a possibility to use different versions of Ext.NET within one application:
http://forums.ext.net/showthread.php?26299