Differences

This shows you the differences between two versions of the page.

Link to this comparison view

blog:extjs_-_hello_world._introduction_to_professional_looking_web_interfaces [2010/10/29 09:42] (current)
root created
Line 1: Line 1:
 +====== 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//
 +
 +<code html>
 +<​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>​
 +
 +</​code>​
 +
 +
 +This will create a blank page that pops up up an styled javascript alert. Something like this
 +{{ :​blog:​getting_started_with_extjs_1288370336217.png?​400px | }}
  
 
blog/extjs_-_hello_world._introduction_to_professional_looking_web_interfaces.txt · Last modified: 2010/10/29 09:42 by root
 
RSS - 200 © CrosswireDigitialMedia Ltd