day3-extjs
TRANSCRIPT
-
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/ -
7/30/2019 DAY3-ExtJS
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
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
-
7/30/2019 DAY3-ExtJS
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
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
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
-
7/30/2019 DAY3-ExtJS
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)
-
7/30/2019 DAY3-ExtJS
5/18
ExtJS Samples
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
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'
}]
});
});
-
7/30/2019 DAY3-ExtJS
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/30/2019 DAY3-ExtJS
7/18
FullCodingFor Form
ExtJS Samples
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
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'
}, {
-
7/30/2019 DAY3-ExtJS
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();
}
}]
});
});
-
7/30/2019 DAY3-ExtJS
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.
-
7/30/2019 DAY3-ExtJS
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);
-
7/30/2019 DAY3-ExtJS
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.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
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);
});
-
7/30/2019 DAY3-ExtJS
12/18
Example 2:
ExtJS Samples
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.onReady(function(){
Ext.define('My.sample.Person', {
constructor: function(name) {
this.name = name;
},
walk: function(steps) {
-
7/30/2019 DAY3-ExtJS
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:
-
7/30/2019 DAY3-ExtJS
14/18
ExtJs Events
ExtJS Samples
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.onReady(function() {
alert("Congratulations! You have Ext configured correctly!");
});
-
7/30/2019 DAY3-ExtJS
15/18
Performing Operations on DOM
ExtJS Samples
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph");
});
});
Welcome to My Paragraph
-
7/30/2019 DAY3-ExtJS
16/18
Example 2
Click me!
Containers:
ExtJS Samples
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
Ext.onReady(function() {
var panel1 = { //1
html : 'I am Panel1',
-
7/30/2019 DAY3-ExtJS
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();
});
-
7/30/2019 DAY3-ExtJS
18/18