Ext JS Interview Questions


1.What is Ext Component and give a brief description about that?

An Ext - JS application’s UI is made up of one or many widgets(many sub classes ) called Components .A typical application’s Component hierarchy starts with a  Viewport at the top, which has other Containers and/or Components nested within it, below picture describes all about it .


2) What is XTypes in ExtJS?

i1)Every Component has a symbolic name called xtype ,which is its Ext-specific type name, along with methods.
ii)The xtype configuration option can be used to optimize Component creation and rendering.
iii)It serves as a shortcut to the full component name. For example, the component Ext.button.Button has an xtype of button.

)How do you create your own Xtype ?

3) What is  OnReady() in ExtJs?

i)Ext.onReady() is a higher order function
ii)OnReady() is one of the most commonly used function in ExtJS, which is used to wire up or connect functions .iii)The onReady() function takes a function as an argument. iv)The
onReady() function is called when the document is loaded and DOM is ready.

 4)What is Layout and  how many types of layout are there in ExtJs ?

Layout is the  way picture or text are displayed in screen .
Below are the basic layouts in extjs
i)Absolute ii)Accordion iii)Anchor iv)Border v)Card Layout vi)Column Layout vii)Fit viii)Table ix)VBox x) HBox

*Complete details of layout can be found here on below link .
http://developerasks.blogspot.in/2015/11/extjs-layouts.html

5) What is Vtype in extjs ?

i)This is a singleton object which contains a set of commonly used field validation functions and provides a mechanism for creating reusable custom field validations.
ii)VTypes can be applied to a Text Field using the vtype configuration.
iii) Some Common vtypes are alpha, alphanum, email, url.



6) What is hoisting in Javascript?

 In java Script Variable and functions are "hoisted" rather than being available after the declaration .
It means you can call a variable or function and display it before and you can declare then in end .
Complete Details of hoisting can be read in below link ---
http://adripofjavascript.com/blog/drips/variable-and-function-hoisting

7)What is the difference between JavaScript object and Json Object ?

JSON is data interchange format like XML it is used to pass data from one application to another from server to client or from client to server,while JavaScript is a Language and its objects is specifically for JavaScript only.

8)What is prototype in Javascript ?

i)All JavaScript objects inherit the properties and methods from their prototype.
ii)Objects created using an object literal, or with new Object(), inherit from a prototype called Object.prototype.
iii)The Object.prototype is on the top of the prototype chain.
iv)Objects created with new Person() inherit the Person.prototype.
v) We generally use this keyword for prototypes.

9)What is event loop in Javascript?

The Event Loop is a queue of callback functions. When an async function executes, the callback function is pushed into the queue. The JavaScript engine doesn't start processing the event loop until the code after an async function has executed.

10)Javascript is single or multithread application? 

Javascript is a single threaded application as it can't run multiple threads or transactions simultaneously.

11)Which layout will you choose to show some data in a table ? Table or VBox/HBox? 

12)How do you create a store in ExtJs?

13)If in a form panel you need to enable the save button only if there is some change in data , how will you do it ?

We  can handle it through is Dirty() function of extjs, which checks if there are any changes in panel , you too can check same field by field .

Below is an example given
 if (this.FormPanel.getForm().isDirty()) { // Then do save.}


14)If data in your Store comes from 3 layers or from 3 sources like amazon, ebay and flipkart  how will the datastore be designed ?

15)  What is the difference between MVC and MVVM?

Lets discuss what are these MVC and MVVM 

->
Its the application architecture generally used .
o understand how these choices fit into your application, we should start by further defining what the various abbreviations represent.
  • (M) Model - This is logically the database part of your Application, which is generally Oracle , DB2 etc 
    Models are normally used in conjunction with Stores to provide data for grids and other components. Models are also an ideal location for any data logic that you may need, such as validation, conversion, etc.
  • (V) View - A View is any type of component that is visually represented. For instance, grids, trees and panels are all considered Views.
    Whatever the user sees in browser can be called as views .
  • (C) Controller- The interaction between view and Model is done by Controller , This is where mainly your business logic works
  • (VM) ViewModel - The ViewModel is a class that manages data specific to the View.
    Even if you have view model still controller will be there it is not replaced by controller .
    It does the binding between view and model.

    Below 2 points can be noted for difference between them
    • MVC = model, controller, view = essentially one-way communication = poor interactivity
    • MVVM = model, controller, cache, view = two-way communication = rich interactivity
16)What are the base classes for ExtJS?
There are to main classes we use in Ext , they are Ext.Create and Ext.define .

You can use below link for more information about  Ext class system.
https://edspencer.net/2011/01/24/classes-in-ext-js-4-under-the-hood/

17)What is the difference between Ext.create and Ext.define?

Ext.define is for declaring a class, or creating a new class.

Ext.define('Foo', {
    extend: 'Bar'
});
 

Ext.create is  creating an instance or object of same .

var = Ext.create('Foo');
18)Is datastore a singletom class?

19) How many types of datastore are there in ExtJs?

20)How many types of reader are there in ExtJS?

21)How do you create a file upload UI in ExtJS?
 Ext.form.field.file is the class we use for file upload,it was 2 xtypes that is filefield and fileuploadfield.

To create it create a form panel and then inside that put an item for filefield .

Below code link can be taken as an an example for same  .

http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.form.field.File

22) What is the difference between Extjs 3 and 4 ?

Extjs migration guide on below link says all about it .

http://docs.sencha.com/extjs/4.2.2/#!/guide/upgrade

Below are the main points for same

1)Class Defination
2)Dynamic class loading and Dynamic Build generation .

 3)Mixins
4)Env namespace
5)Lang Package according to javaScript .

23)What are the components you have used in extjs?

24))Whats is the Flow of extjs?

25)Ext.application ? what does it do?

26)What type of store have you used?

27)I have an editable grid, I want to change only 1 column? to change color what do I need to do?

28)which is better to use id and Item name?

29)What is the purpose of load in mask?

30)What is box model in css?

31)I have 1000 records and but i want to show only 50 records..how will I do it?


32 ) What is mixins in ExtJS ? 

Previous
Next Post »

Pages