http://www.sencha.

com/learn/sencha-class-system/

Important Files for Extjs: In order to use ExtJS stuff you must load appropriate JavaScript and CSS files. /ext/resources/css/ext-all.css this is the .css file that contains (visual)styles for all ExtJS core components. "js/ext/adapter/ext/ext-base.js" this is the .js file that contains base ExtJS stuff you need . js/ext/ext-all.js this is the .js file that contains core ExtJS logic that you need . Code: <!-- include ext-all.css --> <link rel="stylesheet" href="js/ext/resources/css/ext-all.css" /> <!-- include ext-base.js --> <script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script> <!-- include ext-all.js --> <script type="text/javascript" src="js/ext/ext-all.js"></script>

ext-all-debug-w-comments.js Debug version of the entire framework, with comments. This is the largest file of the bunch and requires the most processing to display in browsers. ext-all-debug.js Same as above, but without the comments. Still very large, but very good for debugging in most cases. ext-all.js The entire framework concatenated and minified. Debugging is impossible with this file, so it should be used for production systems only. ext-debug.js This file contains the Ext JS foundation and whitespace. With this file, you can remote load all of Ext JS, as needed, and it provides the best debugging experience. The tradeoff is that its the slowest. ext.js The minified version of ext-debug.js.

--------------------------------------------------------------------------------------------------

ExtJs Files: bootstrap.js This will eventually be the only JavaScript file you need to load. It will automatically detect your application environment (development, staging, production, etc.) and dynamically

load the Ext JS files you need. Details on configuring bootstrap.js along with examples are currently being developed. core Contains all the source, examples and test files for Ext Core. Ext Core provides basic crossbrower abstractions for DOM querying, element selection and more. docs Contains a locally browsable version of the Ext JS 4 API documentation. examples Contains a full series of examples built with Ext JS 4 along with annotated source code for each one. ext-all-debug.js The debug version of the complete Ext JS 4 library. ext-all-sandbox-debug.js The sandboxed debug version of the complete Ext JS 4 library. This allows Ext JS 4 to occupy the Ext4 namespace instead of the standard Ext namespace. This version is recommended if you need to run Ext JS 3 and Ext JS 4 in the same application. ext-all-sandbox.js This is the production, sandboxed version of the complete library. The sandbox version is recommended if you need to run Ext JS 3 and Ext JS 4 in the same application. ext-all.js This is the production edition of the complete Ext JS 4 library. ext-core-debug.js This is the debug edition of Ext Core. Ext Core provides basic cross-brower abstractions for DOM querying, element selection and more. ext-core-sandbox-debug.js

This is the sandboxed debug version of Ext.Core. Ext.Core provides basic cross-brower abstractions for DOM querying, element selection and more. The sandbox version is recommended if you need to run Ext JS 3 and Ext JS 4 in the same application. ext-core.js This is the production edition of Ext Core. Ext Core provides basic cross-brower abstractions for DOM querying, element selection and more. ext-foundation-debug.js This is the debug edition of Ext Foundation. Ext Foundation provides a browser independent base of the Ext JS 4 library. It's designed to be used in server side JavaScript environments including Node.js, Rhino, and HammerJS. Documentation and examples for Ext Foundation are currently being developed. ext-foundation.js This is the production edition of Ext Foundation.

Sandbox JavaScript Includes <script type="text/javascript" src="libs/ext-4.0/ext-core-sandbox.js"></script> <script type="text/javascript" src="libs/ext-4.0/ext-all-sandbox.js"></script> Sandbox versions of ext-core (ext-core-sandbox.js) and ext-all (ext-all-sandbox.js) are available to make easier to run Ext JS 4 and Ext JS 3 the same time. When using the sandbox files Ext JS 4 is available under the Ext4 namespace. Debug versions of the sandbox files are available as ext-core-sandbox-debug.js and extallsandbox-debug.js.

My FirstProgram.html <!DOCTYPE html> <html>

<head> <meta charset=utf-8 /> <title>ExtJS Samples</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" > Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; </script> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ Ext.Msg.alert("Welcome","Welcome to ExtJS World"); }); </script> </body> </html>

Example2:(Form Creation in ExtJs) <!DOCTYPE html>

<html> <head> <meta charset=utf-8 /> <title>ExtJS Samples</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" > Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; </script> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ var form = new Ext.form.FormPanel({ renderTo: Ext.getBody(), frame: true, title: 'Tell me about yourself', width: 200, items: [{ xtype: 'textfield', fieldLabel: 'Your name', name: 'name' }, { xtype: 'numberfield', fieldLabel: 'Age', name: 'age' }] }); }); </script> </body> </html>

We have inserted two text fields name and age. ExtJS supports a special text field called numberfield in which you will be able to input only numbers. So we set ages type as numberfield renderTo: The renderTo option tells the framework to render the form into the body of the html file.
Ext.getBody() is an inbuilt function in ExtJS that will return the body tag.

Now we add Buttons:

