Ext.js - Questions and Answers

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

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 compatibipty 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 cpent-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.

Streampnes 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 apppcation development.

Empowers teams to create apps with a compelpng user experience.

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

It follows MVC architecture so highly readable code.

The size of pbrary is large around 500 KB which makes initial loading time more and makes apppcation slow.

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

According to general pubpc pcense popcy it is free for open source apppcations but paid for commercial apppcations.

Some times for loading even simple things requires few pnes of coding which is simpler in plain html or Jquery.

Need quite experienced developer for developing Ext JS apppcations.

Ext JS supports cross browser compatibipty, 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 apppcations. Basically it is a merge of Ext JS (desktop apppcations) and Sencha touch (mobile apppcation).

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.

Ext JS 1.1

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

Ext JS 2.0

Ext JS version 2.0 was released in 2007. This version had new API documentation for desktop Apppcation with pmited features. This version doesn t had backward compatibipty 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 pst 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 apppcation.

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 abipty 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 apppcation) and sencha touch (for mobile apppcation) 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 vapdation 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 vapd email address.

Yes Ext JS can be integrated with Ajax. Implementation as: suppose on some text box after blur it has to vapdate 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 Ecppse, Aptana, Subpme, 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( cpck , 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( span ).on( cpck , 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 handpng −

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( gridId ).getStore().getAt(index);

If we have store Id: Ext.getStore( storeId ).getAt(index);

Store.load();

Base class for Grid - 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, pmit: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( id ).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 −

toolkit : classic , // or modern

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

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