The Setup
Setup of Ext is very simple. All you have to do is download the zipped library and extract it on you system. You can put it in the web server directory so that the applications we write will be able to access it. This is how it looks like on my Eclipse or web server:
The red box is the ext folder and files. You can remove the doc and examples when you deploy on your web server. In the blue boxed folder ie, appjs I have my custom javascript files for the web application. Now even if you don’t use Eclipse, a setup like this is enough for you to start programming using Ext JS library.
Tools of trade
The best tool available is Eclipse with the Spket IDE plugin installed. The plugin is free for non-commercial purpose and support many libraries like Laszlo, Silverlight , YUI etc. The Spket site also has tutorials on how to configure the plugins and get you started.
Hello World on 1.x
Ok. Lets get started with programming… Here is the HTML for Hello World program:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css"> <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="js/extjs/ext-all-debug.js"></script> <script type="text/javascript" src="js/appjs/index.js"></script> <!-- A Localization Script File comes here --> <script type="text/javascript"> Ext.onReady(App.init,App); </script> <title>Sample</title> </head> <body> <div id="button-div"></div> </body> </html>There is not much to explain if you know HTML, but for the first times in Ext JS: Note the standard Ext javascript files included. Remember you can use the ext-all.js instead of the ext-all-debug.js. Also notice we have our own javascript file named index.js which is included before the Ext.onReady method is called. Now let’s have a look at the index.js:
App = function() {
var button;
var buttonHandler = function(button, event) {
alert('Hello World!');
};
return {
init: function() {
button = new Ext.Button('button-div',{text:'Hello World',handler: buttonHandler});
}
};
}();
Running this will give you a simple button on top of the web page titled "Hello World". On clicking it you get an alert box saying "Hello World" – That's All! 
The Ext applications follow the module pattern described by Eric Miraglia. I will talk about this and Javascript OOP later. For now looking closely at the javascript you will see that when you instantiate a button you provide the DOM element and the object properties. In this case the DOM element is "button-div" and properties are text and handler function.
Hello World on 2.0
This code on Ext JS 2.0 is not going to work! You will get a button without any title and on clicking; you will not get the alert box too. In the latest version, we have lot of changes to the Ext that makes new version stand out among all other javascript libraries. If you do through the API documentation you will see new layout and widgets, changes in API etc. These changes in API cause the above mentioned problem. If you compare the constructor of Ext.Button class, you will notice that the latest version have only one parameter and that is the object configuration. You do not have to pass the DOM as in the case of old version. In Ext 2.0 you can specify the DOM in object configuration or you can make use of the applyToMarkup method. So our program will now look like:
App = function() {
var buttonObject;
var buttonHandler = function(button, event) {
alert('Hello World');
};
return {
init: function() {
buttonObject = new Ext.Button(
{text:'Hello World',handler:buttonHandler});
buttonObject.applyToMarkup('button-div');
}
};
}();Instead of using the applyToMarkup method apply the DOM element you can instantiate the button as :buttonObject=new Ext.Button({applyTo:'button-div',text:'Hello World',handler:buttonHandler});Wrap upWrapping up .. I will post more on the Ext in coming days demonstrating different widgets and techniques as I study them.
No comments :
Post a Comment