Ext JS

  Home  Client Side Scripting  Ext JS


“Ext JS frequently Asked Questions in various Ext-JS job Interviews by interviewer. The set of questions here ensures that you offer a perfect answer posed to you. So get preparation for your new job hunting”



65 Ext JS Questions And Answers

1⟩ Tell me what features could we add to Ext to make building a rich application like PLANet easier in the future?

Once an application gets over a certain size, and customer releases become more frequent, the burden of testing the application starts to take its toll. An Ext supported test suite would save huge amounts of time. The current problem of test suites with Ext is being able to reliably predict the automatic ids that Ext generates for page elements. Test tools are beginning to implement support for CSS selectors to overcome this problem, but few currently exist. Ext could provide better documentation on how to build better test cases with Ext so that more time can be spent on development rather than testing.

 210 views

2⟩ Explain why did you choose Ext JS?

Given the wide range of JavaScript libraries available it was important to choose the right one. We needed to choose a library that was consistent in the way that it presents information to the user, but also consistent in the way that you code using the library.

With all Ext components extending the ‘Observable’ class we had the ability to write consistent code in an event-driven manner, much like writing a desktop application, not easily achieved with other libraries. What’s more is that we knew it would work cross-browser, again something not easily achieved that saves countless hours on large projects.

 201 views

3⟩ Tell me what is maximum size of http post request?

Microsoft Internet Explorer has a maximum uniform resource locator (URL) length of 2,083 characters. Internet Explorer also has a maximum path length of 2,048 characters. This limit applies to both POST request and GET request URLs.

 221 views

4⟩ What is Ext JS?

Ext JS is a pure JavaScript application framework for building interactive web applications using techniques such as Ajax, DHTML and DOM scripting.

 194 views

6⟩ What do you know about EXTJS ver.2.2?

- It is a framework.

- 100% client side implementation.

- It is used as a standardization of Java side implementation on client side.

- JS DOM and XML DOM are incorporated in EXT JS

- It is a part of Yahoo toolkit.

- It is used by other technologies apart from JAVA.

- ITs a widget which has its own lifetime so we can call but we can't control over the lifetime.

- It's a hierarchical if you hold the root tag you can traverse all the elements within it using getByElementId

- EXT.get('myElementId')

- 2 methods

- class method prefix the calling object with '.'

- Object method prefix the calling object with '#'

- Flyweight Design Pattern is a pattern which traverse the root object and collect all the wastes.

- SPECIFIC FLYWEIGHT when it is used for a single object.

- GLOBAL FLYWEIGHT when it is used for a multiple object.

- It reconstructs old object when it is required.

- 58 widgets are builtin out of which 36 are UI widgets.

- EXT.onReady is an eventhandler which is used to start the hierarchy of DOM structure.

- Node is a super object.

 177 views

7⟩ Explain Namespace importance?

An example which utilizes 3 distinctly different sets of scripts from different organizations. We use Ext JS for enhancements, Google Analytics for tracking site usage and the native vBulletin scripts. You can see how all of this code from different sources has been included in the same page.

Namespacing is important for developers in order to organize their code and ensure that their code is not overwritten when loaded in the JavaScript interpreter. If another developer defines a variable with the same name your existing definition will be overwritten.

Because JavaScript is a functionally scoped language creating a function and/or variable which is not wrapped in another function will result in that variable being created in the global scope (window). To combat this, developers place their classes in Objects.

As the client-side JavaScript included in web applications gets larger and more advanced, organization of 3rd party code and your own code becomes increasingly important. Using namespaces will ensure your JavaScript code is safe from other code overwriting it in the global namespace.

Example grid pre-configured class,apply config, Register Grid , used as xtype

http://examples.extjs.eu/ (grid in border layout)

 200 views

8⟩ Explain Extjs Vs jQuery?

ExtJs and JQuery are kind of apples and oranges. You can compare Ext Core to JQuery, and ExtJs to JQuery UI.

Ext JS is a full-fledged widget library while jQuery (not jQuery UI) and Mootools are JavaScript frameworks that help with DOM manipulation etc.

Whilst jQuery and Mootools help with the general workings of a site.

jQuery UI is a much less rich set of components.

Ext JS seems to be focussed on tables and storing data, plus manipulating it.

 183 views

9⟩ Ext-JS Interview Questions

Understanding the major UI components (grid, form, tree etc)

How to integrate your existing data with Ext?

How to use Ext Layouts?

The Ext Component Model?

 181 views

11⟩ Explain requirements for a simple EXT-JS?

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.

 185 views

12⟩ Explain EXTJS components?

Form panel

Border layout

Form panel components:

combo box,textfield,html editor,numberfield

combo box:

select,change events

mode,lazyinit

grid panel:

colmodel,json reader,json store,simple store methods

cellclick,rowclick,click

grid selection models

tree panel:

node,event handlers

 185 views

13⟩ Explain EXT-JS Life cycle?

Component Life Cycle

In general, the Component architecture in 2.0 will "just work." It's been designed to handle most of the management of components transparently to the end developer. However, there will come a time when something needs to be customized, or a Component needs to be extended. That's when a thorough understanding of the Component life cycle will become quite helpful. Following are the most important stages in the life cycle of every class based on Component:

1. Initialization:

The config object is applied

Classes that extend Component do not need to (and usually should not) provide a separate constructor. Component's constructor will not only apply any config passed into its subclasses, it also provides all of the following steps.

The base Component events are created

These are events that can be fired by any Component, and they are enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, destroy (see the Component API docs for complete details).

The component is registered in ComponentMgr

As such it will always be available via Ext.getCmp.

