Ext.js Tutorial

Discuss ExtJS

Discuss ExtJS &-8211; this Article or News was published on this date:2019-05-12 09:16:07 kindly share it with friends if you find it helpful

Discuss ExtJS


Advertisements


ExtJS stands for Extended JavaScript. It is a JavaScript framework and a product of Sencha, based on YUI (Yahoo User Interface). It is basically a desktop application development platform with modern UI. This tutorial gives a complete understanding of Ext JS. This reference will take you through simple and practical approaches while learning Ext JS.




Advertisements

Ext.js &-8211; Home

Ext.js &-8211; Overview

Ext.js &-8211; Environment Setup

Ext.js &-8211; Naming Convention

Ext.js &-8211; Architecture

Ext.js &-8211; First Program

Ext.js &-8211; Class System

Ext.js &-8211; Containers

Ext.js &-8211; Layouts

Ext.js &-8211; Components

Ext.js &-8211; Drag & Drop

Ext.js &-8211; Themes

Ext.js &-8211; Custom Events and Listeners

Ext.js &-8211; Data

Ext.js &-8211; Fonts

Ext.js &-8211; Style

Ext.js &-8211; Drawing

Ext.js &-8211; Localization

Ext.js &-8211; Accessibility

Ext.js &-8211; Debugging Code

Ext.js &-8211; Methods

Ext.js &-8211; Questions and Answers

Ext.js &-8211; Quick Guide

Ext.js &-8211; Useful Resources

Ext.js &-8211; Discussion

UPSC IAS Exams Notes

Developer&-8217;s Best Practices

Questions and Answers

Effective Resume Writing

HR Interview Questions

Computer Glossary

Who is Who

Ext.js – Useful Resources

Ext.js &-8211; Useful Resources &-8211; this Article or News was published on this date:2019-05-12 09:16:06 kindly share it with friends if you find it helpful

Ext.js &-8211; Useful Resources


Advertisements


The following resources contain additional information on ExtJS. Please use them to get more in-depth knowledge on this.

Useful Links on ExtJS

  • Ext JS Wiki − Wikipedia Reference for Ext JS

  • Ext JS − Download Ext JS Library Files

Useful Books on Ext JS

  • Ext JS
  • Learning Ext JS
  • Ext JS Beginners
  • Ext JS Mastering
  • Ext JS essentials
  • Ext JS Examples

To enlist your site on this page, please drop an email to [email protected]



Advertisements

Ext.js &-8211; Home

Ext.js &-8211; Overview

Ext.js &-8211; Environment Setup

Ext.js &-8211; Naming Convention

Ext.js &-8211; Architecture

Ext.js &-8211; First Program

Ext.js &-8211; Class System

Ext.js &-8211; Containers

Ext.js &-8211; Layouts

Ext.js &-8211; Components

Ext.js &-8211; Drag & Drop

Ext.js &-8211; Themes

Ext.js &-8211; Custom Events and Listeners

Ext.js &-8211; Data

Ext.js &-8211; Fonts

Ext.js &-8211; Style

Ext.js &-8211; Drawing

Ext.js &-8211; Localization

Ext.js &-8211; Accessibility

Ext.js &-8211; Debugging Code

Ext.js &-8211; Methods

Ext.js &-8211; Questions and Answers

Ext.js &-8211; Quick Guide

Ext.js &-8211; Useful Resources

Ext.js &-8211; Discussion

UPSC IAS Exams Notes

Developer&-8217;s Best Practices

Questions and Answers

Effective Resume Writing

HR Interview Questions

Computer Glossary

Who is Who

Ext.js – Questions and Answers

Ext.js &-8211; Questions and Answers &-8211; this Article or News was published on this date:2019-05-12 09:16:05 kindly share it with friends if you find it helpful

Ext.js &-8211; Questions and Answers


Advertisements


Ext JS stands for extended JavaScript. It is a JavaScript framework to develop rich UI web based desktop applications.

It is a Sencha product which is extended from YUI (Yahoo user interface).

These are the main files to include in HTML page to run Ext JS code −

  • Ext-all.js
  • Ext-all.css

  • Customizable UI widgets with collection of rich UI such as Grids, pivot grids, forms, charts, trees.
  • Code compatibility of new versions with the older one.
  • A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes.
  • Advance data package decouples the UI widgets from the data layer. The data package allows client-side collection of data using highly functional models that enable features such as sorting and filtering.
  • It is protocol agnostic, and can access data from any back-end source.
  • Customizable Themes Ext JS widgets are available in multiple out-of-the-box themes that are consistent across platforms.

  • Streamlines cross-platform development across desktops, tablets, and smartphones — for both modern and legacy browsers.

  • Increases the productivity of development teams by integrating into enterprise development environments via IDE plugins.

  • Reduces the cost of web application development.

  • Empowers teams to create apps with a compelling user experience.

  • It has set of widgets for making UI powerful and easy.

  • It follows MVC architecture so highly readable code.

  • The size of library is large around 500 KB which makes initial loading time more and makes application slow.

  • HTML is full of DIV> tags makes it complex and difficult to debug.

  • According to general public license policy it is free for open source applications but paid for commercial applications.

  • Some times for loading even simple things requires few lines of coding which is simpler in plain/l or Jquery.

  • Need quite experienced developer for developing Ext JS applications.

Ext JS supports cross browser compatibility, it supports all major browsers as −

  • IE 6 and above
  • Firefox 3.6 and above
  • Chrome10 and above
  • Safari 4 and above
  • Opera 11 and above

Ext JS 4+ supports MVC (Model view controller) architecture. From Ext JS 5 it started supporting MVVM (Model View Viewmodel) also.

Ext JS 6 is the latest version of Ext JS which has major benefit that it can be used for both desktop and as well as mobile applications. Basically it is a merge of Ext JS (desktop applications) and Sencha touch (mobile application).

Ext JS is a JavaScript framework so to start using it you should use have prior knowledge of HTML and JS (not expert level but should have basic understanding). Then it takes to understand the basic so give it time and learn gradually.

Both the frameworks are quite different we can compare Ext JS and jQuery UI as Ext JS is full-fledged UI rich framework. But still Ext JS has much more components then jQuery UI.

Parameter Ext JS Angular JS
Rich UI Ext JS provides rich UI options such as forms , grid, charts Angular JS does not provide rich UI inbuilt
Rich theme UI components Ext JS provides multiple themes inbuilt Angular JS does not provide Rich UI it has to be integrated with AngularUI, AngularBootstarp etc.
Cross browser compatibility Ext JS provide cross browser compatibility it works for almost all the browsers IE6+, FF, Chrome, Safari, Opera etc. Angular JS has to use third party library such as jQuery, jqLite for solving this purpose.
Automatic testing support Possible only with external tools Provides inbuilt.
Two way data binding In Ext JS 5 two way binding is included. It supports two way binding start from first version.
Performance Ext JS is comparatively heavier and slower. Angular JS is light weight framework than Ext JS
Build tools Ext JS uses Sencha cmd tool for builds Angular JS uses third party tools such as grunt.

Ext JS 1.1

The first version of Ext JS was developed by Jack Slocum in 2006. It was a set of utility classes which is an extension of YUI. He named the library as YUI-ext.

Ext JS 2.0

Ext JS version 2.0 was released in 2007. This version had new API documentation for desktop Application with limited features. This version doesn&-8217;t had backward compatibility with previous version of Ext JS.

Ext JS 3.0

Ext JS version 3.0 was released in 2009. This version added new features as chart and list view but at the cost of speed. It had backwards compatible with version 2.0.

Ext JS 4.0

After the release of Ext JS 3 the developers of Ext JS had the major challenge of ramping up the speed. Ext JS version 4.0 was released in 2011. It had the complete revised structure which followed by MVC architecture and a speedy application.

Ext JS 5.0

Ext JS version 5.0 was released in 2014. The major change in this release was to change the MVC architecture to MVVM architecture. It includes the ability to build desktop apps on touch-enabled devices, two-way data binding, responsive layouts and many more features.

