EXTJS4 Interview Questions & Answers

1. Requirements for a simple EXTJS ?

1.Call Ext-Base.js in a html file

2.This file should exist under webcontent/adapter/ext - Library is added.

3.Default stylesheet ext-all.css is avb under resources/css

4.Have your own js file link it under HTML file if required.

5.Helping js can also be called inside your HTML file.

6.Have layer to print your object. The layer is called Layer Dialog Area.

7.Use onReady() inside which object can be created and declared

8.Call the object with the EXT.get()

9.To open a window EXT.window() to set the properties and use show() to show the result in the monitor.

2.       What modern browsers does EXTJS work on?

There are 5, name them:
EXTJS4 support cross platform browser compatibility.

IE 6+

FF 3+ (PC, Mac)

Safari 4+

Chrome 10+

Opera 11+ (PC, Mac)

3.       What are the prerequisites for learning ExtJS?

-First and most interest of self learning & work on open source libraries.

- Good knowledge on HTML , CSS, Javascript

-Drive through EXTJS API docs & practice samples

4.       What is new in ExtJs 4 compared with its older versions?

-          Extremely customizable Charts, free graphs and visualization using HTML5, Charting engine

-          Powerful  Themes introduced using SASS, makes extremely easy to customize your application theme.

-          ARIA,RTL (right to left language support) such as Arabic etc.  Fast interaction with mouse & keyboard (section 508A); EXTJS gives world class accessibility support.

-          End of Form Layout. With EXTJS4, forms  can use any layout, making it easy  to achieve any look & feel. (Forms not tied to Form layout)

-          Upgraded Components: component wise fixing bugs, improved UI, given new level of visual  polish.

-          Upgrade in GRID extension components - Row Editor, Tree Grid are rewritten and are in build into the framework. Locking, editing and infinite scrolling that can scroll forever.

-          Improved Data package – This is strongest part of EXTJS, package uses stores,readers,proxies and rest to seamlessly load data from any source.  Using this data package build modern, scalable enterprise grade web apps using MVC. New Proxies like WebStorage,WebSQL, Session storage proxies used HTML5 feature to save data in client side, and achieved by single line of configuration.

-          Double the documentation including a new API browser.

-          Application Architecture – It enables us to create some incredible tools to help automate much of the design and maintenance into creating applications. Model –View-Controller is introduced in Architecture, defined with common file structure, best practices, 4000+ unit testcases for EXTJS components.

-          Faster,Easier,more stable, learn easy using 200+ examples with EXTJS4s

-           

5.       Explain a little about Ext.Element class?

- Element wraps most of the DOM methods and properties that you'll need, providing a convenient, unified, cross-browser DOM interface.

Ext.dom.Element - Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences.

// by id

var el = Ext.get("my-div");

// by DOM element reference

var el = Ext.get(myDivElement);

6.       What do you understand by 'xtype' in ExtJS ?

      The xtype will be looked up at render time up to determine what type of child Component like TextField, NumberField etc to create in a container. Some xtypes as below,

xtype     =   Class                      

button = Ext.Button

textfield = Ext.form.TextField

radio - Ext.form.Radio

grid   =  Ext.grid.GridPanel

combo =  Ext.form.Combobox

toolbar = Ext.Toolbar

eg:

var text1 = Ext.widget({

     xtype: 'textfield',

     fieldLabel: 'Foo'

 });

7.       Explain the difference between 'ext.js' and 'ext-all.js' file?

ext-all.js: This file contains the entire Ext JS framework (used for Development & testing)

ext.js: This file contains the minimum Ext JS code (Ext JS base library)- used in Production

8.       What is the use of bootstrap.js file?

If developer is not sure which file to include between ext-all.js or ext-all-debug.js then you can make right use of bootstrap.js file.

The only thing that this file does is import ext-all.js or ext-all-debug.js, depending on the environment we are using.

9.       What is Statics in ExtJS 4?

Any class can define static methods, which means we do not need to instantiate the class to call the method;

eg: ClassName.methodName().

To declare a static method or property, simply define it as statics in its class property.

List of static methods for this class. For example:

Ext.define('Computer', {

     statics: {

         factory: function(brand) {

             // 'this' in static methods refer to the class itself

             return new this(brand);

         }

     },

     constructor: function() { ... }

});

10.   What do you mean by Sandbox mode in ExtJS 4?

-To run multiple versions of EXTJS side by side. Leverage your investments and migrate at your own place.

- To use Ext JS 4 in the sandbox mode, you need to import the ext-all sandbox files and the ext-sandbox.css file as well.

11.   How does Ext JS is useful in detecting the DOM is ready?

Ext JS achieves cross browser compatibility by detecting which browser the code is executing on and manages the detection of the DOM ready state.

Ext.onReady is probably the first method that you’ll use on every page. This method is automatically called once the DOM is fully loaded, guaranteeing that any page elements that you may want to reference will be available when the script runs

syntax:

Ext.onReady(function() {

        alert(“Congratulations! You have Ext configured correctly!”);

});

12.   Explain about utility class 'Ext.util.TaskRunner'?

Provides the ability to execute one or more arbitrary tasks in a asynchronous manner. Generally, you can use the singleton Ext.TaskManager instead, but if needed, you can create separate instances of TaskRunner. Any number of separate tasks can be started at any time and will run independently of each other.

