Ext js Interview Questions and Answers

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


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

45 Best Ext.js Interview Questions and Answers 45 Best Ext.js Interview Questions and Answers Reviewed by Anil Singh on 3:33 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^