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>