Example usage:

 // Start a simple clock task that updates a div once per second

 var updateClock = function () {

     Ext.fly('clock').update(new Date().format('g:i:s A'));

 }

 var runner = new Ext.util.TaskRunner();

 var task = runner.start({

     run: updateClock,

     interval: 1000

 }

The equivalent using TaskManager:

 var task = Ext.TaskManager.start({

     run: updateClock,

     interval: 1000

 });

13.   Explain the life-cycle of a component in ExtJS?

The most important stages in the life cycle of every class based on Component:

1. Initialization:

-The config object is applied

-The base Component events are created

-The component is registered in ComponentMgr

-The initComponent method is called

-Plugins are loaded (if applicable)

-State is initialized (if applicable)

-The component is rendered (if applicable)

2.  Rendering:

-The beforerender event is fired

-The container is set

-The onRender method is called

-The Component is "unhidden"

-Custom class and/or style applied

-The render event is fired

-The afterRender method is called

-The Component is hidden and/or disabled (if applicable)

-Any state-specific events are initialized (if applicable)

3. Destruction :

-The beforedestroy event is fired

-The beforeDestroy method is called

-Element and its listeners are removed

-The onDestroy method is called

-Component is unregistered from ComponentMgr

-The destroy event is fired

-Event listeners on the Component are removed

14.   Explain a little about component query class in ExtJS ?

Ext.ComponentQuery is a class which is used for searching for components.

Provides searching of Components within Ext.ComponentManager (globally) or a specific Ext.container.Container on the document with a similar syntax to a CSS selector.

Components can be retrieved by using their xtype.

-component

-gridpanel

15.   How does ExtJS is useful in detecting the DOM is ready ?

Ext JS achieves cross browser compatibility by detecting which browser the code is executing on and manages the detection of the DOM ready state. Some browser fires some event on DOM ready or some browser sets some flag when DOM is ready.

Ext.onReady is probably the first method that you’ll use on every page. This method is automatically called once the DOM is fully loaded, guaranteeing that any page elements that you may want to reference will be available when the script runs

syntax:

Ext.onReady(function() {

        alert(“Congratulations! You have Ext configured correctly!”);

});

16.   How can we define a constructor in a class in ExtJS 4?

The constructors are special method that are executed when a class is instantiated. You can use constructor to prepare the object in any way required. For example, to set up the default property values.

eg:

Ext.define('Test.Emp', {

   config: {

        name: 'Raja',

        gender: 'Male'

   },

   constructor: function(config){

       // initialize our config object

       this.initConfig(config);

    },

    getDetails: function(){

      alert('My name is ' + this.name);

    }

});

var honey = Ext.create("Test.Emp",{

name: 'Mary',

       gender: 'Female'

});

17.   How can you create a singleton class in ExtJS?

To create a singleton class,just set to true, the class will be instantiated as singleton.

For example:

Ext.define('Logger', {

    singleton: true,

    log: function(msg) {

        console.log(msg);

    }

});

Logger.log('Hello');

18.   What is the purpose of Layout Managers in ExtJS?

Layouts fall under this package Ext.layout.*

Layout managers are basically responsible for the visual organization of widgets onscreen. This involves keeping track of how the individual child items are placed to each other.

Types of layouts:

Absolute Layout:

      This is a simple layout style that allows you to position items within a container using CSS-style absolute positioning via XY coordinates.

Accordion Layout:

Displays one panel at a time in a stacked layout. No special config properties are required other than the layout.

All panels added to the container will be converted to accordion panels.

AnchorLayout:

This type of layout is most commonly seen within FormPanels (or any container with a FormLayout) where fields are sized relative to the container without hard-coding their dimensions.

BorderLayout:

Border layouts can be nested with just about any level of complexity that you might need.

Every border layout must at least have a center region. All other regions are optional.

CardLayout (TabPanel):

The TabPanel component is an excellent example of a sophisticated card layout. Each tab is just a panel managed by the card layout such that only one is visible at a time

CardLayout (Wizard):

You can use a CardLayout to create your own custom wizard-style screen.

FitLayout:

A very simple layout that simply fills the container with a single panel.

FormLayout:

FormLayout has specific logic to deal with form fields, labels, etc.FormLayout in a standard panel,

ColumnLayout:

This is a useful layout style when you need multiple columns that can have varying content height.Any fixed-width column widths are calculated first, then any percentage-width columns specified using the columnWidth config

TableLayout:

Outputs a standard HTML table as the layout container.you want to allow the contents to flow naturally based on standard browser table layout rules.

19.   How can you create HashMap in ExtJS?

It represents a collection of a set of key and value pairs. Each key in the HashMap must be unique, the same key cannot exist twice. Access to items is provided via the key only. Sample usage:

var map = new Ext.util.HashMap();

map.add('key1', 1);

map.add('key2', 2);

map.add('key3', 3);

map.each(function(key, value, length){

    console.log(key, value, length);

});

The HashMap is an unordered class, there is no guarantee when iterating over the items that they will be in any particular order. If this is required, then use a Ext.util.MixedCollection.

Refer links for EXTJS4 Features:

http://www.sencha.com/blog/introducing-ext-js-4-2/

http://www.sencha.com/blog/ext-js-4-preview-faster-easier-more-stable/

https://sites.google.com/site/mynotepad2/developer-notes/javascript/extjs/extjs-component-life-cycle