Interview Questions.

Ext JS Interview Questions


Ext JS Interview Questions

Q1. Why we want javascript Library?

Ans: Javascript is an extremely good language. It’s first rate flexible.Browsers are the contemporary UI paradigm.

The javascript Libraries now ought to provide a wealthy set of UI Widgets.

Javascript libraries:







Q2. Why did you pick out Ext JS?

Ans: The basic design of extjs is exemplary.One can examine loads from it’s unified structure – regardless of which language one is programming in.

Extjs calls for you first of all certainly one of their base instructions – ensuring a consitent model. Consistency is extraordinarily crucial for the library to be reusable.

Extjs documentation appears to be very complete and properly maintained.

Key thing of the EXTJS Library is the go-browser assist.

Build rich Internet packages with Ext JS.

Ext JS framework is the multitude of wealthy UI elements supplied. These factors encompass forms, dialog boxes, tabs, bushes, and grids.

The Ext JS framework includes aid for Ajax implementations.

Ext JS integration with other Web server frameworks.

Ext JS framework development into numerous famous integrated development environments (IDEs), consisting of Eclipse, Aptana, and Komodo.

Ext JS presents terrific performance. The framework is absolutely object orientated and extensible. Because it's written inside the JavaScript language.

Q3. What are fundamental Web browsers supported by using Ext JS framework?


Windows® Internet Explorer® version 6 and later.

Mozilla Firefox model 1.Five and later (PC and Macintosh).

 Apple Safari model 2 and later.

 Opera model 9 and later (PC and Mac).

Q4. Integration of Web development server-aspect frameworks with Ext JS?

Ans: You can use Ext JS with different commonplace Web development server-aspect frameworks, consisting of PHP, the Java™ language, Microsoft® .NET, Ruby on Rails, and ColdFusion.

Q5. Where Extjs prolonged from?

Ans: Ext JS as a assignment to extend the functionality that the YUI Library.A key thing of the YUI Library is the go-browser support.The Extjs framework is fully object orientated and extensible. Because it's written inside the JavaScript language.

Q6. Extjs Ajax implementation?

Ans: A traditional Ext JS Ajax implementation: an HTML text discipline and button element that posts statistics within the textual content area to a Web server whilst the button is clicked.

Q7. Do you have any recommendation for builders the usage of Ext for the first time?

Ans: Ext can be used by Web Application builders who are acquainted with HTML however may also have very little revel in with JavaScript software improvement. If you're beginning to construct a new internet application, or you're revamping an present application, then take some time to apprehend the basics of the library along with.

Q8. How to get admission to Dom detail the usage of EXTJS?

Ans: The Element API is fundamental to the whole Ext library.

Using conventional Javascript, deciding on a DOM node through ID is done like this:

var myDiv = report.GetElementById('myDiv');

Using Extjs:


var myDiv = Ext.Get('myDiv');


Q9. What's the reason of Element Object in Extjs?


Element wraps most of the DOM techniques and residences that you'll need, presenting a convenient, unified, move-browser DOM interface (and you can nevertheless get direct access to the underlying DOM node whilst you need it via Element.Dom).

The Element.Get() method affords internal caching, so more than one calls to retrieve the identical item are particularly rapid.

The most not unusual actions executed on DOM nodes are constructed into direct, cross-browser Element methods (add/cast off CSS training, upload/dispose of occasion handlers, positioning, sizing, animation, drag/drop, and so forth.)

Q10. What is syntax for Extjs Button click occasion?

