”;
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.
| 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”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.
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”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 🙂
”;