Skip to main content

45 Best Ext.js Interview Questions and Answers

What Is EXT.js?
Ext.js stands for extended JavaScript and the first version was developed by Jack Slocum in 2006, which is an extension of YUI (Yahoo user interface). He named the library as YUI-ext.

Ext.js is pure object oriented and extensible JavaScript framework and it used to developed interactive cross-platform web applications, reach UI such as desktops, tablets, and smartphones using techniques such as Ajax, DHTML and DOM.

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

Ext.js is a product of Sencha a software firm based in Redwood City, California.
Ext.js is high-performance, customizable UI widgets - including HTML5 grids, trees, lists, forms, menus, toolbars, panels, windows, and so on.

Ext.js is pre-Integrated and tested UI Components such as –
1.      HTML5 calendar
2.      grids
3.      pivot grid
4.      D3 adapter
5.      trees
6.      lists
7.      forms
8.      menus
9.      and so on

Its distribution is done through two licenses -
1.      A business license
2.      Open source but limited
Ext.js provides everything a developer needs to build data-intensive, cross-platform web and smartphones applications.

Why did you choose Ext.js?
1.      Documentation is very comprehensive and well maintained
2.      Build rich UI web and smartphones applications
3.      It’s also supports to cross-browser
4.      It’s provides excellent performance and  customizable UI widgets

What Is the latest stable version of Ext.js?
The Latest stable version of Ext JS 6.2.1 August 2017

Ext.js is extended on which library?
It is a Sencha product which is extended from YUI (Yahoo user interface).

What Is a Widget?
A widget is a tiny piece or component of functionality.

What Are the features of EXT.js?
List some Ext.js features -
1.      Rich Data Analytics
2.      Customizable Built-In Themes
3.      It can access data from any back-end source
4.      Pre-Tested, high-performance, Integrated UI Components
5.      Sophisticated Data Visualization
6.      Back-end Agnostic Data Package
7.      Flexible layout manager and Responsive Configs
8.      Create data-intensive HTML5 applications using JavaScript
9.      Ext JS leverages HTML5 features on modern browsers.
10.  Accessibility Package (ARIA) for Section 508 compliance

What Are the life-cycle of a component in Ext.js?
1.      Initialization
2.      Rendering
3.      Destruction

Which Architecture Is supported by Ext.js?
Ext JS follows MVC/ MVVM architecture.
Ext.js provides support for both MVC and MVVM application architectures.
The MVC know as Model View Controller and MVVM known as Model View ViewModel

What Are the differences between MVC and MVVM?
MVC -
1.      MVC is a design pattern
2.      MVC work like disconnected mode
3.      MVC supported only one-way binding
4.      In MVC, not update UI automatically when your data model update. Need event to call data model and update it
5.      In MVC, model parts directly bind with the view page
MVVM –
1.      MVVM is a design pattern
2.      MVVM supported two ways binding
3.      The UI is update automatically when your data model update
4.      And so on

What Are the Advantages of using Ext.js?
1.      Supports Cross-platform development
2.      Reduces the cost of web application development
3.      High performance
4.      Pre-Tested widgets and UI Components
5.      It has set of widgets for making UI powerful and easy
6.      It follows MVC architecture so highly readable code
7.      It follows MVVM architecture so highly readable code

What Are the prerequisites for learning Ext.js?
1.      Good knowledge on HTML, CSS, JavaScript
2.      Drive through EXT.js API docs & practice samples

What Are the main library files to add in HTML page?
These are the main files to include in HTML page to run Ext JS code -
1.      Ext-all.js
2.      Ext-all.css

What Are the limitations of using Ext.js?
1.      The library is too large around 500KB.
2.      Difficult to debug HTML
3.      It is paid for commercial applications

What Are the difference between ‘ext.js’ and ‘ext-all.js’ file?
The Ext.js - Its contains the minimum Ext.js code (Ext.js base library) and used in Production
The Ext-all.js - Its contains the entire Ext JS framework (used for Development & testing)

How many types of EXT.js components?
The Types of components -
1.      Window
2.      Form
3.      ToolTip
4.      HTML Editor
5.      Grid
6.      Charts
7.      Message Box
8.      Progress Bar

