Ext.js - Questions and Answers

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 html 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.

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'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('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, 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('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 application framework.

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