The initComponent method is called

This is the most important initialization step for subclasses, as this is a template method intended to be implemented by each subclass to provide any needed constructor logic. The class being created is called first, and each class in the hierarchy back up to Component is expected to call superclass.initComponent. This method makes it easy to implement and, if needed, override the constructor logic at any step in the hierarchy.

Plugins are loaded (if applicable)

If this Component has any plugins specified in the config, they will be initialized at this time.

State is initialized (if applicable)

If the Component is state-aware, its state will be reloaded if available.

The component is rendered (if applicable)

The component is rendered immediately if either renderTo or applyTo is provided in the config, otherwise rendering is deferred until the Component is explicitly displayed in code or is told to render by its container.

2. Rendering:

The beforerender event is fired

This is a cancelable event, giving any handler the ability to prevent the Component from rendering if needed.

The container is set

If no container is specified, the parent node of the Component's underlying DOM element is set as the container.

The onRender method is called

This is the most important rendering step for subclasses, as this is a template method intended to be implemented by each subclass to provide the needed rendering logic. The class being created is called first, and each class in the hierarchy back up to Component is expected to call superclass.onRender. This method makes it easy to implement and, if needed, override the rendering logic at any step in the hierarchy.

The Component is "unhidden"

By default, many components are hidden using special CSS classes like "x-hidden". If the autoShow config value is true, any "hide" classes are removed from the component at this time.

Custom class and/or style applied

All Component subclasses support the special config properties of cls and style which are a custom, user-defined CSS class and rule respectively that will be applied to the DOM element underlying this Component. Specifying the cls value is the preferred method for visually customizing a Component and its constituent parts. Since the class will get applied to the topmost wrapper element of the Component's markup, any sub-elements of the Component can be adjusted using standard CSS inheritance rules.

The render event is fired

This is a notification that the Component has been successfully rendered at this point. You can safely assume that its DOM elements are now available to your code if needed. If you attempt to access a Component prior to rendering, it won't be available and you'll get an error.

The afterRender method is called

This is another template method for subclasses that can be implemented or overridden to provide any special post-rendering logic that may be needed. Each subclass is expected to call superclass.afterRender.

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

The hidden and disabled config values are applied at this point.

Any state-specific events are initialized (if applicable)

State-aware Components can declare special events that are specific to loading and saving state. If supplied, any such events will be added.

3. Destruction :

The beforedestroy event is fired

This is a cancelable event, giving any handler the ability to prevent the Component from being destroyed if needed.

The beforeDestroy method is called

This is another template method that can be implemented or overridden to provide any special pre-destruction logic that may be needed. Each subclass is expected to call superclass.beforeDestroy.

Element and its listeners are removed

If the Component has been rendered, its underlying Element's event listeners are removed and the Element itself is then removed from the DOM.

The onDestroy method is called

This is another template method that can be implemented or overridden to provide any special post-destruction logic that may be needed. Each subclass is expected to call superclass.onDestroy. Note that the Container class (and any Container subclasses) provides a default implementation of onDestroy that automatically loops through its items collection and calls destroy on each child Component recursively.

Component is unregistered from ComponentMgr

It will no longer be available via Ext.getCmp.

The destroy event is fired

This is simply a notification that the Component has been successfully destroyed at this point and is no longer available in the DOM.

Event listeners on the Component are removed

The Component itself can have event listeners separately from its underlying Element. If any exist, they are removed.

EXTJS:

Elements

Event Handling

Widget Examples

Application Layout/scope

Ext.extend

Element:

var div = Ext.get('myDiv');

div.setWidth(100);

 174 views

15⟩ Tell me why we need JavaScript Library?

Javascript is an awesome language. It’s super flexible.Browsers are the modern UI paradigm.

The javascript Libraries now must provide a rich set of UI Widgets.

javascript libraries:

* JQuery

* Qooxdoo

* Dojo

* Prototype.js

* mootools

* extjs

 172 views

16⟩ Tell me why did you choose Ext JS?

The overall design of extjs is exemplary.One can learn a lot from it’s unified architecture – no matter which language one is programming in.

Extjs requires you to start with one of their base classes – ensuring a consitent model. Consistency is extremely important for the library to be reusable.

a.Extjs documentation seems to be very comprehensive and well maintained.

b.key aspect of the EXTJS Library is the cross-browser support.

c.Build rich Internet applications with Ext JS

d. Ext JS framework is the multitude of rich UI elements provided. These elements include forms, dialog boxes, tabs, trees, and grids.

e.The Ext JS framework includes support for Ajax implementations.

f.Ext JS integration with other Web server frameworks.

g.Ext JS framework development into several popular integrated development environments (IDEs), including Eclipse, Aptana, and Komodo.

h.Ext JS provides excellent performance.The framework is fully object oriented and extensible. Because it's written in the JavaScript language

 176 views

17⟩ Explain Ext JS development tools?

You can integrate Ext JS framework development into several popular integrated development environments (IDEs), including Eclipse, Aptana, and Komodo. For information about including Ext JS development support in your IDE of choice.

 196 views

19⟩ Explain Ext JS and Ajax?

The Ext JS framework includes support for Ajax implementations. Typically, a common feature of Ajax applications is for an application to asynchronously respond to user input by updating the UI without redisplaying the entire Web page. A typical Ext JS Ajax implementation: an HTML text field and button element that posts data in the text field to a Web server when the button is clicked.

 170 views

20⟩ Explain Integration of Ext JS?

You can use Ext JS with other common Web development server-side frameworks, including PHP, the Java™ language, Microsoft® .NET, Ruby on Rails, and ColdFusion.

 173 views