Here we have inserted two buttons. Submit and Reset and attached two handlers to the click event. When the user click on the Submit button, the data will be sent to the file submit.js and will wait for the result. At the same time it will show a message Processing Request which was given in waitMsg. ExtJS expects JSON as returned string from submit.php and if the string contains success:true then it will execute the codes described in the success() function, else failure(). The response from submit.php is stored in response object.

Submit.jsp <h1>SuccessFull Login.

FullCodingFor Form
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ExtJS Samples</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" > Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; </script> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ var form = new Ext.form.FormPanel({ renderTo: Ext.getBody(), frame: true, title: 'Tell me about yourself', width: 200,

items: [{ xtype: 'textfield', fieldLabel: 'Your name', name: 'name' }, { xtype: 'numberfield', fieldLabel: 'Age', name: 'age' }, { xtype: 'radio', fieldLabel: 'Sex', name: 'sex', boxLabel: 'male'

}, {

xtype: 'radio', name: 'sex', hideLabel: false, boxLabel: 'female' } ], buttons: [{

text: 'Save', handler: function() { form.getForm().submit({ url: 'submit.php', waitMsg: 'Processing Request', success: function(a, response) { Ext.Msg.alert("Login Success", response.result.reason); }, failure: function(a, b) { Ext.Msg.alert("Failed", response.result.reason);

} }); }

}, {

text: 'Reset', handler: function() { form.getForm().reset(); } }] });

});

</script>

</body> </html>

Class Definition in ExtJs -------------------------------------------------------------------------------------------------------------------To create a simple class we only have to use the method Ext.define or Ext.ClassManager.create as follows:

Ext.define(Name,Configurations,Callback); Ext.ClassManager.create(Name,Configurations,Callback); The first parameter defines the name of the class and it must be a String. The second parameter defines the members of the class and it should an object with all the properties and methods we need in the new class.

The third parameter defines a function (optional) that its executed when the class is created, this is useful when creating classes that have to be included asynchronously using the Loader. Here is an example of a class called User: Ext.define("msat.training.User",{ username : "", password : "", login }, logout } }); : function(){ console.log("Loging out...."); : function(){ console.log("Loging in....");

Note: We created a class called User. Namespace for the class is msat.training. Second parameter is an object two properties and methods. Overriding the constructor
In the previous example we didnt define a class constructor, therefore Ext assigned an empty constructor, if we wanted to define one we would have to use the property builder as follows:

Ext.define("msat.training.User",{ username : "", password : "", constructor : function(options){ Ext.apply(this,options || {}); console.log("A new user!"); } login }, logout } }); The property constructor is a special configuration (as in Ext3) that allows us to define the function that will build the object we are defining, in this case when we call the method Ext.apply it copies the contents of the object options to the instance that will be created, this gives us the possibility that when we create the instance we can assign values to the properties that were defined. Instance Creation Ext.create(Class,Options); : function(){ console.log("Loging out...."); : function(){ console.log("Loging in....");

Ext.ClassManager.instantiate(Class,Options); Both methods do exactly the same, the first parameter defines the class that we want to instantiate (String) and the second parameter is an object with the settings that will be applied to the instance, for example: var john = Ext.create("Bleext.training.User",{ username : "john", password : "123" }); console.log(john);

Examples1:(Class ,object,Constructor) <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ExtJS Samples</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" > Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; </script> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ Ext.define('My.sample.Person', { constructor: function(name) { this.name = name; }, walk: function(steps) { alert(this.name + ' is walking ' + steps + ' steps'); } }); var tommy = new My.sample.Person('Tommy'); tommy.walk(5); });

Example 2: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ExtJS Samples</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" > Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; </script> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ Ext.define('My.sample.Person', { constructor: function(name) { this.name = name; }, walk: function(steps) {

alert(this.name + ' is walking ' + steps + ' steps'); } }); Ext.define('My.sample.Developer', { extend: 'My.sample.Person', code: function(language) { alert(this.name + ' is coding in ' + language); } }); var tommy = new My.sample.Developer('Tommy'); tommy.walk(5); // 'Tommy is walking 5 steps tommy.code('JavaScript'); // 'Tommy is coding in JavaScript' }); </script> </body> </html> Output:

ExtJs Events <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ExtJS Samples</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" > Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; </script> </head> <body> <script type="text/javascript">

Ext.onReady(function() { alert("Congratulations! You have Ext configured correctly!"); });

</html> Performing Operations on DOM <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ExtJS Samples</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" > Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; </script> </head> <body> <script type="text/javascript"> Ext.onReady(function() { Ext.select('p').on('click', function() { alert("You clicked a paragraph"); }); }); </script> <p>Welcome to My Paragraph</p> </body> </html>

Example 2 <div id="myDiv" onclick="alert('You clicked me')">Click me!</div> </body> Containers: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ExtJS Samples</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" > Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; </script> </head> <body> <script type="text/javascript"> Ext.onReady(function() { var panel1 = { //1 html : 'I am Panel1',

id : 'panel1', frame : true, height : 100 } var panel2 = { html : '<b>I am Panel2</b>', id : 'panel2', frame : true } var myWin = new Ext.Window({ // 2 id : 'myWin', height : 400, width : 400, items : [ panel1, panel2 ] }); myWin.show(); }); </script> </body> </html>