Ext JS Interview Questions & Answers

Question 1. What Is Ext Js?

Answer :

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

Question 2. Ext Js Is Extended On Which Library?

Answer :

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

Question 3. What Are The Main Library Files To Add In Html Page?

Answer :

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

1. Ext-all.js
2. Ext-all.css

Question 4. Explain Features Of Ext Js.?

Answer :

1. Customizable UI widgets with collection of rich UI such as Grids, pivot grids, forms, charts, trees.
2. Code compatibility of new versions with the older one.
3. A flexible layout manager helps to organize the display of data and content across multiple browsers, devices, and screen sizes.
4. 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.
5. It is protocol agnostic, and can access data from any back-end source.
6. Customizable Themes Ext JS widgets are available in multiple out-of-the-box themes that are consistent across platforms.

Question 5. Explain Advantage Of Using Ext Js.?

Answer :

1. Streamlines cross-platform development across desktops, tablets, and smartphones — for both modern and legacy browsers.
2. Increases the productivity of development teams by integrating into enterprise development environments via IDE plugins.
3. Reduces the cost of web application development.
4. Empowers teams to create apps with a compelling user experience.
5. It has set of widgets for making UI powerful and easy.
6. It follows MVC architecture so highly readable code.

Question 6. Explain Limitations Of Using Ext Js.?

Answer :

1. The size of library is large around 500 KB which makes initial loading time more and makes application slow.
2. HTML is full of tags makes it complex and difficult to debug.
3. According to general public license policy it is free for open source applications but paid for commercial applications.
4. Some times for loading even simple things requires few lines of coding which is simpler in plain html or Jquery.
5. Need quite experienced developer for developing Ext JS applications.

Question 7. What Are The Browser Ext Js Supports?

Answer :

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

Question 8. Ext Js Supports Which Architecture?

Answer :

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

Question 9. What Is The Latest Version Of Ext Js And Its Benefits?

Answer :

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

Question 10. Advice For The Developer Who Are Going To Use It For The First Time.?

Answer :

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.

Question 11. Difference Between Ext Js And Jquery.?

Answer :

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.

Question 12. What Do You Know About Different Versions Of Ext Js?

Answer :

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.

Question 13. What Are The Different Ext Js Components?

Answer :

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

Question 14. What Is Xtype In Ext Js?

Answer :

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

Question 15. What Is Vtype In Ext Js?

Answer :

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.

Question 16. Can Ext Js Be Integrated With Ajax If Yes Then Explain A Simplest Use Of It?

Answer :

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.

Question 17. Can Ext Js Be Integrated With Other Server Side Frameworks?

Answer :

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

Question 18. Explain About Ext Js Implementation Tools.?

Answer :

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

Question 19. What Are The Way To Access Dom Elements In Ext Js?

Answer :

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

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

Question 20. What Is Viewmodel In Mvvm Architecture?

Answer :

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.

Question 21. Write A Listener For A Button Click.?

Answer :

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

Question 22. Explain The Use Of Ext.onready().?

Answer :

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.

Question 23. Write A Listener For Any Div Element Clicked On The Page.?

Answer :

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

Question 24. What Are The Different Type Of Alert Boxes In Ext Js?

Answer :

Different type of alert boxes in Ext JS are:

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

Question 25. What Is The Base Class For Store, Model & Controller?

Answer :

Base classes for Store is Ext.data.Store

For model is Ext.data.Model

For Controller is Ext.app.controller

Question 26. What Are The Different Ways For Event Handling In Ext Js?

Answer :

These are the different ways for event handling:

1. Using Listeners
2. Attaching events later
3. Using custom events

Question 27. How To Get No Of Records In The Store?

Answer :

Store.getCount() – For cached records

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

Question 28. How To Get Modified Records In The Store?

Answer :

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

Question 29. How To Update Records In The Store?

Answer :

Store.commitChanges() method to update store changes.

Question 30. How To Get Store Record Using Index?

Answer :

If we have grid Id : Ext.getCmp('gridId').getStore().getAt(index);

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

Question 31. What Is Function To Load Store Data?

Answer :

Store.load();

Question 32. Write The Base Classes For Form, Grid, Chart, Panel & Tree.

Answer :

• 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

Question 33. What Are The Different Type Of Layouts In Ext Js?

Answer :

Different type of layouts are:

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

Question 34. How To Apply Pagination To The Grid?

Answer :

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}});

How to add docked item?

dockedItems: [{

   xtype: 'toolbar',

   items: [{ 

      id:'buttonId', 

      handler: function() { 

         Ext.Msg.alert('title','alertMsg');

      });

   }]

}]

Question 35. What Is Loadmask And Its Use?

Answer :

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.

Question 36. What Is Renderer And Its Use?

Answer :

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
} 

Question 37. How To Get Value Of An Element In Ext Js?

Answer :

Ext.getCmp('id').getValue();

Question 38. How To Hide Column In The Grid?

Answer :

Hidden: true;

Question 39. What Is The Property For Sorting In The Grid?

Answer :

Sortable: true; which is default true.

Question 40. How To Write Before And After Load Events In The Store?

Answer :

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

Question 41. How Ext Js 6 Can Be Used For Both Desktop And Mobile Applications?

Answer :

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.

Question 42. Tell Me What Is Maximum Size Of Http Post Request?

Answer :

Microsoft Internet Explorer has a maximum uniform resource locator (URL) length of 2,083 characters. Internet Explorer also has a maximum path length of 2,048 characters. This limit applies to both POST request and GET request URLs.

Question 43. Explain Namespace Importance?

Answer :

An example which utilizes 3 distinctly different sets of scripts from different organizations. We use Ext JS for enhancements, Google Analytics for tracking site usage and the native vBulletin scripts. You can see how all of this code from different sources has been included in the same page.

Namespacing is important for developers in order to organize their code and ensure that their code is not overwritten when loaded in the JavaScript interpreter. If another developer defines a variable with the same name your existing definition will be overwritten.

Because JavaScript is a functionally scoped language creating a function and/or variable which is not wrapped in another function will result in that variable being created in the global scope (window). To combat this, developers place their classes in Objects.

As the client-side JavaScript included in web applications gets larger and more advanced, organization of 3rd party code and your own code becomes increasingly important. Using namespaces will ensure your JavaScript code is safe from other code overwriting it in the global namespace.

Example grid pre-configured class,apply config, Register Grid , used as xtype

http://examples.extjs.eu/ (grid in border layout)

Question 44. Explain Extjs Vs Jquery?

Answer :

1. ExtJs and JQuery are kind of apples and oranges. You can compare Ext Core to JQuery, and ExtJs to JQuery UI.
2. Ext JS is a full-fledged widget library while jQuery (not jQuery UI) and Mootools are JavaScript frameworks that help with DOM manipulation etc.
3. Whilst jQuery and Mootools help with the general workings of a site.
4. jQuery UI is a much less rich set of components.
5. Ext JS seems to be focussed on tables and storing data, plus manipulating it.