Ext JS 6.0

Ext JS 6 merges the Ext JS (for desktop application) and sencha touch (for mobile application) framework.

Ext JS has various UI components some of the majorly used components are −

  • Grid
  • Form
  • Message Box
  • Progress Bar
  • Tool Tip
  • Window
  • HTML Editor
  • Charts

xType defines the type of Ext JS UI component, which is determined during rendering of the component. E.g. textField, Numeric, button etc.

This is the validation type can be customized easily. Few vType provided by Ext JS are −

alphanumText − This returns false if the text entered has any symbol other than alphabate or numeric value.

emailText − This returns false, if text is not a valid email address.

Yes Ext JS can be integrated with Ajax. Implementation as: suppose on some text box after blur it has to validate the data from server for that we can have an Ajax call onblur/onchange to the text box id to check whether the data entered in the text box is present in server/database.

Yes Ext JS can be integrated with other server side framework such as Java, .net, Ruby on rails, PHP, ColdFusion etc.

Ext JS can be implemented on any popular integrated development environment (IDE) such as Eclipse, Aptana, Sublime, Webstrom etc.

These are few ways to access DOM elements in Ext JS −

  • Ext.get()
  • Ext.getElementById()
  • Ext.fly()
  • Ext.select()

MVVM architecture is Model View Viewmodel. In MVVM architecture controller of MVC is replaced by ViewModel.

ViewModel − It is basically medicates the changes between view and model. It binds the data from model to view. At the same time it does not have any direct interaction with view it has only knowledge of model.

Ext.getCmp('buttonId').on('click', function(){
// statement to perform logic
});

Ext.onReady() is the first method which is called when the DOM is fully loaded so that whatever element you want to refer will be available when script runs.

Ext.select('div').on('click', function(){
// statement to perform logic
});

Different type of alert boxes in Ext JS are −

  • Ext.MessageBox.alert();
  • Ext.MessageBox.confirm();
  • Ext.MessageBox.wait();
  • Ext.MessageBox.promt();
  • Ext.MessageBox.show();

Base classes for Store is Ext.data.Store

For model is Ext.data.Model

For Controller is Ext.app.controller

These are the different ways for event handling −

  • Using Listeners
  • Attaching events later
  • Using custom events

Store.getCount() − For cached records

Store.getTotalCount() − For total no of records in the DB.

Store.getModifiedRecords()method is used to get modified records.

Store.commitChanges() method to update store changes.

If we have grid Id : Ext.getCmp(&-8216;gridId&-8217;).getStore().getAt(index);

If we have store Id: Ext.getStore(&-8216;storeId&-8217;).getAt(index);

Store.load();

  • Base class for Grid &-8211; Ext.grid.GridPanel
  • For form – Ext.form.Panel
  • For panel – Ext.panel.Panel
  • For chart – Ext.chart.Chart
  • For tree – Ext.tree.Panel

Different type of layouts are −

  • Absolute
  • Accordion
  • Anchor
  • Border
  • Auto
  • hBox
  • vBox
  • Card(TabPanel)
  • Card(Wizard)
  • Column
  • Fit
  • Table

This can be done using pagingToolbar() as −

new Ext.PagingToolbar ({
   pageSize: 25,
   store: store,
   displayInfo: true,
   displayMsg: 'Displaying topics {0} - {1} of {2}',
   emptyMsg: 'No topics to display',
});
// trigger the data store load
store.load({params:{start:0, limit:25}});

dockedItems: [{
   xtype: 'toolbar',
   items: [{ 
      id:'buttonId', 
      handler: function() { 
         Ext.Msg.alert('title','alertMsg');
      });
   }]
}]	

Loadmask is used to prevent any other operation by showing loading(or Custom message) to the user until data gets rendered to the grid. Loadmask: true; is the property to show loadmask while data getting rendered to the grid.

Renderer is used when we want to manipulate the data which we get from store to show manipulated data based on some criteria. It is a column property can be used as −

renderer: function(value, metadata, record, rowIndex, colIndex, store){
// logic to perform
} 

Ext.getCmp(&-8216;id&-8217;).getValue();

Hidden: true;

Sortable: true; which is default true.

grid.getStore().on ({
   beforeload : function(store) {
      // perform some operation
   },
   load : {
      fn : function(store) {
         //perform some operation
      },
      scope : this
   }
   store.load();
});

Ext JS 6 has toolkit package with which it can include visual elements of both the frameworks (Ext JS and Sencha Touch).

It can be added as −

&-8216;toolkit&-8217;: &-8216;classic&-8217;, // or &-8216;modern&-8217;

If toolkit is classic it includes Ext JS desktop application framework.

And if toolkit is modern then it includes sencha touch mobile application framework.

What is Next?

Further you can go through your past assignments you have done with the subject and make sure you are able to speak confidently on them. If you are fresher then interviewer does not expect you will answer very complex questions, rather you have to make your basics concepts very strong.

Second it really doesn&-8217;t matter much if you could not answer few questions but it matters that whatever you answered, you must have answered with confidence. So just feel confident during your interview. We at tutorialspoint wish you best luck to have a good interviewer and all the very best for your future endeavor. Cheers 🙂



Advertisements

Ext.js &-8211; Home

Ext.js &-8211; Overview

Ext.js &-8211; Environment Setup

Ext.js &-8211; Naming Convention

Ext.js &-8211; Architecture

Ext.js &-8211; First Program

Ext.js &-8211; Class System

Ext.js &-8211; Containers

Ext.js &-8211; Layouts

Ext.js &-8211; Components

Ext.js &-8211; Drag & Drop

Ext.js &-8211; Themes

Ext.js &-8211; Custom Events and Listeners

Ext.js &-8211; Data

Ext.js &-8211; Fonts

Ext.js &-8211; Style

Ext.js &-8211; Drawing

Ext.js &-8211; Localization

Ext.js &-8211; Accessibility

Ext.js &-8211; Debugging Code

Ext.js &-8211; Methods

Ext.js &-8211; Questions and Answers

Ext.js &-8211; Quick Guide

Ext.js &-8211; Useful Resources

Ext.js &-8211; Discussion

UPSC IAS Exams Notes

Developer&-8217;s Best Practices

Questions and Answers

Effective Resume Writing

HR Interview Questions

Computer Glossary

Who is Who

Ext.js – Quick Guide

Ext.js &-8211; Quick Guide &-8211; this Article or News was published on this date:2019-05-12 09:16:05 kindly share it with friends if you find it helpful

Ext.js &-8211; Quick Guide


Advertisements


Ext.js &-8211; Overview

Ext JS is a popular JavaScript framework which provides rich UI for building web applications with cross-browser functionality. Ext JS is basically used for creating desktop applications. It supports all the modern browsers such as IE6+, FF, Chrome, Safari 6+, Opera 12+, etc. Whereas another product of Sencha, Sencha Touch is used for mobile applications.

Ext JS is based on MVC/MVVM architecture. The latest version of Ext JS 6 is a single platform, which can be used for both desktop and mobile application without having different code for different platform.

History

Ext JS 1.1

The first version of Ext JS was developed by Jack Slocum in 2006. It was a set of utility classes, which is an extension of YUI. He named the library as YUI-ext.

Ext JS 2.0

Ext JS version 2.0 was released in 2007. This version had a new API documentation for desktop application with limited features. This version doesn’t have backward compatibility with previous version of Ext JS.

Ext JS 3.0

Ext JS version 3.0 was released in 2009. This version added new features as chart and list view but at the cost of speed. It had backward compatibility with version 2.0.

Ext JS 4.0

After the release of Ext JS 3, the developers of Ext JS had the major challenge of ramping up the speed. Ext JS version 4.0 was released in 2011. It had the complete revised structure, which was followed by MVC architecture and a speedy application.

Ext JS 5.0

Ext JS version 5.0 was released in 2014. The major change in this release was to change the MVC architecture to MVVM architecture. It includes the ability to build desktop apps on touch-enabled devices, two-way data binding, responsive layouts, and many more features.