How many types of layout managers exist in Ext.js?
1.      FormLayout
2.      ColumnLayout
3.      TableLayout
4.      Absolute Layout
5.      AnchorLayout
6.      Accordion Layout
7.      BorderLayout
8.      CardLayout (TabPanel)/CardLayout (Wizard)
9.      FitLayout

What Are the different types of alert boxes in Ext.js?
 Different types of alert boxes in Ext JS are -
1.      Ext.MessageBox.alert();
2.      Ext.MessageBox.confirm();
3.      Ext.MessageBox.wait();
4.      Ext.MessageBox.promt();
5.      Ext.MessageBox.show();

How to get no. of records in the store?
1.      Store.getCount() – Use for cached records
2.      Store.getTotalCount() – Use for total no of records in the DB

What Are the browser Ext.js supports?
The list of modern browsers which are supported by -
1.      IE 6 and above
2.      Firefox 3.6 and above
3.      Chrome10 and above
4.      Safari 4 and above
5.      Opera 11 and above

What Are the Grid Plugins?
The Grid Plugins Are –
1.      Editing Plugin
2.      RowExpander Plugin
3.      BufferedRenderer Plugin
4.      DragDrop Plugin
Editing plugin - Ext.grid.plugin.Editing - This plugin is used for editing the grid row and cell.
RowExpander plugin - Ext.grid.plugin.RowExpander - This plugin is used for creating expandable rows.
BufferedRenderer plugin - Ext.grid.plugin.BufferedRenderer - This plugin is used to render large number of grid records.
DragDrop plugin - Ext.grid.plugin.DragDrop - This plugin is used to implements the drag and drop functionality in a grids.

The each grid plugins has an alias name that is known as ptype similar to xType and we can configure the plugin using the ptype or Ext.create() methods.

What Is xType in Ext.js?
The xType defines the type of UI component which is determined during rendering of the component in the Ext.js.
For Example, some of the xType component looks like - Numeric, button and so on.

What Is vType in Ext.js?
The vType is the validation type and it can be customized easily.
For Example, some of the xType component looks like – emailText and alphanumText
The emailText – The emailText returns false, if input text is not a valid email address.
The alphanumText – The alphanumText returns false, if entered input text is not alphabets or numeric values.

What Is the role of Ext.onReady()?
The Ext.onReady() method is the first method and this method is called when DOM is fully loaded.
Syntax -
Ext.onReady(function() {
  alert("Great, Nice to see you!");
});

How many types you access the DOM elements in Ext.js?
The DOM elements in Ext.js are -
1.      Ext.get()
2.      Ext.getElementById()
3.      Ext.fly()
4.      Ext.select()

How To handling events in Ext.js?
 The ways for event handling -
1.      Using Listeners
2.      Attaching events later
3.      Using custom events

What Is the base class for store, model & controller?
The base classes for Store is Ext.data.Store and the Ext.data.Store object have getModifiedRecords() method which returns all records added or updated since the last commit.
The base classes for model is Ext.data.Model
The base classes for Controller is Ext.app.controller

How to get value of an element in Ext.js?
Ext.getCmp('id').getValue();


How to get record object from store?
var rowIndex = grid.getStore().getAt(rowIndex);


How to get Store record using index?
BY using  grid Id - Ext.getCmp('gridID').getStore().getAt(index);
By using store Id - Ext.getStore('storeID').getAt(index);


How to disable menu option for header in columnModel?
In Ext.js, that would be done by specifying menuDisabled: true in the column definition.

We can use a property that can be set for each column-
ü menuDisabled:true
ü sortable:false // menu shows but no sort options
ü hideable:false // menu shows but column name not shown in columns menu
ü menuDisabled:true // no menu


How to hide column in the grid panel?
ü Hidden: true;


How to get selection model used in a grid panel?
Using the - grid.getSelectionModel() method

The example looks like -
var grid = Ext.getCmp('documentsGrid');
var rec = grid.getSelectionModel().getSelected();
rec.get('tagnum')


How to stop editing a record?
Using the - newRecord.endEdit() method

The example looks like –
Ext.define('Ext.form.Basic', {
  ...
  updateRecord: function(record) {
      var fields = record.fields,
          values = this.getFieldValues(),
          name,
          obj = {};

      fields.each(function(f) {
          name = f.name;
          if (name in values) {
              obj[name] = values[name];
          }
      });

      record.beginEdit();
      record.set(obj);
      record.endEdit();

      return this;
  },
  ...
});

