Extjs - Hello World. Introduction to Professional Looking Web Interfaces

ExtJs is a project spawned from a yahoo javascript framework. It provides an immediately professional looking web interface with access to numerous web components. But before we get into all of that let's start with the obligatory Hello World

<html>
<head>
 
<!-- Ext relies on its default css so include it here. -->
<!-- This must come BEFORE javascript includes! -->
<link rel="stylesheet" type="text/css"
	href="http://www.crosswiredigitalmedia.com/ext-3.3.0/resources/css/ext-all.css" />
 
<!-- Include here your own css files if you have them. -->
 
<!-- First of javascript includes must be an adapter... -->
<script src="http://www.crosswiredigitalmedia.com/ext-3.3.0/adapter/ext/ext-base.js"></script>
 
<!-- ...then you need the Ext itself, either debug or production version. -->
<script src="http://www.crosswiredigitalmedia.com/ext-3.3.0/ext-all.js"></script>
 
<!-- Include here your extended classes if you have some. -->
 
<!-- Include here you application javascript file if you have it. -->
 
<title>Getting Started with Extjs</title>
 
<!-- You can have onReady function here or in your application file. -->
<!-- If you have it in your application file delete the whole -->
<!-- following script tag as we must have only one onReady. -->
 
<script type="text/javascript">
	// Path to the blank image must point to a valid location on your server
	Ext.BLANK_IMAGE_URL = 'http://www.crosswiredigitalmedia.com/ext-3.3.0/resources/images/default/s.gif';
	Ext.onReady(function(){
		Ext.Msg.alert('Test Extjs', 'Hello World');
	});
	</script>
 
</head>
<body>
 
</body>
</html>

This will create a blank page that pops up up an styled javascript alert. Something like this

 
blog/extjs_-_hello_world._introduction_to_professional_looking_web_interfaces.txt · Last modified: 2010/10/29 09:42 by root
 
RSS - 200 © CrosswireDigitialMedia Ltd