Ext JS 6.0

Ext JS 6 merges the Ext JS (for desktop application) and Sencha Touch (for mobile application) framework.

Features

Following are the highlighted features of Ext JS.

  • Customizable UI widgets with collection of rich UI such as grids, pivot grids, forms, charts, trees.

  • Code compatibility of new versions with the older one.

  • A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes.

  • Advance data package decouples the UI widgets from the data layer. The data package allows client-side collection of data using highly functional models that enable features such as sorting and filtering.

  • It is protocol agnostic, and can access data from any back-end source.

  • Customizable Themes Ext JS widgets are available in multiple out-of-the-box themes that are consistent across platforms.

Benefits

Sencha Ext JS is the leading standard for business-grade web application development. Ext JS provides the tools necessary to build robust applications for desktop and tablets.

  • Streamlines cross-platform development across desktops, tablets, and smartphones &-8211; for both modern and legacy browsers.

  • Increases the productivity of development teams by integrating into enterprise development environments via IDE plugins.

  • Reduces the cost of web application development.

  • Empowers the teams to create apps with a compelling user experience.

  • Offers a set of widgets to easily make a powerful UI.

  • Follows MVC architecture, hence the code is highly readable.

Limitations

  • The size of the library is large, around 500 KB, which makes initial loading time more and makes application slow.

  • HTML is full of tags that makes it complex and difficult to debug.

  • According to general public license policy, it is free for open source applications but paid for commercial applications.

  • Sometimes for loading even simple things require few lines of coding, which is simpler in plain/l or JQuery.

  • Need quite experienced developer for developing Ext JS applications.

Tools

Following are the tools provided by Sencha used for Ext JS application development mainly at the production level.

Sencha CMD

Sencha CMD is a tool which provides the features of Ext JS code minification, scaffolding, and production build generation.

Sencha IDE Plugins

Sencha IDE plugins integrates Sencha frameworks into IntelliJ, WebStorm IDEs, which helps in improving the developer’s productivity by providing features such as code completion, code inspection, code navigation, code generation, code refactoring, template creation, spell-checking, etc.

Sencha Inspector

Sencha Inspector is a debugging tool which helps the debugger to debug any issue while development.

Ext.js &-8211; Environment Setup

Local Environment Setup

This section guides you on how to download and set up Ext JS on your machine. Please follow the steps to set up the environment.

Downloading Library Files

Download the trial version of Ext JS library files from Sencha https://www.sencha.com. You will get the trial version from the site on your registered mail id, which will be a zipped folder named ext-6.0.1-trial.

Unzip the folder and you will find various JavaScript and CSS files, which you will include in our application. We will mostly include the following files −

JavaScript Files − JS file which you can find under the folder ext-6.0.1-trialext6.0.1build are −

Sr.No File & Description
1

ext.js

This is the core file which contains all the functionalities to run the application.

2

ext-all.js

This file contains all the code minified with no comments in the file.

3

ext-all-debug.js

This is the unminified version of ext-all.js for debugging purpose.

4

ext-all-dev.js

This file is also unminified and is used for development purpose as it contains all the comments and console logs to check any errors/issue.

5

ext-all.js

This file is used for production purpose mostly as it is much smaller than any other.

You can add these files to your projects JS folder or you can provide a direct path where the file resides in your system.

CSS Files − There are number of theme-based files, which you can find under folder ext6.0.1-trialext-6.0.1buildclassictheme-classicresourcestheme-classic-all.css

  • If you are going to use desktop application, then you can use classic themes under folder ext-6.0.1-trialext-6.0.1buildclassic

  • If we are going to use mobile application, then you can use modern themes which can be found under folder ext-6.0.1-trialext-6.0.1buildmodern

The following library files will be added in an Ext JS application.

&lt/l>
   head>
      link rel = "stylesheet" type = "text/css" 
         href = "..ext-6.0.1-trialext-6.0.1buildclassictheme-classicresourcestheme-classic-all.css" />
      script type = "text/javascript" 
         src = "..ext-6.0.1-trialext-6.0.1buildext-all.js" > /script>
      script type = "text/javascript" src = "app.js" > /script>
   /head>
/l>

You will keep ExtJS application code in app.js file.

CDN Setup

CDN is content delivery network with which you do not need to download the Ext JS library files, instead you can directly add CDN link for ExtJS to your program as follows −

&lt/l>
   head>
      link rel = "stylesheet" type = "text/css" 
         href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" / >
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js"> /script>
      script type = "text/javascript" src = "app.js" > /script> 
   /head>
/l>

Popular Editors

As it is a JavaScript framework, which is used for developing web applications, in our project we will have HTML, JS files. To write our Ext JS programs, we will need a text editor. There are even multiple IDEs available in the market. But for now, we can consider one of the following −

  • Notepad − On Windows machine, you can use any simple text editor such as Notepad (Recommended for this tutorial), Notepad++, sublime.

  • Eclipse − It is an IDE developed by the eclipse open-source community and can be downloaded from https://www.eclipse.org/.

Browser

Ext JS supports cross-browser compatibility, it supports all major browsers such as −

  • IE 6 and above
  • Firefox 3.6 and above
  • Chrome10 and above
  • Safari 4 and above
  • Opera 11 and above

You can use any browser for running Ext JS application.

Ext.js &-8211; Naming Convention

Naming convention is a set of rule to be followed for identifiers. It makes the code more readable and understandable to other programmers as well.

Naming convention in Ext JS follows the standard JavaScript convention, which is not mandatory but a good practice to follow. It should follow the camel case syntax for naming the class, method, variable and properties.

If the name is combined with two words, the second word will start with an uppercase letter always. For example, doLayout(), StudentForm, firstName, etc.

Name Convention
Class Name It should start with an uppercase letter, followed by camel case. For example, StudentClass
Method Name It should start with a lowercase letter, followed by camel case. For example, doLayout()
Variable Name It should start with a lowercase letter, followed by camel case. For example, firstName
Constant Name It should be in uppercase only. For example, COUNT, MAX_VALUE
Property Name It should start with a lowercase letter, followed by camel case. For example, enableColumnResize = true

Ext.js &-8211; Architecture

Ext JS follows MVC/ MVVM architecture.

MVC – Model View Controller architecture (version 4)

MVVM – Model View Viewmodel (version 5)

This architecture is not mandatory for the program, however, it is a best practice to follow this structure to make your code highly maintainable and organized.

Project Structure with Ext JS App

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Ext JS app folder will reside in JavaScript folder of your project.

The App will contain controller, view, model, store, and utility files with app.js.

app.js − The main file from where the flow of program will start, which should be included in the main HTML file using script> tag. App calls the controller of application for the rest of the functionality.

Controller.js − It is the controller file of Ext JS MVC architecture. This contains all the control of the application, the events listeners, and most of the functionality of the code. It has the path defined for all the other files used in that application such as store, view, model, require, mixins.

View.js − It contains the interface part of the application, which shows up to the user. Ext JS uses various UI rich views, which can be extended and customized here according to the requirement.

Store.js − It contains the data locally cached which is to be rendered on the view with the help of model objects. Store fetches the data using proxies which has the path defined for services to fetch the backend data.

Model.js − It contains the objects which binds the store data to view. It has the mapping of backend data objects to the view dataIndex. The data is fetched with the help of store.

Utils.js − It is not included in MVC architecture but a best practice to use to make the code clean, less complex, and more readable. We can write methods in this file and call them in the controller or the view renderer wherever required. It is helpful for code reusability purpose as well.

In MVVM architecture, the controller is replaced by ViewModel.

ViewModel − It basically mediates the changes between view and model. It binds the data from the model to the view. At the same time, it does not have any direct interaction with the view. It has only knowledge of the model.

How It Works

For example, if we are using one model object at two-three places in UI. If we change the value at one place of UI, we can see without even saving that change. The value of model changes and so gets reflected in all the places in the UI, wherever the model is used.

