ExtJS is fired with two licenses: GPLv3 or Commercial.
The development is controlled solely by Sencha.
ExtJS is a component framework. Like most component frameworks you are separated from the HTML that is generated, but this also gives you a lot of control of the rendering process.
Template-based binding frameworks like Angular or Ember allow you to develop very quickly by allowing you not to worry about the rendering process. This can be great for prototyping and smaller applications with limited data, but when applications grow - components that show a lot of data, like grids, can have serious performance issues that require circumventing the default rendering process to address. Grids and large data sets are where component libraries excel.
The biggest beef I have with ExtJS is the build process. In most cases, the Sencha Cmd is required to build an ExtJS application to a minified JS. The tool is powerful, but slow and not very adaptable. We had to use it to just output the correct order of file names and use other tools to the minified file(s) and associated source map(s).
Associations are do not support asynchronous data. If you represent associative data with 1 response, it works well enough, but if you require multiple calls to the server to build associations you have to either drop associations or implement your own asynchronous association builder. Most people I've talked to do the former.
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 : "Practical Ext JS4",
author:"Prabhu Sunderaraman",
publisher : "APress",
price : 49.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.
The development is controlled solely by Sencha.
ExtJS is a component framework. Like most component frameworks you are separated from the HTML that is generated, but this also gives you a lot of control of the rendering process.
Template-based binding frameworks like Angular or Ember allow you to develop very quickly by allowing you not to worry about the rendering process. This can be great for prototyping and smaller applications with limited data, but when applications grow - components that show a lot of data, like grids, can have serious performance issues that require circumventing the default rendering process to address. Grids and large data sets are where component libraries excel.
The biggest beef I have with ExtJS is the build process. In most cases, the Sencha Cmd is required to build an ExtJS application to a minified JS. The tool is powerful, but slow and not very adaptable. We had to use it to just output the correct order of file names and use other tools to the minified file(s) and associated source map(s).
Associations are do not support asynchronous data. If you represent associative data with 1 response, it works well enough, but if you require multiple calls to the server to build associations you have to either drop associations or implement your own asynchronous association builder. Most people I've talked to do the former.
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 : "Practical Ext JS4",
author:"Prabhu Sunderaraman",
publisher : "APress",
price : 49.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.
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.
But for the enterprise applications that require rich UI, dashboards with fancy charts, advanced data grids Ext JS can be a good choice.
Digging Deeper
Ext JS 4 introduces 4 new classes to make all this magic work:- Ext.Base – all classes inherit from Ext.Base. It provides basic low-level functionality used by all classes
- Ext.Class – a factory for making new classes
- Ext.ClassLoader – responsible for ensuring that classes are available, loading them if they aren’t on the page already
- Ext.ClassManager – kicks off class creation and manages dependencies
Comments
Post a Comment