Victoria's Blog | Spring MVC with ExtJS (Sencha)

Spring MVC with ExtJS (Sencha)

18/09/2011

I’ve decided to post this example, even though I never actually did finish it. Its missing a form to post back a new temperature reading and save that posted value to the database. It also could do with refreshing the graph after the new value has been added to the database.

Anyway, the basics of the project are there. A Spring MVC web app with ExtJS (Sencha) front end showing a graph of the temperature records in the database.

Particular files of interest:

temperature.jsp – simply loads in the temperature.js script file and contains a div where the graph will be rendered.

<html>

	<head>
<?php if (isCseAllowed()) { 
    echo "<link rel=\"preload\" href=\"https://cse.google.com/cse.js?cx=007066816790183607535:cjruhgzse8h\" as=\"script\">";
    echo "<script async src=\"https://cse.google.com/cse.js?cx=007066816790183607535:cjruhgzse8h\"></script>";
} ?>

<?php if (isA2aAllowed()) {
    echo "<link rel=\"preload\" href=\"/wp-content/plugins/add-to-any/addtoany.min.css\" as=\"style\">";
    echo "<link rel=\"preload\" href=\"https://static.addtoany.com/menu/page.js\" as=\"script\">";
} ?>

<link rel="preload" href="/wp-content/themes/vsf/style.css" as="style">
<link rel="preload" href="/wp-content/uploads/2016/10/cropped-vsf-1-32x32.png" as="image">
<link rel="preload" href="/wp-content/uploads/2016/10/cropped-vsf-1-192x192.png" as="image">
<link rel="preload" href="/wp-content/uploads/2016/10/cropped-vsf-1-180x180.png" as="image">

	    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
	    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
	    <script type="text/javascript" src="js/tempgraph.js"></script>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script>
		Ext.onReady
		(
			function()
			{
				Ext.getCmp('tempChart').render('tempChartDiv');
			}
		);
		</script>
	</head>
	<body>
		<div id="tempChartDiv" style="width: 500px; height: 500px;"></div>
	</body>
</html>

tempgraph.js – contains all the necessary ExtJS code to render the temperature graph and request data from the database.

Ext.require('Ext.chart.*');
Ext.require('Ext.data.*');

function dateConversion(v, record){
	var dateAsString = v.toString();
	//2011-04-10
	console.log(dateAsString);
	var year = dateAsString.substr(0, 4);
	var month = dateAsString.substr(5, 2) - 1;
	var day = dateAsString.substr(8, 2);

	var date = new Date();
	date.setFullYear(year, month, day);

	return date;
}

//alert("here");
Ext.define('Temperature', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id'},
        {name: 'averageTemperature', type: 'float'},
        {name: 'date', convert: dateConversion},
        {name: 'highestTemperature', type: 'float'},
        {name: 'lowestTemperature', type: 'float'}
    ]
});

var store = new Ext.data.Store({
    model: 'Temperature',
    proxy: {
        type: 'ajax',
        url : '/Temperature/temperatures.xml',
        reader: {
            type: 'xml',
            root  : 'temperatures',
            record: 'temperature'
        }
    },
    autoLoad: true
});

var chart = new Ext.chart.Chart ({
	id: 'tempChart',
    width: 500,
    height: 500,

    store: store,
    animate: true,

    // Set a legend
    legend: {
        position: 'left'
    },

    // Define axes
    axes: [
        {
        	type: 'Numeric',
        	minimum: 0,
            position: 'left',
            fields: ['averageTemperature', 'highestTemperature'],
            title: 'Temperature',
            minorTickSteps: 1,
            grid: {
                odd: {
                    opacity: 1,
                    fill: '#ddd',
                    stroke: '#bbb', 'stroke-width': 0.5
                }
            }
        },
        {
        	type: 'Time',
	        position: 'bottom',
	        fields: ['date'],
	        title: 'Day',
	        dateFormat: 'd M',

	        //constrain: true,
	        fromDate: dateConversion('2011-04-08'),
	        toDate: dateConversion('2011-04-12')
        }
    ],

    // Define series
    series: [
        {
        	type: 'Line',
        	highlight: {
            	size: 7,
            	radius: 7
	        },
	        axis: 'left',
	        xField: 'date',
	        yField: ['averageTemperature'],
	        markerCfg: {
	            type: 'cross',
	            size: 4,
	            radius: 4,
	            'stroke-width': 0
	        }
        },
        {
        	type: 'Line',
        	highlight: {
            	size: 7,
            	radius: 7
	        },
	        axis: 'left',
	        xField: 'date',
	        yField: ['highestTemperature'],
	        markerCfg: {
	            type: 'cross',
	            size: 4,
	            radius: 4,
	            'stroke-width': 0
	        }
        }
	]
});

Other than those two files, the rest can be found in the project zip, Temperature.zip, MD5 hash ee60b90609c2e1654dfd179bed11cebe. Feel free to extend it or even finish it off 🙂