It makes the developers’ effort much lesser and easier as no extra coding is required for binding data.

Ext.js &-8211; First Program

This chapter lists down the steps to write the first Hello World program in Ext JS.

Step 1

Create an index/ page in the editor of our choice. Include the required library files in the head section of/l page as follows.

index/

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
              /l: 'First Ext JS Hello World Program'
            });
         });
      /script>
   /head>
   
   body>
      div id = "helloWorldPanel" />
   /body>
/l>

Explanation

  • Ext.onReady() method will be called once the Ext JS is ready to render the Ext JS elements.

  • Ext.create() method is used to create an object in Ext JS. Here we are creating an object of simple panel class Ext.Panel.

  • Ext.Panel is the predefined class in Ext JS for creating a panel.

  • Every Ext JS class has different properties to perform some basic functionalities.

Ext.Panel class has various properties such as −

  • renderTo is the element where this panel has to render. &-8216;helloWorldPanel&-8217; is the div id in Index/l file.

  • Height and width properties are for customizing the size of the panel.

  • Title property is to provide the title to the panel.

  • Html property is the/l content to be shown in the panel.

Step 2

Open the index/ file in a standard browser and you will get the following output on the browser.

Ext.js &-8211; Class System

Ext JS is a JavaScript framework having functionalities of object oriented programming. Ext is the namespace, which encapsulates all the classes in Ext JS.

Defining a Class in Ext JS

Ext provides more than 300 classes, which we can use for various functionalities.

Ext.define() is used for defining the classes in Ext JS.

Syntax

Ext.define(class name, class members/properties, callback function);

Class name is the name of the class according to app structure. For example, appName.folderName.ClassName studentApp.view.StudentView.

Class properties/members defines the behavior of class.

Callback function is optional. It is called when the class has loaded properly.

Example of Ext JS Class Definition

Ext.define(studentApp.view.StudentDeatilsGrid, {
   extend : 'Ext.grid.GridPanel',
   id : 'studentsDetailsGrid',
   store : 'StudentsDetailsGridStore',
   renderTo : 'studentsDetailsRenderDiv',
   layout : 'fit',
   
   columns : [{
      text : 'Student Name',
      dataIndex : 'studentName'
   },{
      text : 'ID',
      dataIndex : 'studentId'
   },{
      text : 'Department',
      dataIndex : 'department'
   }]
});

Creating Objects

As like other OOPS based languages, we can create objects in Ext JS as well.

Following are the different ways of creating objects in Ext JS.

Using new keyword

var studentObject = new student();
studentObject.getStudentName();

Using Ext.create()

Ext.create('Ext.Panel', {
   renderTo : 'helloWorldPanel',
   height : 100,
   width : 100,
   title : 'Hello world',
  /l : 	'First Ext JS Hello World Program'		
});

Inheritance in Ext JS

Inheritance is the principle of using functionality defined in class A into class B.

In Ext JS, inheritance can be done using two methods −

Ext.extend

Ext.define(studentApp.view.StudentDetailsGrid, {
   extend : 'Ext.grid.GridPanel',
   ...
});

Here, our custom class StudentDetailsGrid is using the basic features of Ext JS class GridPanel.

Using Mixins

Mixins is a different way of using class A in class B without extend.

mixins : {
   commons : 'DepartmentApp.utils.DepartmentUtils'
},

Mixins are added in the controller where we declare all the other classes such as store, view, etc. In this way, we can call DepartmentUtils class and use its functions in the controller or in this application.

Ext.js &-8211; Containers

Container in Ext JS is the component where we can add other container or child components. These containers can have multiple layout to arrange the components in the containers. We can add or remove the components from the container and from its child elements. Ext.container.Container is the base class for all the containers in Ext JS.

Containers

Sr.No Description
1 Components inside Container

This example shows how to define the components inside a container

2 Container inside container

This example shows how to define a container inside a container with other components

There are various type of containers Ext.panel.Panel, Ext.form.Panel, Ext.tab.Panel and Ext.container.Viewport are frequently used containers in Ext JS. Below are the example which shows how to use these containers.

Sr.No. Type of Containers & Description
1 Ext.panel.Panel

This example shows a Ext.panel.Panel container

2 Ext.form.Panel

This example shows a Ext.form.Panel container

3 Ext.tab.Panel

This example shows a Ext.tab.Panel container

4 Ext.container.Viewport

This example shows a Ext.container.Viewport container

Ext.js &-8211; Layouts

Layout is the way the elements are arranged in a container. It can be horizontal, vertical, or any other. Ext JS has a different layout defined in its library but we can always write custom layouts as well.

Sr.No Layout & Description
1 Absolute

This layout allows to position the items using XY coordinates in the container.

2 Accordion

This layout allows to place all the items in stack fashion (one on top of the other) inside the container.

3 Anchor

This layout gives the privilege to the user to specify the size of each element with respect to the container size.

4 Border

In this layout various panels are nested and separated by borders.

5 Auto

This is the default layout that decides the layout of the elements based on the number of elements.

6 Card(TabPanel)

This layout arranges different components in tab fashion. Tabs will be displayed on top of the container. Every time only one tab is visible and each tab is considered as a different component.

7 Card(Wizard)

In this layout, every time the elements come for full container space. There is a bottom tool bar in the wizard for navigation.

8 Column

This layout is to show multiple columns in the container. We can define a fixed or percentage width to the columns. The percentage width will be calculated based on the full size of the container.

9 Fit

In this layout, the container is filled with a single panel. When there is no specific requirement related to the layout, then this layout is used.

10 Table

As the name implies, this layout arranges the components in a container in the HTML table format.

11 vBox

This layout allows the element to be distributed in a vertical manner. This is one of the most used layout.

12 hBox

This layout allows the element to be distributed in a horizontal manner.

Ext.js &-8211; Components

ExtJS UI is made up of one or many widgets called Components. Ext Js has various UI components defined that can be customised as per your requirements.

Sr.No Methods & Description
1 Grid

Grid component can be used to show the data in a tabular format.

2 Form

Form widget is to get the data from the user.

3 Message Box

Message box is basically used to show data in the form of alert box.

4 Chart

Charts are used to represent data in pictorial format.

5 Tool tip

Tool tip is used to show some basic information when any event occurs.

6 Window

This UI widget is to create a window, which should pop up when any event occurs.

7 HTML editor

HTML Editor is one of the very useful UI component, which is used for styling the data that the user enters in terms of fonts, color, size, etc.

8 Progress bar

Shows the progress of the backend work.

Ext.js &-8211; Drag and Drop

Drag and drop feature is one of the powerful features added to make the developer’s task easy. A drag operation, essentially, is a click gesture on some UI element, while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation.

Syntax

Adding drag and drop class to the draggable targets.

var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
   isTarget: false
});

Adding drag and drop target class to drappable target.

var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
   ignoreSelf: false
});

Example

