Ext-JS Interview Preparation Guide

Download PDF

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

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.

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.

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.

Ext can be used by Web Application developers who are familiar with HTML but may have little or no experience with JavaScript application development. If you are starting to build a new web application, or you are revamping an existing application, then take your time to understand the basics of the library including:

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?

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.

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)

- 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.

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