Why EXTJS?
There are JavaScript frameworks that are mainly forcing developers to organize application code in layers implementing the Model-View-Controller design pattern. There are more than a dozen MVC JavaScript frameworks that are being used by professional developers: Backbone.js, ExtJS, AngularJS, Ember.js, Knockout just to name a few.
First, Core jQuery is just a library of utilities that simplify working with DOM and - you still need to write the Web application using HTML and JavaScript. In addition to it, there are lots and lots of jQuery plugins that include handy widgets to add to your manually created Web site. We just mentioned the frameworks that help better organizing or modularizing your project, but enterprise application may need more. So here comes the Ext JS sales pitch.
For developing an enterprise application that deals with graphs, data grids, communicating with a server, and exchanging lot of data, drag and drop behavior etc, Ext JS 4 is a pretty good candidate.
These frameworks give us ready-made UI controls and reusable methods and properties that make developing applications a breeze.
The Ext JS 4 API is simple to understand, provided you have a good knowledge of the JavaScript language
One of the significant advantages of Ext JS 4 is the ability to create maintainable code by
providing a template to implement the Model-View-Controller (MVC) architecture.
The models attribute represents an array of Model names that will be loaded before
instantiating the Controller.
• The stores attribute represents an array of Store names that will be loaded before
instantiating the Controller
• The views attribute represents an array of View component names that will be loaded before
instantiating the Controller.
JavaScript is a functional, interpreted, and dynamically typed language. It’s case-sensitive and a lot of its programming constructs—like the for and while loops, if-else, switch-case statements etc.—are very similar to their equivalents in C and Java.
The Arguments Keyword:
function sum(){
var sum = 0;
for(var i=0;isum += arguments[i];
}
console.log(sum);
}
add(1,2,3); //Prints 5
add(10,20,30,40,50); //Prints 150
add(100,12); //Prints 112
Use of Arguments in Ext JS 4
Ext JS 4 API has many functions defined to accept a number of arguments, but you do not always invoke them by passing all the arguments. For example, here is a code snippet where I handle the itemclick event for a data grid. Both lines are valid; the difference lies in the number of arguments you pass to the function.
Ext.getCmp("mygrid").on("itemclick",function(src,record){...});
Ext.getCmp("mygrid").on("itemclick",function(src,record,index){...});
You can call a base class method from the derived class method in Ext JS 4 by writing this.callParent(arguments);
notice the use of the arguments keyword.
Functions
In JavaScript functions are first class citizens, like classes in OO languages.
You can define a function in the traditional way like this.
function eat(){ console.log("Eating"); }
You can invoke the eat() function even before you define it, as shown here.
eat();//Prints Eating
function eat(){ console.log("Eating"); }
Though JavaScript is an interpreted language, function definitions are run first, irrespective of where they are
placed in the code. So you can invoke a function even before you define it like the eat() function call.
You can also assign a function to a variable like this:
var eat = function(){ console.log("Eating"); }
The following code will throw an error if the function is declared as an expression.
eat();//Uncaught TypeError: Property 'eat' of object [object DOMWindow] is not a function
var eat = function(){ console.log("Eating"); }
function work(arg){
arg();
}
work(eat);
work(function(){console.log("Coding");});
Use of Higher-Order Functions in Ext JS 4
In Ext JS 4 you have plenty of functions that accept other functions as arguments. For example, the function that’s called after the DOM is loaded is:
Ext.onReady(function(){
...
});
Ext.onReady() is a higher order function.
Classes in JavaScript
function Person(theName,theAge){
this.name = theName; //public variable
this.age = theAge;
this.eat = function(){
console.log(this.name + " is eating");
}
}
If you now want to create an object of class Person and invoke its eat() method, you can use the new keyword just as in other OO languages.
var p1 = new Person("Sam",23);
p1.eat(); //Prints Sam is eating
console.log(p1.age); // Prints 23
The new keyword creates an object from the Person function and returns a reference to the object.
Use of Classes in Ext JS 4
The UI components in Ext JS 4 are available as classes. So if you want to create a button, you actually create an object of Button class like this.
var button = new Ext.button.Button();
JSON
One of the most popular and widely-used features of JavaScript is the JavaScript Object Notation (JSON). It’s used to represent a JavaScript object. It’s also used as a data format like XML. Here’s a JSON object.
var myBook = {
title : "Ext JS4",
author:"Sencha",
publisher : "APress",
price : 45.99,
formats : ["e-book","paperback"],
order : function(){
console.log("Ordering " + this.title + " in Amazon");
}
};
The myBook variable is a JSON object with some properties. The formats is an array and order() is a function.
Use of JSON in Ext JS 4
Ext JS 4 uses JSON heavily. The properties of the UI components that you create in Ext JS 4 are specified in JSON format. Here is some code that creates a button in Ext JS 4.
var btn = new Ext.button.Button({
text : "Click",
id : "mybutton",
handler : function(){
console.log("Button clicked");
}
});
As you can infer from the code, the button’s attributes like text, handler, id are specified as properties of a
JSON object.
There are JavaScript frameworks that are mainly forcing developers to organize application code in layers implementing the Model-View-Controller design pattern. There are more than a dozen MVC JavaScript frameworks that are being used by professional developers: Backbone.js, ExtJS, AngularJS, Ember.js, Knockout just to name a few.
First, Core jQuery is just a library of utilities that simplify working with DOM and - you still need to write the Web application using HTML and JavaScript. In addition to it, there are lots and lots of jQuery plugins that include handy widgets to add to your manually created Web site. We just mentioned the frameworks that help better organizing or modularizing your project, but enterprise application may need more. So here comes the Ext JS sales pitch.
-
Ext JS an HTML5 framework that doesn’t require you to write HTML.
Your single HTML file (index.html) will just include three files in the
head section: one with Ext JS framework, one CSS file, and one app.js, but the
section will be empty.
-
Ext JS includes a comprehensive library of JavaScript-based classes
that can help you with pretty much everything you need to develop a Web
application (UI components, UI layouts, collections, networking,
collections, CSS compiler, packaging tool, and more).
-
Ext JS offers a way to write object-oriented code (for those who like
it), define classes and inheritance in a way that’s closer to classical
inheritance and doesn’t require the
prototypeproperty.
-
Ext JS can jump start your application development by generating the
initial code layered according to the Model-View-Controller (MVC) design
pattern.
-
Ext JS is a cross-browser framework that promises to automatically take care of all differences in major Web browsers.
-
ext-all.js - minimized version of the source code of Ext JS, which
literally looks like one line of 1.4 million characters (it’s still
JavaScript, of course). Most likely you won’t deploy this file on your
production server.
-
ext-all-debug.js - human-readable source code of Ext JS with no
comments. If you like to read comments, use ext-all-debug-w-comments.js.
-
ext-all-dev.js - human-readable source code of Ext JS that includes
console.log() statements that generates and outputs debugging
information in the browser’s console.
The docs folder contains extensive documentation - just open the file index.html in your browser and start reading and studying.
The builds folder includes sandboxed versions of Ext JS in
case you need to to use say Ext JS 4.2 along with older versions of this
framework. Browsing the builds folder reveals that the Ext JS framework consists of three parts:
-
Ext Core - it’s a free to use JavaScript library
for enhancing Web sites. It supports DOM manipulation with CSS
selectors, events and AJAX requests. It also offers a syntax to define
and create classes that can extend from each other. The functionality of
Ext Core is comparable to Core jQuery.
-
Ext JS - a UI framework that includes a rich library of UI components.
-
The Foundation - a set of useful utilities.
The Ext JS 4 API is simple to understand, provided you have a good knowledge of the JavaScript language
One of the significant advantages of Ext JS 4 is the ability to create maintainable code by
providing a template to implement the Model-View-Controller (MVC) architecture.
The models attribute represents an array of Model names that will be loaded before
instantiating the Controller.
• The stores attribute represents an array of Store names that will be loaded before
instantiating the Controller
• The views attribute represents an array of View component names that will be loaded before
instantiating the Controller.
JavaScript is a functional, interpreted, and dynamically typed language. It’s case-sensitive and a lot of its programming constructs—like the for and while loops, if-else, switch-case statements etc.—are very similar to their equivalents in C and Java.
The Arguments Keyword:
function sum(){
var sum = 0;
for(var i=0;i
}
console.log(sum);
}
add(1,2,3); //Prints 5
add(10,20,30,40,50); //Prints 150
add(100,12); //Prints 112
Use of Arguments in Ext JS 4
Ext JS 4 API has many functions defined to accept a number of arguments, but you do not always invoke them by passing all the arguments. For example, here is a code snippet where I handle the itemclick event for a data grid. Both lines are valid; the difference lies in the number of arguments you pass to the function.
Ext.getCmp("mygrid").on("itemclick",function(src,record){...});
Ext.getCmp("mygrid").on("itemclick",function(src,record,index){...});
You can call a base class method from the derived class method in Ext JS 4 by writing this.callParent(arguments);
notice the use of the arguments keyword.
Functions
In JavaScript functions are first class citizens, like classes in OO languages.
You can define a function in the traditional way like this.
function eat(){ console.log("Eating"); }
You can invoke the eat() function even before you define it, as shown here.
eat();//Prints Eating
function eat(){ console.log("Eating"); }
Though JavaScript is an interpreted language, function definitions are run first, irrespective of where they are
placed in the code. So you can invoke a function even before you define it like the eat() function call.
You can also assign a function to a variable like this:
var eat = function(){ console.log("Eating"); }
The following code will throw an error if the function is declared as an expression.
eat();//Uncaught TypeError: Property 'eat' of object [object DOMWindow] is not a function
var eat = function(){ console.log("Eating"); }
function work(arg){
arg();
}
work(eat);
work(function(){console.log("Coding");});
Use of Higher-Order Functions in Ext JS 4
In Ext JS 4 you have plenty of functions that accept other functions as arguments. For example, the function that’s called after the DOM is loaded is:
Ext.onReady(function(){
...
});
Ext.onReady() is a higher order function.
Classes in JavaScript
function Person(theName,theAge){
this.name = theName; //public variable
this.age = theAge;
this.eat = function(){
console.log(this.name + " is eating");
}
}
If you now want to create an object of class Person and invoke its eat() method, you can use the new keyword just as in other OO languages.
var p1 = new Person("Sam",23);
p1.eat(); //Prints Sam is eating
console.log(p1.age); // Prints 23
The new keyword creates an object from the Person function and returns a reference to the object.
Use of Classes in Ext JS 4
The UI components in Ext JS 4 are available as classes. So if you want to create a button, you actually create an object of Button class like this.
var button = new Ext.button.Button();
JSON
One of the most popular and widely-used features of JavaScript is the JavaScript Object Notation (JSON). It’s used to represent a JavaScript object. It’s also used as a data format like XML. Here’s a JSON object.
var myBook = {
title : "Ext JS4",
author:"Sencha",
publisher : "APress",
price : 45.99,
formats : ["e-book","paperback"],
order : function(){
console.log("Ordering " + this.title + " in Amazon");
}
};
The myBook variable is a JSON object with some properties. The formats is an array and order() is a function.
Use of JSON in Ext JS 4
Ext JS 4 uses JSON heavily. The properties of the UI components that you create in Ext JS 4 are specified in JSON format. Here is some code that creates a button in Ext JS 4.
var btn = new Ext.button.Button({
text : "Click",
id : "mybutton",
handler : function(){
console.log("Button clicked");
}
});
As you can infer from the code, the button’s attributes like text, handler, id are specified as properties of a
JSON object.
EXTJS List of features:
Object-Oriented flavor:
JavaScript has never been taken seriously as a programming language.
Rich UI controls-
Ext
JS 4 provides a rich set of UI components, like any other JavaScript
library.
The UI controls include different types of form components, and data components
such
as grid, tree, and charts.
Support for HTML 5 -
HTML
5 provides a set of features like a new set of UI tags, multimedia
capabilities
without depending on third party plugins, data storage facilities, web sockets,
web
workers,
Canvas API for drawing, GeoLocation, and working with history. The Ext JS 4 API
supports
HTML 5 tags, working with local storage and session storage, drawing, etc.
MVC architecture-
Modularity
has always been an issue in JavaScript libraries. Maintenance
is
a nightmare in web applications developed using JavaScript, no matter what
framework
we
use. Ext JS 4’s popularity is the support that it offers for implementing MVC.
The complete code
can
be organized into folders and files following the MVC architecture. Making
changes and
testing
becomes easier because of this.
Theming and Styling-
Ext
JS 4 relies upon SASS (Syntactically Awesome StyleSheets) scripts
for
styling. The style sheets for the UI controls are available as SASS files which
we can play
with.
The SASS scripts are then compiled to CSS files using a Ruby script called
Compass. This
makes
styling our applications much easier.
Documentation- Sencha
maintains very good API documentation for all the versions.
Moving to the mobile version-
Using Ext JS 4 in applications has an
added
advantage if you aim to develop a mobile version too. Sencha provides us with a
popular
JavaScript
library called Sencha Touch for building mobile web applications. The structure
of
Sencha Touch API is very similar to Ext JS 4.
Extjs Vs jQuery:
ExtJs and JQuery are kind of apples and oranges. You can compare Ext Core to JQuery, and ExtJs to JQuery UI.
Ext JS is a full-fledged widget library while jQuery (not jQuery UI) and Mootools are JavaScript frameworks that help with DOM manipulation etc.
Whilst jQuery and Mootools help with the general workings of a site.
jQuery UI is a much less rich set of components.
Ext JS seems to be focussed on tables and storing data, plus manipulating it.
Extjs Vs jQuery:
ExtJs and JQuery are kind of apples and oranges. You can compare Ext Core to JQuery, and ExtJs to JQuery UI.
Ext JS is a full-fledged widget library while jQuery (not jQuery UI) and Mootools are JavaScript frameworks that help with DOM manipulation etc.
Whilst jQuery and Mootools help with the general workings of a site.
jQuery UI is a much less rich set of components.
Ext JS seems to be focussed on tables and storing data, plus manipulating it.
Summary
Creation of enterprise web applications involves many steps that need
to be done by developers. But with the right set of tools the
repetitive steps can be automated. Besides, Ext JS class rich component
library and themes allows you to lower the amount of manual programming.
But for the enterprise applications that require rich UI, dashboards with fancy charts, advanced data grids Ext JS can be a good choice.
Reference:
http://enterprisewebbook.com/
But for the enterprise applications that require rich UI, dashboards with fancy charts, advanced data grids Ext JS can be a good choice.
Reference:
http://enterprisewebbook.com/