Following is a simple example.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.application ({
            launch: function() {
               var images = Ext.get('images').select('img');
               Ext.each(images.elements, function(el) {
                  var dd = Ext.create('Ext.dd.DD', el, 'imagesDDGroup', {
                     isTarget: false
                  });
               });
            }
         }); 
         var mainTarget = Ext.create('Ext.dd.DDTarget', 'mainRoom', 'imagesDDGroup', {
            ignoreSelf: false
         });
      /script>
      
      style>
         -content {
            width:600px;
            height:400px;
            padding:10px;
            border:1px solid -000;
         }
         -images {
            float:left;
            width:40%;
            height:100%;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         -mainRoom {
            float:left;
            width:55%;
            height:100%;
            margin-left:15px;
            border:1px solid Black;
            background-color:rgba(222, 222, 222, 1.0);
         }
         .image {   
            width:64px;
            height:64px;
            margin:10px;
            cursor:pointer;
            border:1px solid Black;
            display: inline-block;
         }
      /style>
   /head>
   
   body>
      div id = "content">   
         div id = "images"> 
            img src = "/extjs/images/1.jpg" class = "image" />
            img src = "/extjs/images/2.jpg" class = "image" />
            img src = "/extjs/images/3.jpg" class = "image" />
            img src = "/extjs/images/4.jpg" class = "image" />
            img src = "/extjs/images/5.jpg" class = "image" />
            img src = "/extjs/images/6.jpg" class = "image" />
            img src = "/extjs/images/7.jpg" class = "image" />
            img src = "/extjs/images/8.jpg" class = "image" />
         /div>
         div id = "mainRoom">/div>
      /div>
   /body>
/l>

The above program will produce the following result −

With the help of drag and drop in Extjs, we can move data from grid to grid and grid to form. Following are the examples of moving data between grids and forms.

Drag and drop &-8211; Grid to Grid

drag and drop &-8211; Grid to Form

Ext.js &-8211; Themes

Ext.js provides a number of themes to be used in your applications. You can add a different theme in place of a classic theme and see the difference in the output. This is done simply by replacing the theme CSS file as explained ahead.

Neptune Theme

Consider your very first Hello World application. Remove the following CSS from the application.

https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Add the following CSS to use the Neptune theme.

https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css

To see the effect, try the following program.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
              /l: 'First Ext JS Hello World Program'
            });
         });
      /script>
   /head>
   
   body>
      div id = "helloWorldPanel" />
   /body>
/l>

The above program will produce the following result −

Crisp Theme

Consider your very first Hello World application. Remove the following CSS from the application.

https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Add the following CSS to use the Neptune theme.

https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css

To see the effect, try the following program.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
              /l: 'First Ext JS Hello World Program'
            });
         });
      /script>
   /head>
   
   body>
      div id = "helloWorldPanel" />
   /body>
/l>

The above program will produce the following result −

Triton Theme

Consider your very first Hello World application. Remove the following CSS from the application.

https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Add the following CSS to use the Triton theme.

https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css

To see the effect, try the following program.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-triton/resources/theme-triton-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
              /l: 'First Ext JS Hello World Program'
            });
         });
      /script>
   /head>
   
   body>
      div id = "helloWorldPanel" />
   /body>
/l>

The above program will produce the following result −

Gray Theme

Consider your very first Hello World application. Remove the following CSS from the application.

https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css

Add the following CSS to use the Gray theme.

https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css

To see the effect, try the following program.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-gray/resources/theme-gray-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Panel', {
               renderTo: 'helloWorldPanel',
               height: 200,
               width: 600,
               title: 'Hello world',
              /l: 'First Ext JS Hello World Program'
            });
         });
      /script>
   /head>
   
   body>
      div id = "helloWorldPanel" />
   /body>
/l>

The above program will produce the following result −

Ext.js &-8211; Custom Events and listeners

Events are something which get fired when something happens to the class. For example, when a button is getting clicked or before/after the element is rendered.

Methods of Writing Events

  • Built-in events using listeners
  • Attaching events later
  • Custom events

Built-in Events Using Listeners

Ext JS provides listener property for writing events and custom events in Ext JS files.

Writing listener in Ext JS

We will add the listener in the previous program itself by adding a listen property to the panel.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button is clicked');	
                  }
               }
            });
         });
      /script> 
   /head>
   
   body>
      p> Please click the button to see event listener /p>
      div id = 'helloWorldPanel' />   !--  panel will be rendered here-- >
   /body>
/l>

The above program will produce the following result −

This way we can also write multiple events in listeners property.

Multiple Events in the Same Listener

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            Ext.get('tag2').hide()
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  click: function() {
                     this.hide();
                  },
                  hide: function() {
                     Ext.get('tag1').hide();
                     Ext.get('tag2').show();
                  }
               }
            });
         });           
      /script> 
   /head>
   
   body>
      div id = "tag1">Please click the button to see event listener./div>
      div id = "tag2">The button was clicked and now it is hidden./div>
      div id = 'helloWorldPanel' />   !--  panel will be rendered here-- >
   /body>
/l>

Attaching an Event Later

In the previous method of writing events, we have written events in listeners at the time of creating elements. The other way is to attach events.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button'
            });

            // This way we can attach event to the button after the button is created.
            button.on('click', function() {
               Ext.MessageBox.alert('Alert box', 'Button is clicked');
            });
         });
      /script> 
   /head>
   
   body>
      p> Please click the button to see event listener /p>
      div id = 'helloWorldPanel' />   !--  panel will be rendered here-- >
   /body>
/l>

The above program will produce the following result −

Custom Events

We can write custom events in Ext JS and fire the events with fireEvent method. Following example explains how to write custom events.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            var button = Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('helloWorldPanel'),
               text: 'My Button',
               
               listeners: {
                  myEvent: function(button) {
                     Ext.MessageBox.alert('Alert box', 'My custom event is called');
                  }
               }
            });
            Ext.defer(function() {
               button.fireEvent('myEvent');
            }, 5000);
         }); 
      /script> 
   /head>
   
   body>
      p> The event will be called after 5 seconds when the page is loaded. /p>
      div id = 'helloWorldPanel' />   !--  panel will be rendered here-- >
   /body>
/l>

Once the page is loaded and the document is ready, the UI page with a button will appear and as we are firing an event after 5 secs, the document is ready. The alert box will appear after 5 seconds.

Here, we have written the custom event &-8216;myEvent&-8217; and we are firing events as button.fireEvent(eventName);

Ext.js &-8211; Data

Data package is used for loading and saving all the data in the application.

Data package has numerous number of classes but the most important classes are −

  • Model
  • Store
  • Proxy

Model

The base class for model is Ext.data.Model. It represents an entity in an application. It binds the store data to view. It has mapping of backend data objects to the view dataIndex. The data is fetched with the help of store.

Creating a Model

For creating a model, we need to extend Ext.data.Model class and we need to define the fields, their name, and mapping.

Ext.define('StudentDataModel', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'name', mapping : 'name'},
      {name: 'age', mapping : 'age'},
      {name: 'marks', mapping : 'marks'}
   ]
});

Here, the name should be the same as the dataIndex, which we declare in the view and the mapping should match the data, either static or dynamic from the database, which is to be fetched using store.

Store

The base class for store is Ext.data.Store. It contains the data locally cached, which is to be rendered on view with the help of model objects. Store fetches the data using proxies, which has the path defined for services to fetch the backend data.

Store data can be fetched in two ways &-8211; static or dynamic.

Static store

For static store, we will have all the data present in the store as shown in the following code.

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   data: [
      { name : "Asha", age : "16", marks : "90" },
      { name : "Vinit", age : "18", marks : "95" },
      { name : "Anand", age : "20", marks : "68" },
      { name : "Niharika", age : "21", marks : "86" },
      { name : "Manali", age : "22", marks : "57" }
   ];
});

Dynamic Store

Dynamic data can be fetched using proxy. We can have proxy which can fetch data from Ajax, Rest, and Json.

Proxy

The base class for proxy is Ext.data.proxy.Proxy. Proxy is used by Models and Stores to handle the loading and saving of Model data.

There are two types of proxies

  • Client Proxy
  • Server Proxy

Client Proxy

Client proxies include Memory and Local Storage using HTML5 local storage.

Server Proxy

Server proxies handle data from the remote server using Ajax, Json data, and Rest service.

Defining proxies in the server

Ext.create('Ext.data.Store', {
   model: 'StudentDataModel',
   proxy : {
      type : 'rest',
      actionMethods : {
         read : 'POST'  // Get or Post type based on requirement
      },
      url : 'restUrlPathOrJsonFilePath', // here we have to include the rest URL path 
      // which fetches data from database or Json file path where the data is stored
      reader: {
         type : 'json',  // the type of data which is fetched is of JSON type
         root : 'data'
      },
   }
});

Ext.js &-8211; Fonts

Ext.js provides the facility to use different font packages. Font packages are used to add different classes for icons available in the package.

  • Font-Awesome
  • Font-Pictos

Font-Awesome

ExtJS new theme, Triton, has an inbuilt font family font-awesome included in the framework itself, hence we do not need any explicit requirement for the font-awesome stylesheet.