Ans: Ext.OnReady(feature() 

Ext.Get('myButton').On('click', characteristic()

alert("You clicked the button");



ulating it.

Q11. What is find of Ext.OnReady() feature?

Ans: Ext.OnReady is probably the primary technique that you’ll use on each web page. This method is routinely known as once the DOM is absolutely loaded, making certain that any page elements that you can need to reference will be available while the script runs



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


Q12. For instance, to expose our message whilst any paragraph in our check web page is clicked, what is the extjs code on paragraph click?

Ans: Ext.OnReady(characteristic() 

Ext.Pick('p').On('click', feature() 

alert("You clicked a paragraph");





var paragraphClicked = characteristic() 

alert("You clicked a paragraph");

Ext.Choose('p').On('click', paragraphClicked);


Q13. List out the extjs library documents to include in JSP page?

Ans: ext-base.Js

ext-all-debug.Js or ext-all.Js


base.Css or examples.Css

Q14. List out the css report required to use Extjs Theme belongings?

Ans: xtheme-gray.Css


Q15. What is cause of MessageBox?

Ans: MessageBox is asynchronous.

MessageBox name, which demonstrates the readable message to user.

MessageBox used for multiple cause like





HubSpot Video

Q16. Write syntax for MessageBox show() method?

Ans: Ext.MessageBox.Show(

identify: 'Paragraph Clicked',

msg: 'User clicked on Paragraph',

width:four hundred,

buttons: Ext.MessageBox.OK,

animEl: paragraph


Q17. What is method to Update the message box body textual content for MessageBox?

Ans: updateText( [String text] ) : Ext.MessageBox

Q18. What is a widget?

Ans: A widget is a tiny piece or element of capability.

Q19. What is determine class for all shops in extjs? How many stores exists?

Ans: Ext.Facts.Store is parent magnificence for all stores.

A Store object makes use of its configured implementation of DataProxy to access a facts object except you call loadData immediately and skip to your facts.

Subclasses for Store:

GroupingStore, JsonStore, SimpleStore

Q20. How to address event for a extjs element?


Using listeners config item.

For ex for grid activities : listeners: rowclick: gridRowClickHandler,rowdblclick: gridRowDoubleClickHandler

Using addListener( String eventName, Function handler, [Object scope], [Object options] ) : void

Appends an event handler to this issue

Using on( String eventName, Function handler, [Object scope], [Object options] ) : void

Appends an event handler to this element (shorthand for addListener)

For ex: save.On( "datachanged", function( keep ) ..... );

Q21. How to find no of facts in a store?

Ans: Using store.GetCount() : Gets the variety of cached records.

Store.GetTotalCount() : Gets the total wide variety of facts inside the dataset as back by the server.

Q22. How to handle exception while loading datastore?

Ans: Using loadexception event.

Syntax: shop.Loadexception() : Fires if an exception takes place in the Proxy for the duration of loading.

Use beforeload : ( Store this, Object options ) : Fires earlier than a request is made for a new facts item. If the beforeload handler returns fake the burden movement might be canceled.


keep.On('loadexception', function(event, options, response, error) 

alert("Handling the error");



Q23. How to handle updates for keep adjustments?

Ans: Use store.CommitChanges()

Q24. What is the purpose of each() in save?

Ans: Calls the specified function for every of the Records inside the cache

every( Function fn, [records Object] )

Q25. How to get modified information the use of keep object?

Ans: store.GetModifiedRecords() : Gets all facts changed since the final commit.

Q26. How to get document using index?

Ans: shop.GetAt( Number index ) : Get the Record at the required index.

Q27. How to get report using identification?

Ans: keep.GetById( String identity ) : Get the Record with the required identification.

Q28. What is the purpose of load() in store? 

Ans: save.Load() : returns boolean

Loads the Record cache from the configured Proxy the use of the configured Reader.

For far flung data sources, loading is asynchronous, and this name will return before the new records has been loaded.

Save.Load(callback: fnCheckData, scope: this);

Q29. What is purpose of loadData() in save?

Ans: keep.LoadData( Object records, [Boolean append] ) : void

Loads information from a passed statistics block and fires the load occasion.

LoadData(storeData,fake); False to update the existing information cache.

LoadData(storeData,authentic) : True to append the brand new Records rather than replace the present cache.

Q30. How many varieties of format managers exist in extjs? What are they? 

Ans: Layouts fall under this bundle Ext.Layout.*

Types of layouts:


Absolute Layout:

This is a easy layout fashion that allows you to place objects inside a field the use of CSS-style absolute positioning through XY coordinates.

Accordion Layout:

Displays one panel at a time in a stacked format. No unique config houses are required other than the layout.

All panels brought to the box could be converted to accordion panels.


This form of layout is maximum commonly seen inside FormPanels (or any container with a FormLayout) where fields are sized relative to the container with out tough-coding their dimensions.


Border layouts can be nested with pretty much any stage of complexity which you might want.

Every border format need to at the least have a middle location. All other regions are optional.

CardLayout (TabPanel):

The TabPanel factor is an top notch instance of a sophisticated card layout. Each tab is just a panel managed through the card layout such that only one is visible at a time

CardLayout (Wizard):

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


A very simple format that simply fills the box with a unmarried panel.


FormLayout has specific logic to address form fields, labels, and so forth.FormLayout in a standard panel,


This is a beneficial format style when you want multiple columns which could have various content top.Any fixed-width column widths are calculated first, then any percent-width columns exact the use of the columnWidth config


Outputs a preferred HTML desk because the format container.You need to allow the contents to glide certainly based on preferred browser table layout policies.

Statistics, plus manip

Q31. How we will follow pagination in grid panel?

Ans: Using Ext.PagingToolbar plugin, we can put in force pagination to a grid panel


new Ext.PagingToolbar(

pageSize: 25,

save: keep,

displayInfo: authentic,

displayMsg: 'Displaying topics 0 - 1 of 2',

emptyMsg: "No topics to show",


// cause the records save load

keep.Load(params:start:0, limit:25);

Q32. What is xtype?

Ans: The xtype may be seemed up at render time up to determine what sort of child Component like TextField, NumberField and many others to create. I,e

xtype = Class


button = Ext.Button

textfield = Ext.Form.TextField

radio - Ext.Form.Radio

grid = Ext.Grid.GridPanel

combo = Ext.Form.Combobox

toolbar = Ext.Toolbar

Q33. What is vtype?

Ans: The validations provided are primary and meant to be without difficulty customizable and prolonged.

Few kinds supplied with the aid of extjs are as below:

emailText : String, The blunders textual content to display when the email validation function returns false

alphanumText : String, The mistakes textual content to show while the alphanumeric validation feature returns false

urlText : String, The mistakes text to display when the url validation function returns false

save.GetModifiedRecords(): returns array item

Q34. How to get file object from shop?

Ans: var record = grid.GetStore().GetAt(rowIndex);

Q35. Purpose of Load mask?

Ans: To apply mask to web page stage / factor degree.

Restrict person now not to get right of entry to any components in page

var pageProcessBox = new Ext.LoadMask( Ext.GetBody(),  msg: 'Loading Employee details.'  );


Q36. Purpose of renderer in grid panel?

Ans: Using config option,

renderer: fnCellColor wherein fnCellColor is approach to apply shade to a mobile.

Q37. How to get choice model utilized in a grid panel?

Ans: the usage of grid.GetSelectionModel(); technique

Q38. How to prevent editing a record?

Ans: newRecord.EndEdit();

Q39. How to start enhancing a document?

Ans: newRecord.BeginEdit();

Q40. How to dedicate a document amendment?

Ans: newRecord.Dedicate();

Q41. What is use of blend pick event function?

Ans: To get the chosen fee from a mixture.The usage of getvalue();

var selectedComboValue = mycombo1.GetValue();

Q42. How to get a price of textfield or mixture field?

Ans: using getvalue();

var selectedValue = mytextfield.GetValue();

Q43. How to use css on pick of combo box?

Ans: the use of config choice as

emptyClass : 'emptycss', wherein emptycss is a css classname

Q44. What are additives required for grid panel?

Ans: save, columnmodel, identity, width,height

Q45. How to disable menu option for header in columnModel?

Ans: using menuDisabled: proper

Q46. How to cover the column in grid panel?

Ans: the usage of hidden : real

Q47. How to sign up callbacks to the load and exception occasions of the JsonStore? 

Ans: var grid = new Ext.Grid.GridPanel(

store: new Ext.Facts.JsonStore(



load: this.OnLoadSuccess.CrateDelegate(this),

exception: this.OnLoadException.CreateDelegate(this)


onLoadSuccess: function () 

// success


onLoadException: characteristic () 

// error




Q48. Extjs decode()?

Ans: var json = Ext.Decode(reaction.ResponseText);

Ext.Msg.Alert('Error', json.Error);

Q49. Extjs Vs jQuery:

Ans: ExtJs and JQuery are type of apples and oranges. You can evaluate Ext Core to JQuery, and ExtJs to JQuery UI.

Ext JS is a complete-fledged widget library at the same time as jQuery (now not jQuery UI) and Mootools are JavaScript frameworks that help with DOM manipulation and so on.

Whilst jQuery and Mootools assist with the general workings of a domain.

JQuery UI is a much much less rich set of components.

Ext JS seems to be focussed on tables and storing.