DAY3-ExtJS

7/30/2019 DAY3-ExtJS

1/18

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 corecomponents.

"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:

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
http://www.sencha.com/learn/sencha-class-system/http://www.sencha.com/learn/sencha-class-system/


2/18

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


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


3/18

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


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

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 ext-

allsandbox-debug.js.

My FirstProgram.html


4/18

ExtJS Samples

Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

Ext.onReady(function(){

Ext.Msg.alert("Welcome","Welcome to ExtJS World");

});

Example2:(Form Creation in ExtJs)


5/18

ExtJS Samples



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'

}]

});

});


6/18

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

SuccessFull Login.

The array response.result contains the json string decoded as array, so it is easy to get the value of reason by

response.result.reason.


7/18

FullCodingFor Form

ExtJS Samples



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'

}, {


8/18

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();

}

}]

});

});


9/18

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.


10/18

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 : function(){

console.log("Loging in....");

},

logout : function(){

console.log("Loging out....");

}

});

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 constructorIn 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 : function(){

console.log("Loging in....");

},

logout : function(){

console.log("Loging out....");

}

});

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);


11/18

Ext.ClassManager.instantiate(Class,Options);

Both methods do exactly the same, the first parameter defines the class that we want to instantiate (String) and thesecond 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)

ExtJS Samples



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);

});


12/18

Example 2:

ExtJS Samples



Ext.define('My.sample.Person', {

constructor: function(name) {

this.name = name;

},

walk: function(steps) {


13/18

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'

});

Output:


14/18

ExtJs Events

ExtJS Samples


Ext.onReady(function() {

alert("Congratulations! You have Ext configured correctly!");

});


15/18

Performing Operations on DOM

ExtJS Samples



Ext.select('p').on('click', function() {

alert("You clicked a paragraph");

});

});

Welcome to My Paragraph


16/18

Example 2

Click me!

Containers:

ExtJS Samples



var panel1 = { //1

html : 'I am Panel1',


17/18

id : 'panel1',

frame : true,

height : 100

}

var panel2 = {

html : 'I am Panel2',

id : 'panel2',

frame : true

}

var myWin = new Ext.Window({ // 2

id : 'myWin',

height : 400,

width : 400,

items : [

panel1,panel2

]

});

myWin.show();

});


18/18

Documents

DAY3-ExtJS