Following is an example of using Font-Awesome classes in the Triton theme.

Font-Awesome with Triton theme

When we are using any other theme apart from Triton, we need or require to add a stylesheet for font-awesome explicitly.

Following is an example of using Font-Awesome classes without the Triton theme.

Font-Awesome with normal theme(Any theme other then Triton theme)

Font-Pictos

Font-pictos is not included in the framework for ExtJS, hence we have to require the same. Only licenced users of Sencha will have the benefit to use font-pictos.

Steps to Add Font-Pictos

Step 1 − Require font-pictos class using the following command.

"requires": ["font-pictos"]

Step 2 − Now add pictos classes as −

iconCls: 'pictos pictos-home'

Ext.js &-8211; Style

Application Styling refers to user adjustment of the look and feel of the components. These adjustments may include: color, color gradients, font, margins/padding, etc. Ext JS 6 has a new way of styling the application.

It uses SCSS for styling. SCSS is a more dynamic way of writing the CSS code. We can write the variables in our stylesheet with the help of this. However, a browser cannot understand SCSS. It can only understand CSS, hence all SCSS files should get compiled into CSS to a production-ready code.

Thus, SCSS file is called preprocessor files. In Ext.js, compilation is done through Sencha CMD tool. Sencha CMD compiles it manually only once using the following command.

sencha app build [development]

Global_CSS is the main CSS file, which has all SCSS variables associated with it in ExtJS that can be used in our application for customizing our theme by providing different value based on our need.

Following are some of the CSS variables available in the Global_CSS in Ext.js.

Sr.No Variable & Description
1

$base-color

$base-color: color (e.g. $base-color : -808080)

This base color is to be used throughout the theme.

2

$base-gradient

$base-gradient: string (e.g. $base-gradient : &-8216;matte&-8217;)

This base gradient is to be used throughout the theme.

3

$body-background-color

$body-background-color: color (e.g. $body-background-color : -808080)

Background color to apply to the body element. If set to transparent or &-8216;none&-8217;, no background-color style will be set on the body element.

4

$color

$color : color (e.g. $color : -808080)

This default text color is to be used throughout the theme.

5

$font-family

$font-family : string (e.g. $font-family : arial)

This default font-family is to be used throughout the theme.

6

$font-size

$font-size : number (e.g. $font-size : 9px )

This default font-size is to be used throughout the theme.

7

$font-weight

$font-weight : string/number (e.g. $font-weight : normal )

This default font-weight is to be used throughout the theme.

8

$font-weight-bold

$font-weight-bold : string/number (e.g. $font-weight-bold : bold )

This default font-weight for bold font is to be used throughout the theme.

9

$include-chrome

$include-chrome : boolean (e.g. $include-chrome : true)

True to include Chrome specific rules.

10

$include-ff

$include-ff : boolean (e.g. $include-ff : true)

True to include Firefox specific rules.

11

$include-ie

$include-ie : boolean (e.g. $include-ie : true)

True to include Internet Explorer specific rules for IE9 and lower.

12

$include-opera

$include-opera : boolean (e.g. $include-opera : true)

True to include Opera specific rules.

13

$include-safari

$include-safari : boolean (e.g. $include-safari : true)

True to include Opera specific rules.

14

$include-webkit

$include-webkit : boolean (e.g. $include-webkit : true)

True to include Webkit specific rules.

Ext.js &-8211; Drawing

Drawing package in ExtJS enables you to draw general purpose graphics. This can be used for graphics that work on all browsers and mobile devices.

Sr.No Drawing
1 Circle

This graphics is used to create a circulare shape.

2 Rectangle

This graphics is used to create a rectanglar shape.

3 Arc

This graphics is used to create an arc shape.

4 Ellipse

This graphics is used to create an ellipse shape.

5 EllipticalArc

This graphics is used to create an elliptical arc shape.

6 Image

This graphics is used to add an image to your application.

7 Path

This graphics is used to create a free path.

8 Text

This graphics is used to add any text to your application.

9 Translate after render

This property is used to move the starting point in your container, after the graphic is rendered. It can be used with any graphics.

10 Rotation

This property is used to add a rotation to the drawing added. It can be used with any graphics.

11 Square

This graphic is used to create a square.

Ext.js &-8211; Localization

It is always best to communicate with the users in the language they understand and prefer. Extjs localization package supports over 40 languages such as German, French, Korean, Chinese, etc. It is very simple to implement the locale in ExtJs. You’ll find all of the bundled locale files in the override folder of the ext-locale package. Locale files just overrides that tells Ext JS to replace the default English values of certain components.

The following program is to show the month in different locale to see the effect. Try the following program.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-fr.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
            var ds = Ext.create('Ext.data.Store', {
               fields: ['month'],
               remoteSort: true,
               pageSize: 6,
               
               proxy: {
                  type: 'memory',
                  enablePaging: true,
                  data: monthArray,
                  reader: {type: 'array'}
               }
            });
            Ext.create('Ext.grid.Panel', {
               renderTo: 'grid',
               id : 'gridId',
               width: 600,
               height: 200,
               title:'Month Browser',
               
               columns:[{
                  text: 'Month of the year',
                  dataIndex: 'month',
                  width: 300
               }],
               store: ds,
               bbar: Ext.create('Ext.toolbar.Paging', {
                  pageSize: 6,
                  store: ds,
                  displayInfo: true
               })
            }); 
            Ext.getCmp('gridId').getStore().load();
         });
      /script>
   /head>
   
   body>
      div id = "grid" />
   /body>
/l>

The above program will produce the following result

For using different locale other than English, we would need to add the locale specific file in our program. Here we are using https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/localefr.js for French. You can use different locale for different languages such as https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-ko.js for korean, etc.

The following program is to show the date picker in Korean locale to see the effect. Try the following program.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-ko.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
               renderTo: 'datePicker'
            });
         });
      /script>
   /head>
   
   body>
      div id = "datePicker" />
   /body>
/l>

The above program will produce the following result −

Following table lists the few locales available in ExtJS and the main file locale URL to be changed.

Locale Language Locale URL
ko Korean https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr French https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-fa.js
es Spanish https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-es.js
ja Japanese https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-ja.js
it Italian https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-it.js
ru Russian https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN Simplifies Chinese https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/locale/localezh_CN.js

Ext.js &-8211; Accessibility

In general accessibility means availability, the content is accessible means the content is available.

In software terms, the application is accessible means the application is available for all. Here, all means the persons with disabilities, the visually impaired or those who use screen readers to use a computer or those who prefer to navigate using the keyboard instead of using a mouse. navigation with keyboard instead of using a mouse.

Applications which are accessible are called ARIA (Accessible Rich Internet Applications).

Accessibility in Ext JS

Ext JS is designed to keep this in mind that it should work with all keyboard navigations. It has built-in tab indexing and focus-ability, and it is always on by default so we do not need to add any property to enable this functionality.

This functionality allows all keyboard-enabled components to interact with the user when tabbed into. For example, we can use tab for moving on to the next component instead of a mouse. Same way, we can use shift+tab for moving backward and use enter on the keyboard to click, etc.

Focus Styling and Tabs

Focus is inbuilt in Extjs when using keystroke for tabbing.

Following example shows how to the style changes, when the focus changes with the tabs.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function(){
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button1'),
               text: 'Button1',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 1 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button2'),
               text: 'Button2',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 2 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button3'),
               text: 'Button3',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 3 is clicked');	
                  }
               }
            });
         });     
      /script>
   /head>
   
   body> p>Please click the button to see event listener:/p>
      span id = "button3"/>
      span id = "button2"/>
      span id = "button1"/>
   /body>
/l>

To see the effect, use tab for moving from the next button and shft+tab for focusing backward. Use enter and see how the focused button&-8217;s related alert would pop up.

ARIA Theme

ExtJS provides the theme aria for the visually impaired.

