Anyone new to using the Ext library or trying to learn more about it has come to the right place. This tutorial will walk through Ext basic concepts and how to get a dynamic page up and running quickly. It is assumed that the reader has some Javascript experience and a basic understanding of the HTML document object model (DOM).
Download Ext
If you haven’t done so already, you’ll first want to download the most current Ext release which can always be found here: http://extjs.com/download.
Get Started
We’re going to walk through some of the most common tasks that people have to accomplish in Javascript and how to perform them using Ext. Ext.onReady is probably the first method that you’ll use on every page. This method is automatically called once the DOM is fully loaded, guaranteeing that any page elements that you may want to reference will be available when the script runs.
<!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>
<title>Introduction to Ext: Starter Page</title>
<!– Include YUI utilities and Ext: –>
<script type=”text/javascript” src=”../extjs/adapter/yui/yui-utilities.js”></script>
<script type=”text/javascript” src=”../extjs/adapter/yui/ext-yui-adapter.js”></script>
<script type=”text/javascript” src=”../extjs/ext-all-debug.js”></script>
<script language=”JavaScript”>
Ext.onReady(function() {
alert(“Congratulations! You have Ext configured correctly!”);
});
</script>
</head>
<body>
</body>
</html>
Responding to Events
In the above example, code we’ve written has been directly inside the onReady function, which means that it always executes immediately after the page loads. This doesn’t give us much control—you will most commonly want your code to execute in response to specific actions or events that you choose to handle. To do this, you define event handlers that can respond to events using functions that you assign.
Let’s start off with a simple example. Open up ExtStart.js and edit it so that your code looks like this:
Ext.onReady(function() {
Ext.get('myButton').on('click', function(){
alert("You clicked the button");
});
});
Not surprisingly, Element.select allows you to do the same thing, but with an entire group of Elements at once. For example, to show our message when any paragraph in our test page is clicked, we could do this:
Ext.onReady(function() {
Ext.select('p').on('click', paragraphCLick);
var paragraphCLick(e) {
alert("You clicked a paragraph");
}
});
think you very much about this example and have you an others example more simple.
Ridha
first u have 2 include 2 javascript file (u will find it in the site of extjs, the api doc is also available there)
1.ext-all.js
2.ext-base.js
then u have write code for extjs framework in any .js file between
Ext.onReady(function(){
//ur code goes here
});
As extJS is a object oriented javascript library , there are lots of classes available for different purposes.
Suppose if u want a textbox then u have to write
Ext.onReady(function(){
//ur code goes here
var myTextBox=new Ext.form.TextField ({
//ur properties for textbox goes here//see the api for all properties of
//Ext.form.TextField class
id:’myTxt’
,fieldLabel:’enter ur name’
});
});
Its very simple and rich..
But u may have problem with performance while u have a large no of controls in ur page with huge data.
thanks,
//noel
Pyxisnet Ltd.
http://extjs.com/download. this site is showing 404 found error