How to start editing a record?
By Using the - newRecord.beginEdit() method.
Ext.define('Ext.form.Basic', {
  ...
  updateRecord: function(record) {
      var fields = record.fields,
          values = this.getFieldValues(),
          name,
          obj = {};

      fields.each(function(f) {
          name = f.name;
          if (name in values) {
              obj[name] = values[name];
          }
      });

      record.beginEdit();
      record.set(obj);
      record.endEdit();

      return this;
  },
  ...
});

How to commit a record modification?
By using the - newRecord.commit() method
app.Ajax.request({
  url    : 'db/Contacts',
  method : 'POST',
  params : record.getData(),
  scope  : this,
  success: function(response){
      if(response.success){
          record.id = response.id;
          var store = this.getDataview().getStore();
          store.add(record);
          store.commitChanges();
      }
  }
});

What Are components required for grid panel?
 The grid required components are –
1.      width,
2.      height
3.      store
4.      columnmodel and
5.      id

How to decode response in Ext.js?
var json = Ext.decode(response.responseText);
Ext.Msg.alert(‘Error’, json.error);


How to handle exception while loading datastore?
By Using the - store.loadexception() method

The example looks like –
store.on('loadexception', function(event, options, response, error) {
  alert("Hey, something happing.");
  event.stopEvent();
});


By Anil Singh | Rating of this article (*****)

Popular posts from this blog

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVADOR

25 Best Vue.js 2 Interview Questions and Answers

What Is Vue.js? The Vue.js is a progressive JavaScript framework and used to building the interactive user interfaces and also it’s focused on the view layer only (front end). The Vue.js is easy to integrate with other libraries and others existing projects. Vue.js is very popular for Single Page Applications developments. The Vue.js is lighter, smaller in size and so faster. It also supports the MVVM ( Model-View-ViewModel ) pattern. The Vue.js is supporting to multiple Components and libraries like - ü   Tables and data grids ü   Notifications ü   Loader ü   Calendar ü   Display time, date and age ü   Progress Bar ü   Tooltip ü   Overlay ü   Icons ü   Menu ü   Charts ü   Map ü   Pdf viewer ü   And so on The Vue.js was developed by “ Evan You ”, an Ex Google software engineer. The latest version is Vue.js 2. The Vue.js 2 is very similar to Angular because Evan You was inspired by Angular and the Vue.js 2 components looks like -

React | Encryption and Decryption Data/Text using CryptoJs

To encrypt and decrypt data, simply use encrypt () and decrypt () function from an instance of crypto-js. Node.js (Install) Requirements: 1.       Node.js 2.       npm (Node.js package manager) 3.       npm install crypto-js npm   install   crypto - js Usage - Step 1 - Import var   CryptoJS  =  require ( "crypto-js" ); Step 2 - Encrypt    // Encrypt    var   ciphertext  =  CryptoJS . AES . encrypt ( JSON . stringify ( data ),  'my-secret-key@123' ). toString (); Step 3 -Decrypt    // Decrypt    var   bytes  =  CryptoJS . AES . decrypt ( ciphertext ,  'my-secret-key@123' );    var   decryptedData  =  JSON . parse ( bytes . toString ( CryptoJS . enc . Utf8 )); As an Example,   import   React   from   'react' ; import   './App.css' ; //Including all libraries, for access to extra methods. var   CryptoJS  =  require ( "crypto-js" ); function   App () {    var   data

.NET Core MVC Interview Questions and Answers

» OOPs Interview Questions Object Oriented Programming (OOP) is a technique to think a real-world in terms of objects. This is essentially a design philosophy that uses a different set of programming languages such as C#... Posted In .NET » .Net Constructor Interview Questions A class constructor is a special member function of a class that is executed whenever we create new objects of that class. When a class or struct is created, its constructor is called. A constructor has exactly the same name as that of class and it does not have any return type… Posted In .NET » .NET Delegates Interview Questions Delegates are used to define callback methods and implement event handling, and they are declared using the "delegate" keyword. A delegate in C# is similar to function pointers of C++, but C# delegates are type safe… Posted In .NET » ASP.Net C# Interview Questions C# was developed by Microsoft and is used in essentially all of their products. It is mainly used for