Following example shows the aria theme which is easily accessible for the visually impaired.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.require([
            'Ext.grid.*',
            'Ext.data.*'
         ]);
         
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });

         Ext.onReady(function() {
            // Store data
            var myData = [
               { name : "Asha", age : "16", marks : "90" },
               { name : "Vinit", age : "18", marks : "95" },
               { name : "Anand", age : "20", marks : "68" },
               { name : "Niharika", age : "21", marks : "86" },
               { name : "Manali", age : "22", marks : "57" }
            ];
            
            // Creation of first grid store
            var firstGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel',
               data: myData
            });
            
            // Creation of first grid
            var firstGrid = Ext.create('Ext.grid.Panel', {
               store            : firstGridStore,
               columns          :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',	
                  id : 'name',    
                  flex:  1,  			
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }],
               stripeRows       : true,
               title            : 'First Grid',
               margins          : '0 2 0 0'
            });
     
            // Creation of a panel to show both the grids.
            var displayPanel = Ext.create('Ext.Panel', {
               width        : 600,
               height       : 200,
               
               layout       : {
                  type: 'hbox',
                  align: 'stretch',
                  padding: 5
               },
               renderTo     : 'panel',
               defaults     : { flex : 1 }, 
               items        : [ 
                  firstGrid
               ]
            });
         });
      /script>
   /head>
   
   body>
      div id = "panel" > /div>
   /body>
/l>

The above program will produce the following result. You can use tab and mouse up and down keys for moving the focus across the grid and the theme is basically for the visually impaired people.

Ext.js &-8211; Debugging Ext JS code

Any JavaScript code can be debugged using alert() box or console.log() or with the debug pointer in a debugger.

Alert Box

Place an alert box in the code where you want to check the flow or any variable value. For example, alert(&-8216;message to show&-8217; + variable);

Development/Debugging Tool

Debugger is the most important tool for any developer to check the issue and error in the code while developing.

Ext JS is a JavaScript framework, hence it can be easily debugged using developer tools provided by or specific to different browsers. All the major browsers have their developer tools available to test and debug JavaScript code.

Popular debuggers are IE development tool for IE, firebug for firefox, and chrome development tool for Chrome browser.

Chrome debugger comes with Chrome browser, however, firebug has to be installed specifically as it doesn’t come as a package with firefox.

Here is a link to install firebug for firefox browser http://getfirebug.com

The shortcut to open the development tool in Windows OS is F12 keyboard key.

Debugging JS Code in Debugger

There are two ways to debug JavaScript code.

  • The first way, is to place console.log() in the code and see the value of the log, which will be printed in the console of the development tool.

  • The second way is by using breakpoints in the development tool. Following is the process.

    • Open the file in all the available scripts under script tag.

    • Now place a breakpoint to the line you want to debug.

    • Run the application in the browser.

    • Now, whenever the code flow will reach this line, it will break the code and stay there until the user runs the code by keys F6 (go to the next line of the code), F7 (go inside the function) or F8 (go to the next breakpoint or run the code if there is no more breakpoints) based on the flow you want to debug.

    • You can select the variable or the function you want to see the value of.

    • You can use the console to check the value or to check some changes in the browser itself.

Ext.js &-8211; Methods

Following are a few inbuilt functions, which are heavily used in Ext JS.

Ext.is Class

This class checks the platform you are using, whether it is a phone or a desktop, a mac or Windows operating system. These are the following methods related to Ext.is class.

Sr.No Methods & Description
1

Ext.is.Platforms

This function returns the platform available for this version.

For example, when you run the following function, it returns something like this −

[Object { property = "platform", regex = RegExp, identity = "iPhone"}, 
Object { property = "platform", regex = RegExp, identity = "iPod"}, 
Object { property = "userAgent", regex = RegExp, identity = "iPad"}, 
Object { property = "userAgent", regex = RegExp, identity = "Blackberry"}, 
Object { property = "userAgent", regex = RegExp, identity = "Android"}, 
Object { property = "platform", regex = RegExp, identity = "Mac"}, 
Object { property = "platform", regex = RegExp, identity = "Windows"}, 
Object { property = "platform", regex = RegExp, identity = "Linux"}]
2

Ext.is.Android

This function will return true, if you are using Android operating system, else it returns false.

3

Ext.is.Desktop

This function will return true, if you are using a desktop for the application, else it returns false.

4

Ext.is.Phone

This function will return true, if you are using a mobile, else it returns false.

5

Ext.is.iPhone

This function will return true if you are using iPhone, else it returns false.

6

Ext.is.iPod

This function will return true, if you are using iPod, else it returns false.

7

Ext.is.iPad

This function will return true, if you are using an iPad, else it returns false.

8

Ext.is.Windows

This function will return true, if you are using Windows operating system, else it returns false.

9

Ext.is.Linux

This function will return true, if you are using Linux operating system, else it returns false.

10

Ext.is.Blackberry

This function will return true, if you are using Blackberry, else it returns false.

11

Ext.is.Mac

This function will return true, if you are using Mac operating system, else it returns false.

Ext.supports Class

As the name indicates, this class provides information if the feature is supported by the current environment of the browser/device or not.

Sr.No Methods & Description
1

Ext.supports.History

It checks if the device supports HTML 5 history as window.history or not. If the device supports history, then it returns true, else false.

2

Ext.supports.GeoLocation

It checks if the device supports geolocation method or not. Internally it checks for navigator.geolocation method.

3

Ext.supports.Svg

It checks if the device supports HTML 5 feature scalable vector graphics (svg) method or not. Internally it checks for doc.createElementNS && !!doc.createElementNS( &-8220;http:/&-8221; + &-8220;/www.w3.org/2000/svg&-8221;, &-8220;svg&-8221;).createSVGRect.

4

Ext.supports.Canvas

It checks if the device supports HTML 5 feature canvas to draw method or not. Internally it checks for doc.createElement(&-8216;canvas&-8217;).getContext and returns a value based on the output of this method.

5

Ext.supports.Range

It checks if the browser supports document.createRange method or not.

Ext.String Class

Ext.String class has various methods to work with string data. The most used methods are encoding decoding, trim, toggle, urlAppend, etc.

Encoding Decoding function − These are the functions available in Ext.String class to encode and decode HTML values.

Sr.No Methods & Description
1

Ext.String/lEncode

This function is used to encode/l value to make it parsable.

Example

Ext.String/lEncode(" p > Hello World  /p >"); 
Output - "< p > Hello World < /p >".
2

Ext.String/lDecode

This function is used to decode the encoded/l value.

Example

Ext.String/lDecode("< p > Hello World < /p >");
Output -  " p > Hello World  /p &gt"
3

Ext.String.trim

This function is to trim the unwanted space in the string.

Ext.String.trim('      hello      ');
Output – "hello"
4

Ext.String.urlAppend

This method is used to append a value in the URL string.

Example

Ext.String.urlAppend('https://www.google.com' , 'hello'); 
Output - "https://www.google.com?hello" 
Ext.String.urlAppend('https://www.google.com?index=1' , 'hello'); 
Output – "https://www.google.com?index=1&hello" 
5

Ext.String.toggle

This function is to toggle the values between two different values.

Example

var toggleString = 'ASC' 
toggleString = Ext.String.toggle(a, 'ASC', 'DESC');
Output – DESC as toggleString had value ASC. Now again, if we 
print the same we will get toggleString = “ASC” this time, as 
it had value 'DESC'. 
It is similar to ternary operator 
toggleString = ((toggleString =='ASC')? 'DESC' : 'ASC' );

Miscellaneous Methods

Sr.No Methods & Description
1

Ext.userAgent()

This function gives information about browser userAgent. UserAgent is to identify the browser and the operating system to the web server.

Example − If you are working in Mozilla, it returns something like: &-8220;mozilla/5.0 (windows nt 6.1; wow64; rv:43.0) gecko/20100101 firefox/43.0&-8221;

2

Version related function

This function returns the version of the browser currently in use, if the function is called related to IE. In Firefox browser, it returns 0. These functions are Ext.firefoxVersion, Ext.ieVersion, etc.

Example − If you are using Firefox browser and you call the method Ext.ieVersion for fetching the version of IE, then it returns 0. If you are using the same method in IE browser, then it will return the version you are using such as 8, 9, etc.

3

Ext.getVersion()

This function returns the current Ext JS version in use.

Example − If you call Ext.getVersion(), it returns an array of values such as version, short version, etc.

Ext.getVersion().version returns the current version of Ext JS used in the program, such as “4.2.2&-8243;.

4

Browser related functions

These functions return Boolean values based on the browser in use. These methods are Ext.isIE, Ext.isIE6, Ext.isFF06, and Ext.isChrome.

Example − If you are using Chrome browser, then the function Ext.isChrome will return true all, otherwise it will return false.

5

Ext.typeOf()

This function returns the datatype of the variable.

Example

var a = 5;   
var b  = 'hello'; 
Ext.typeOf(a); 
Output – Number 
Ext.typeOf(b);
Output - String
6

DataType related methods − These functions return boolean value based on the datatype of the variable

Example

var a = ['a', 'bc'];
var b = 'hello';
var c = 123;
var emptyVariable;
var definedVariable;
function extraFunction(){return true;}
Ext.isArray(a); //returns true
Ext.isString(b); //return true
Ext.isNumber(c); //return true
Ext.isEmpty(emptyVariable); //return true
Ext.isEmpty(b); //return false
Ext.isDefined(definedVariable); //return true
Ext.isfunction(extraFunction); //return true


Advertisements

Ext.js &-8211; Home

Ext.js &-8211; Overview

Ext.js &-8211; Environment Setup

Ext.js &-8211; Naming Convention

Ext.js &-8211; Architecture

Ext.js &-8211; First Program

Ext.js &-8211; Class System

Ext.js &-8211; Containers

Ext.js &-8211; Layouts

Ext.js &-8211; Components

Ext.js &-8211; Drag & Drop

Ext.js &-8211; Themes

Ext.js &-8211; Custom Events and Listeners

Ext.js &-8211; Data

Ext.js &-8211; Fonts

Ext.js &-8211; Style

Ext.js &-8211; Drawing

Ext.js &-8211; Localization

Ext.js &-8211; Accessibility

Ext.js &-8211; Debugging Code

Ext.js &-8211; Methods

Ext.js &-8211; Questions and Answers

Ext.js &-8211; Quick Guide

Ext.js &-8211; Useful Resources

Ext.js &-8211; Discussion

UPSC IAS Exams Notes

Developer&-8217;s Best Practices

Questions and Answers

Effective Resume Writing

HR Interview Questions

Computer Glossary

Who is Who

Ext.js – Accessibility

Ext.js &-8211; Accessibility &-8211; this Article or News was published on this date:2019-05-12 09:16:04 kindly share it with friends if you find it helpful

Ext.js &-8211; Accessibility


Advertisements


In general accessibility means availability, the content is accessible means the content is available.

In software terms, the application is accessible means the application is available for all. Here, all means the persons with disabilities, the visually impaired or those who use screen readers to use a computer or those who prefer to navigate using the keyboard instead of using a mouse. navigation with keyboard instead of using a mouse.

Applications which are accessible are called ARIA (Accessible Rich Internet Applications).

Accessibility in Ext JS

Ext JS is designed to keep this in mind that it should work with all keyboard navigations. It has built-in tab indexing and focus-ability, and it is always on by default so we do not need to add any property to enable this functionality.

This functionality allows all keyboard-enabled components to interact with the user when tabbed into. For example, we can use tab for moving on to the next component instead of a mouse. Same way, we can use shift+tab for moving backward and use enter on the keyboard to click, etc.

Focus Styling and Tabs

Focus is inbuilt in Extjs when using keystroke for tabbing.

Following example shows how to the style changes, when the focus changes with the tabs.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-crisp/resources/theme-crisp-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.onReady(function(){
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button1'),
               text: 'Button1',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 1 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button2'),
               text: 'Button2',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 2 is clicked');	
                  }
               }
            });
            Ext.create('Ext.Button', {
               renderTo: Ext.getElementById('button3'),
               text: 'Button3',
               
               listeners: {
                  click: function() {
                     Ext.MessageBox.alert('Alert box', 'Button 3 is clicked');	
                  }
               }
            });
         });     
      /script>
   /head>
   
   body> p>Please click the button to see event listener:/p>
      span id = "button3"/>
      span id = "button2"/>
      span id = "button1"/>
   /body>
/l>

To see the effect, use tab for moving from the next button and shft+tab for focusing backward. Use enter and see how the focused button&-8217;s related alert would pop up.

ARIA Theme

ExtJS provides the theme aria for the visually impaired.

Following example shows the aria theme which is easily accessible for the visually impaired.

Live Demo

!DOCTYPE/l>
&lt/l>
   head>
      link href = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/classic/theme-aria/resources/theme-aria-all.css" 
         rel = "stylesheet" />
      script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/libs/extjs/6.0.0/ext-all.js">/script>
      
      script type = "text/javascript">
         Ext.require([
            'Ext.grid.*',
            'Ext.data.*'
         ]);
         
         // Creation of data model
         Ext.define('StudentDataModel', {
            extend: 'Ext.data.Model',
            fields: [
               {name: 'name', mapping : 'name'},
               {name: 'age', mapping : 'age'},
               {name: 'marks', mapping : 'marks'}
            ]
         });

         Ext.onReady(function() {
            // Store data
            var myData = [
               { name : "Asha", age : "16", marks : "90" },
               { name : "Vinit", age : "18", marks : "95" },
               { name : "Anand", age : "20", marks : "68" },
               { name : "Niharika", age : "21", marks : "86" },
               { name : "Manali", age : "22", marks : "57" }
            ];
            
            // Creation of first grid store
            var firstGridStore = Ext.create('Ext.data.Store', {
               model: 'StudentDataModel',
               data: myData
            });
            
            // Creation of first grid
            var firstGrid = Ext.create('Ext.grid.Panel', {
               store            : firstGridStore,
               columns          :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',	
                  id : 'name',    
                  flex:  1,  			
                  sortable: true
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true
               }],
               stripeRows       : true,
               title            : 'First Grid',
               margins          : '0 2 0 0'
            });
     
            // Creation of a panel to show both the grids.
            var displayPanel = Ext.create('Ext.Panel', {
               width        : 600,
               height       : 200,
               
               layout       : {
                  type: 'hbox',
                  align: 'stretch',
                  padding: 5
               },
               renderTo     : 'panel',
               defaults     : { flex : 1 }, 
               items        : [ 
                  firstGrid
               ]
            });
         });
      /script>
   /head>
   
   body>
      div id = "panel" > /div>
   /body>
/l>

The above program will produce the following result. You can use tab and mouse up and down keys for moving the focus across the grid and the theme is basically for the visually impaired people.



Advertisements

Ext.js &-8211; Home

Ext.js &-8211; Overview

Ext.js &-8211; Environment Setup

Ext.js &-8211; Naming Convention

Ext.js &-8211; Architecture

Ext.js &-8211; First Program

Ext.js &-8211; Class System

Ext.js &-8211; Containers

Ext.js &-8211; Layouts

Ext.js &-8211; Components

Ext.js &-8211; Drag & Drop

Ext.js &-8211; Themes

Ext.js &-8211; Custom Events and Listeners

Ext.js &-8211; Data

Ext.js &-8211; Fonts

Ext.js &-8211; Style

Ext.js &-8211; Drawing

Ext.js &-8211; Localization

Ext.js &-8211; Accessibility

Ext.js &-8211; Debugging Code

Ext.js &-8211; Methods

Ext.js &-8211; Questions and Answers

Ext.js &-8211; Quick Guide

Ext.js &-8211; Useful Resources

Ext.js &-8211; Discussion

UPSC IAS Exams Notes

Developer&-8217;s Best Practices

Questions and Answers

Effective Resume Writing

HR Interview Questions

Computer Glossary

Who is Who