about extjs

8/3/2019 About Extjs

1/32

EXTJS ExamplesExtjs Interview Answers

1.Why we need javascript Library?

Javascript is an awesome language. Its super flexible.Browsers are the modern UIparadigm.The javascript Libraries now must provide a rich set of UI Widgets.javascript libraries:* JQuery* Qooxdoo* Dojo* Prototype.js* mootools* extjs

2. Why did you choose Ext JS?

The overall design of extjs is exemplary.One can learn a lot from its unifiedarchitecture 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 JSd. 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 developmentenvironments (IDEs), including Eclipse, Aptana, and Komodo.h.Ext JS provides excellent performance.The framework is fully object oriented andextensible. Because it's written in the JavaScript language

3. What are major Web browsers supported by Ext JS framework?* Windows Internet Explorer version 6 and later.* Mozilla Firefox version 1.5 and later (PC and Macintosh).

* Apple Safari version 2 and later.* Opera version 9 and later (PC and Mac).

4. Integration of Web development server-side frameworks with 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.

5. Where Extjs extended from ?
http://extjsexamples.blogspot.com/2010/10/extjs-interview-answers.htmlhttp://extjsexamples.blogspot.com/2010/10/extjs-interview-answers.html


2/32

Ext JS as a project to extend the functionality that the YUI Library.A key aspect ofthe YUI Library is the cross-browser support.The Extjs framework is fully objectoriented and extensible. Because it's written in the JavaScript language.

6. Extjs Ajax implementation?

A typical Ext JS Ajax implementation: an HTML text field and button element thatposts data in the text field to a Web server when the button is clicked.

7.Do you have any advice for developers using Ext for the first time?Ext can be used by Web Application developers who are familiar with HTML but mayhave little or no experience with JavaScript application development. If you arestarting 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.

8. How to access Dom element using EXTJS?

The Element API is fundamental to the entire Ext library.Using traditional Javascript, selecting a DOM node by ID is done like this:var myDiv = document.getElementById('myDiv');Using Extjs:Ext.onReady(function() {var myDiv = Ext.get('myDiv');});

9. what is the purpose of Element Object in Extjs?->Element wraps most of the DOM methods and properties that you'll need, providinga convenient, unified, cross-browser DOM interface (and you can still get direct

access to the underlying DOM node when you need it via Element.dom)->The Element.get() method provides internal caching, so multiple calls to retrievethe same object are incredibly fast->The most common actions performed on DOM nodes are built into direct, cross-browser Element methods (add/remove CSS classes, add/remove event handlers,positioning, sizing, animation, drag/drop, etc.)

10. what is syntax for Extjs Button click event?Ext.onReady(function() {Ext.get('myButton').on('click', function(){alert("You clicked the button");

});});

11. what is use of Ext.onReady() function ?Ext.onReady is probably the first method that youll use on every page. This methodis automatically called once the DOM is fully loaded, guaranteeing that any pageelements that you may want to reference will be available when the script runssyntax:


3/32

Ext.onReady(function() {alert(Congratulations! You have Ext configured correctly!);});

12. For example, to show our message when any paragraph in our test page is clicked,

what is the extjs code on paragraph click?Ext.onReady(function() {Ext.select('p').on('click', function() {alert("You clicked a paragraph");});});

or

Ext.onReady(function() {var paragraphClicked = function() {

alert("You clicked a paragraph");}Ext.select('p').on('click', paragraphClicked);});

13. List out the extjs library files to include in JSP page?ext-base.jsext-all-debug.js or ext-all.jsext-all.cssbase.css or examples.css

14. List out the css file required to apply Extjs Theme property?xtheme-gray.cssext-all.css

15. what is purpose of MessageBox?MessageBox is asynchronous.MessageBox call, which demonstrates the readable message to user.MessageBox used for multiple purpose likeExt.Msg.alert()Ext.Msg.prompt()Ext.Msg.show({});

Ext.Msg.wait();

16. write syntax for MessageBox show() method?Ext.MessageBox.show({title: 'Paragraph Clicked',msg: 'User clicked on Paragraph',width:400,buttons: Ext.MessageBox.OK,


4/32

animEl: paragraph});

17. what is method to Update the message box body text for MessageBox?updateText( [String text] ) : Ext.MessageBox

18. what is a widget?A widget is a tiny piece or component of functionality.

19.what is parent class for all stores in extjs? how many stores exists?Ext.data.Store is parent class for all stores.A Store object uses its configured implementation of DataProxy to access a dataobject unless you call loadData directly and pass in your data.subclasses for Store:GroupingStore, JsonStore, SimpleStore

20. How to handle event for a extjs component?a. using listeners config object.For ex for grid events : listeners: {rowclick: gridRowClickHandler,rowdblclick:gridRowDoubleClickHandler}b. using addListener( String eventName, Function handler, [Object scope], [Objectoptions] ) : voidAppends an event handler to this componentc. using on( String eventName, Function handler, [Object scope], [Object options] ) :voidAppends an event handler to this element (shorthand for addListener)For ex: store.on( "datachanged", function( store ){ ..... });

21. How to find no of records in a store?using store.getCount() : Gets the number of cached records.store.getTotalCount() : Gets the total number of records in the dataset as returned bythe server.

22. How to handle exception while loading datastore?using loadexception event.syntax: store.loadexception() : Fires if an exception occurs in the Proxy duringloading.use beforeload : ( Store this, Object options ) : Fires before a request is made for a

new data object. If the beforeload handler returns false the load action will becanceled.syntax:store.on('loadexception', function(event, options, response, error) {alert("Handling the error");event.stopEvent();});


5/32

23. how to handle updates for store changes?use store.commitChanges()

24. what is the purpose of each() in store?Calls the specified function for each of the Records in the cache

each( Function fn, [records Object] )

25. how to get modified records using store object?store.getModifiedRecords() : Gets all records modified since the last commit.

26. how to get record using index?store.getAt( Number index ) : Get the Record at the specified index.

27. how to get record using id?store.getById( String id ) : Get the Record with the specified id.

28. what is the purpose of load() in store?store.load() : returns booleanLoads the Record cache from the configured Proxy using the configured Reader.For remote data sources, loading is asynchronous, and this call will return before thenew data has been loaded.store.load({callback: fnCheckData, scope: this});

29. what is purpose of loadData() in store?store.loadData( Object data, [Boolean append] ) : voidLoads data from a passed data block and fires the load event.loadData(storeData,false); False to replace the existing records cache.

loadData(storeData,true) : True to append the new Records rather than replace theexisting cache.

30. How many types of layout managers exist in extjs?what are they?Layouts fall under this package Ext.layout.*Types of layouts:Absolute Layout:This is a simple layout style that allows you to position items within a container usingCSS-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 aFormLayout) where fields are sized relative to the container without hard-codingtheir dimensions.BorderLayout:Border layouts can be nested with just about any level of complexity that you might


6/32

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. Eachtab 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 astandard panel,ColumnLayout:This is a useful layout style when you need multiple columns that can have varyingcontent height.Any fixed-width column widths are calculated first, then anypercentage-width columns specified using the columnWidth config

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

31. How we can apply pagination in grid panel ?using Ext.PagingToolbar plugin, we can implement pagination to a grid panelsyntax:new Ext.PagingToolbar({pageSize: 25,store: store,

displayInfo: true,displayMsg: 'Displaying topics {0} - {1} of {2}',emptyMsg: "No topics to display",})// trigger the data store loadstore.load({params:{start:0, limit:25}});

32. what is xtype?The xtype will be looked up at render time up to determine what type of childComponent like TextField, NumberField etc to create. i,extype = Class

----------------------button = Ext.Buttontextfield = Ext.form.TextFieldradio - Ext.form.Radiogrid = Ext.grid.GridPanelcombo = Ext.form.Comboboxtoolbar = Ext.Toolbar


7/32

33. what is vtype?The validations provided are basic and intended to be easily customizable andextended.Few vtypes provided by extjs are as below:emailText : String, The error text to display when the email validation function

returns falsealphanumText : String, The error text to display when the alphanumeric validationfunction returns falseurlText : String, The error text to display when the url validation function returnsfalse

34. store.getModifiedRecords(): returns array object

35.how to get record object from store:var record = grid.getStore().getAt(rowIndex);

36. purpose of Load mask?To apply mask to page level / component level.restrict user not to access any components in pagevar pageProcessBox = new Ext.LoadMask( Ext.getBody(), { msg: 'Loading Employeedetails.' } );pageProcessBox.show();

37. purpose of renderer in grid panel?using config option,renderer: fnCellColor where fnCellColor is method to apply color to a cell.

38. how to get selection model used in a grid panel?using grid.getSelectionModel(); method

39. how to stop editing a record?newRecord.endEdit();

40. how to start editing a record?newRecord.beginEdit();

41. how to commit a record modification?newRecord.commit();

42. what is use of combo select event function?To get the selected value from a combo.using getvalue();var selectedComboValue = mycombo1.getValue();

43. how to get a value of textfield or combo box?using getvalue();var selectedValue = mytextfield.getValue();


8/32

44. how to apply css on select of combo box?using config option asemptyClass : 'emptycss', where emptycss is a css classname

45. what are components required for grid panel?store, columnmodel, id, width,height46. how to disable menu option for header in columnModel?using menuDisabled: true

47. how to hide the column in grid panel?using hidden : true

48. How to register callbacks to the load and exception events of the JsonStore?var grid = new Ext.grid.GridPanel({store: new Ext.data.JsonStore({

[...]listeners: {load: this.onLoadSuccess.crateDelegate(this),exception: this.onLoadException.createDelegate(this)}}),

onLoadSuccess: function () {// success},

onLoadException: function () {// error},

[...]}

49. extjs decode() ?var json = Ext.decode(response.responseText);Ext.Msg.alert('Error', json.error);

FAQ links:http://www.extjs.com/learn/Tutorial:Introduction_to_Ext_2.0http://blogs.yellowfish.biz/tag/extjs/Data Grid:http://loianegroner.com/2009/12/getting-started-with-extjs-datagrid/http://loianegroner.com/2010/03/extjs-and-spring-mvc-framework-crud-datagrid-example/


9/32

Extjs FAQ:---------------------------------------1.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,048characters. This limit applies to both POST request and GET request URLs.

2.Why did you choose Ext JS?http://blogs.yellowfish.biz/tag/extjs/Given the wide range of JavaScript libraries available it was important to choose theright one. We needed to choose a library that was consistent in the way that itpresents information to the user, but also consistent in the way that you code usingthe 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. Whats more is that we knew it would workcross-browser, again something not easily achieved that saves countless hours onlarge projects.

3.What features could we add to Ext to make building a rich application like PLANeteasier in the future?Once an application gets over a certain size, and customer releases become morefrequent, the burden of testing the application starts to take its toll. An Extsupported test suite would save huge amounts of time. The current problem of testsuites 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 toovercome this problem, but few currently exist. Ext could provide betterdocumentation on how to build better test cases with Ext so that more time can bespent on development rather than testing.

4.Do you have any advice for developers using Ext for the first time?Ext can be used by Web Application developers who are familiar with HTML but mayhave little or no experience with JavaScript application development. If you arestarting 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:

5.Understanding the major UI components (grid, form, tree etc)6.How to integrate your existing data with Ext?7.How to use Ext Layouts?8.The Ext Component Model?

9. ExtJS as a framework wrapping around widgets/constrols.Alternatives:Backbase Ajax Framework,jQuery,qooxdoo


10/32

http://qooxdoo.org/demohttp://yuilibrary.com/gallery/http://www.smartclient.com/

10.Extjs Vs jQuery:

ExtJs and JQuery are kind of apples and oranges. You can compare Ext Core toJQuery, and ExtJs to JQuery UI.Ext JS is a full-fledged widget library while jQuery (not jQuery UI) and Mootools areJavaScript 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.

11. Namespace importance:http://higher-order.blogspot.com/2008/02/designing-clientserver-web-applications.html

http://jquery-howto.blogspot.com/2009/01/namespace-your-javascript-function-and.htmlAn example which utilizes 3 distinctly different sets of scripts from differentorganizations. We use Ext JS for enhancements, Google Analytics for tracking siteusage and the native vBulletin scripts. You can see how all of this code from differentsources has been included in the same page.

Namespacing is important for developers in order to organize their code and ensurethat their code is not overwritten when loaded in the JavaScript interpreter. Ifanother developer defines a variable with the same name your existing definition willbe overwritten.

Because JavaScript is a functionally scoped language creating a function and/orvariable which is not wrapped in another function will result in that variable beingcreated in the global scope (window). To combat this, developers place their classesin Objects.As the client-side JavaScript included in web applications gets larger and moreadvanced, organization of 3rd party code and your own code becomes increasinglyimportant. Using namespaces will ensure your JavaScript code is safe from other codeoverwriting 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)

12. Handle load exception while datastore?13. How pagination works in grid panel?

14. extjs performance issues/ memory leak problems?


11/32

15.where to use anchor layout?

16. Do ie6 supports extjs2.2?17. A widget is a tiny piece or component of functionality.

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

- It's a hierarchical if you hold the root tag you can traverse all the elements within itusing 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 allthe 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 DOMstructure.- Node is a super object.

JSF (Java Server Faces)

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

steps:--------------------------------1.2.ASP.jar and servlets.jar3.Add core kernel JS files in the webcontent folder.Helping JS files are needed to be


12/32

placed in the specific folders.4.EXT js specific handlers needs to be used and inject your JS files into the core byusing EXT JS authorized DOM's5.Place your project in a necessary folders.

Difference between HTML and XHTML- XHTML is built on XML technology so these codes can be placed directly in XML file.

HTML- It's not hierarchical you can't spot a particular root. There may be different HTMLgroups.

Limitations1. It's not fully furnished UI.SWT is 100% furnished UI but can't be implemented in webbrowser.2.

JS- 13 basic event handlers.- 56 addons event handlers.- Opacity --> animations

DOM 2.0- stylist markup language- structural markup language- symantic markup language- 100% object oriented- Everything is an object in nature.- There are 8 objects related to EXT JS from DOMXMLDOMNodeList- It is a list of collection of objects based on condition.DOMTree - It is required for hierarchy.

Factory methods- Methods where production occurs during run time.- Mass production happens.

Requirements for a simple EXT-JS1.Call Ext-Base.js in a html file2.This file should exist under webcontent/adapter/ext - Library is added.3.Default stylesheet ext-all.css is avb under resources/css4.Have your own js file link it under HTML file if required.5.Helping js can also be called inside your HTML file.


13/32

6.Have layer to print your object. The layer is called Layer Dialog Area.7.Use onReady() inside which object can be created and declared8.Call the object with the EXT.get()9.To open a window EXT.window() to set the properties and use show() to show theresult in the monitor.

Features----------------------------------Quick tipsstatus barintegration with google mapsGrids

Yes No cancel promptprogress dialogalert

icon dialog

Dialog- dependent dialog- independent- splash

LayoutsBorder Layout is drawn from nested layout panel.- Border Layout

- Form Layout- Anchor Layout --> flexible form resizing.- Flow Layout --> Building of cool bar.

EXTJS components:Form panelBorder layoutForm panel components:combo box,textfield,html editor,numberfieldcombo box:select,change events

mode,lazyinitgrid panel:colmodel,json reader,json store,simple store methodscellclick,rowclick,clickgrid selection modelstree panel:node,event handlers


14/32

EXTJS Life cycle:------------------------------------------------Component Life CycleIn general, the Component architecture in 2.0 will "just work." It's been designed tohandle most of the management of components transparently to the end developer.

However, there will come a time when something needs to be customized, or aComponent needs to be extended. That's when a thorough understanding of theComponent life cycle will become quite helpful. Following are the most importantstages in the life cycle of every class based on Component:

1. Initialization:

The config object is appliedClasses that extend Component do not need to (and usually should not) provide aseparate constructor. Component's constructor will not only apply any config passedinto its subclasses, it also provides all of the following steps.

The base Component events are createdThese 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 ComponentMgrAs such it will always be available via Ext.getCmp.

The initComponent method is calledThis is the most important initialization step for subclasses, as this is a template

method intended to be implemented by each subclass to provide any neededconstructor logic. The class being created is called first, and each class in thehierarchy back up to Component is expected to call superclass.initComponent. Thismethod makes it easy to implement and, if needed, override the constructor logic atany step in the hierarchy.

Plugins are loaded (if applicable)If this Component has any plugins specified in the config, they will be initialized atthis 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 inthe config, otherwise rendering is deferred until the Component is explicitly displayedin code or is told to render by its container.

2. Rendering:


15/32

The beforerender event is firedThis is a cancelable event, giving any handler the ability to prevent the Componentfrom rendering if needed.

The container is set

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

The onRender method is calledThis is the most important rendering step for subclasses, as this is a template methodintended 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 toComponent is expected to call superclass.onRender. This method makes it easy toimplement 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". Ifthe autoShow config value is true, any "hide" classes are removed from the componentat this time.

Custom class and/or style appliedAll Component subclasses support the special config properties of cls and style whichare a custom, user-defined CSS class and rule respectively that will be applied to theDOM element underlying this Component. Specifying the cls value is the preferredmethod for visually customizing a Component and its constituent parts. Since theclass 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 firedThis 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 ifneeded. If you attempt to access a Component prior to rendering, it won't beavailable and you'll get an error.

The afterRender method is calledThis is another template method for subclasses that can be implemented oroverridden 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 andsaving state. If supplied, any such events will be added.


16/32

3. Destruction :The beforedestroy event is firedThis is a cancelable event, giving any handler the ability to prevent the Componentfrom being destroyed if needed.

The beforeDestroy method is calledThis is another template method that can be implemented or overridden to provideany special pre-destruction logic that may be needed. Each subclass is expected tocall superclass.beforeDestroy.

Element and its listeners are removedIf the Component has been rendered, its underlying Element's event listeners areremoved 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 provideany special post-destruction logic that may be needed. Each subclass is expected tocall superclass.onDestroy. Note that the Container class (and any Containersubclasses) provides a default implementation of onDestroy that automatically loopsthrough its items collection and calls destroy on each child Component recursively.

Component is unregistered from ComponentMgrIt will no longer be available via Ext.getCmp.

The destroy event is firedThis 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 removedThe Component itself can have event listeners separately from its underlyingElement. If any exist, they are removed.EXTJS:ElementsEvent HandlingWidget ExamplesApplication Layout/scopeExt.extend

Element:var div = Ext.get('myDiv');div.setWidth(100);

Benefits of ExtJS:------------------------------------------------------Why did you choose Ext JS?


17/32

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

With all Ext components extending the Observable class we had the ability to writeconsistent code in an event-driven manner, much like writing a desktop application,not easily achieved with other libraries. Whats more is that we knew it would workcross-browser, again something not easily achieved that saves countless hours onlarge projects.

Get to know Ext JS

Ext JS began as a project to extend the functionality that the YUI Library offered. Akey aspect of the YUI Library is the cross-browser support, which you'll also find in ExtJS. This support allows you to build Web applications without worrying about the

target browser.

Ext JS provides excellent performance. The framework is fully object oriented andextensible. Because it's written in the JavaScript language, Ext JS's features are readyto use after you download and install it.

Ext JS browser support:

The Ext JS framework is supported in all the major Web browsers, including:

* Windows Internet Explorer version 6 and later.* Mozilla Firefox version 1.5 and later (PC and Macintosh).* Apple Safari version 2 and later.* Opera version 9 and later (PC and Mac).

Design patterns and Ext JS

Developers should appreciate the well-thought-out design and implementation of ExtJS. Its object-oriented design patterns influence the relationship and interactionsbetween objects. According to Ext JS, the design patterns used in their developmentwere highly influenced by the book, Head First Design Patterns, by Freeman andFreeman (see Resources). Developers looking at the Ext JS source code will findcreational patterns, including the singleton design pattern; structural patterns,including the flyweight design pattern; and behavioral patterns, including theobserver pattern.

Build rich Internet applications with Ext JS:

Ext JS provides numerous UI elements that are essential to developing rich Internetapplications (RIAs). Ext JS includes controls such as message boxes, combo boxes,


18/32

data grids, and toolbars. In addition, layout managers allow you to specify howelements are displayed on a page. Additional features are available for working withforms and windows.

The include order for the JavaScript files can change if you are using other

frameworks. However, Ext JS is typically included in your Web application, assumingthat you've installed Ext JS in the lib/ext directory on your Web server.

UI elements:

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

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.

Ext JS and Ajax:

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

Ext JS integration with other Web server frameworks:

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. Forintegration specifics for each of these frameworks.

Ext JS development tools

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

Conclusion

Web development frameworks often promise to simplify and speed applicationdevelopment, but many fall short of that goal. Ext JS keeps its promise with an easy-to-use development model. The latest release of Ext JS version 3.0 shows that itis committed to evolving and remaining a cornerstone of RIA development.Posted by Raja at 11:09 PM2 comments

Sunday, March 7, 2010
http://extjsexamples.blogspot.com/2010/10/extjs-interview-answers.htmlhttp://extjsexamples.blogspot.com/2010/10/extjs-interview-answers.html


19/32

EXTJS Life cycle

Component Life CycleIn general, the Component architecture in 2.0 will "just work." It's been designed tohandle most of the management of components transparently to the end developer.

However, there will come a time when something needs to be customized, or aComponent needs to be extended. That's when a thorough understanding of the

Component life cycle will become quite helpful. Following are the most importantstages in the life cycle of every class based on Component:

1. Initialization:

The config object is appliedClasses that extend Component do not need to (and usually should not) provide aseparate 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 createdThese 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 calledThis is the most important initialization step for subclasses, as this is a templatemethod intended to be implemented by each subclass to provide any needed

constructor logic. The class being created is called first, and each class in thehierarchy back up to Component is expected to call superclass.initComponent. Thismethod

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

State is initialized (if applicable)If the Component is state-aware, its state will be reloaded if available.
http://extjsexamples.blogspot.com/2010/03/extjs-life-cycle_955.htmlhttp://extjsexamples.blogspot.com/2010/03/extjs-life-cycle_955.html


20/32

The component is rendered (if applicable)The component is rendered immediately if either renderTo or applyTo is provided inthe 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 firedThis is a cancelable event, giving any handler the ability to prevent the Componentfrom rendering if needed.

The container is setIf no container is specified, the parent node of the Component's underlying DOMelement is set as the container.

The onRender method is calledThis is the most important rendering step for subclasses, as this is a template methodintended 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 upto 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". Ifthe autoShow config value is true, any "hide" classes are removed from the

component at this time.

Custom class and/or style appliedAll Component subclasses support the special config properties of cls and style whichare 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 preferredmethod for visually customizing a Component and its constituent parts. Since theclass

will get applied to the topmost wrapper element of the Component's markup, anysub-elements of the Component can be adjusted using standard CSS inheritance rules.

The render event is firedThis 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


21/32

needed. If you attempt to access a Component prior to rendering, it won't beavailable and you'll get an error.

The afterRender method is calledThis is another template method for subclasses that can be implemented or

overridden to provide any special post-rendering logic that may be needed. Eachsubclass 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 andsaving state. If supplied, any such events will be added.

3. Destruction :The beforedestroy event is firedThis is a cancelable event, giving any handler the ability to prevent the Componentfrom being destroyed if needed.

The beforeDestroy method is calledThis is another template method that can be implemented or overridden to provideany special pre-destruction logic that may be needed. Each subclass is expected to

call superclass.beforeDestroy.

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

The onDestroy method is calledThis is another template method that can be implemented or overridden to provideany special post-destruction logic that may be needed. Each subclass is expected to

call superclass.onDestroy. Note that the Container class (and any Containersubclasses) provides a default implementation of onDestroy that automatically loopsthrough

its items collection and calls destroy on each child Component recursively.

Component is unregistered from ComponentMgrIt will no longer be available via Ext.getCmp.

The destroy event is fired


22/32

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

Event listeners on the Component are removedThe Component itself can have event listeners separately from its underlying

Element. If any exist, they are removed.Posted by Raja at 10:36 PM1 comments

Monday, February 15, 2010

Get to know Ext JS

Get to know Ext JS

Ext JS began as a project to extend the functionality that the YUI Libraryoffered. A key aspect of the YUI Library is the cross-browser support, whichyou'll also find in Ext JS. This support allows you to build Web applications

without worrying about the target browser.

Ext JS provides excellent performance. The framework is fully objectoriented and extensible. Because it's written in the JavaScript language, ExtJS's features are ready to use after you download and install it.

Ext JS browser support

The Ext JS framework is supported in all the major Web browsers, including:

* Windows Internet Explorer version 6 and later.* Mozilla Firefox version 1.5 and later (PC and Macintosh).* Apple Safari version 2 and later.* Opera version 9 and later (PC and Mac).

Design patterns and Ext JS

Developers should appreciate the well-thought-out design andimplementation of Ext JS. Its object-oriented design patterns influence therelationship and interactions between objects. According to Ext JS, thedesign patterns used in their development were highly influenced by thebook, Head First Design Patterns, by Freeman and Freeman (see Resources).Developers looking at the Ext JS source code will find creational patterns,including the singleton design pattern; structural patterns, including theflyweight design pattern; and behavioral patterns, including the observerpattern.

Build rich Internet applications with Ext JS:
http://extjsexamples.blogspot.com/2010/03/extjs-life-cycle_955.htmlhttp://extjsexamples.blogspot.com/2010/02/get-to-know-ext-js.htmlhttp://extjsexamples.blogspot.com/2010/03/extjs-life-cycle_955.htmlhttp://extjsexamples.blogspot.com/2010/02/get-to-know-ext-js.html


23/32

Ext JS provides numerous UI elements that are essential to developing richInternet applications (RIAs). Ext JS includes controls such as message boxes,combo boxes, data grids, and toolbars. In addition, layout managers allowyou to specify how elements are displayed on a page. Additional features

are available for working with forms and windows.

The include order for the JavaScript files can change if you are using otherframeworks. However, Ext JS is typically included in your Web application,assuming that you've installed Ext JS in the lib/ext directory on your Webserver.

UI elements:

The heart of the Ext JS framework is the multitude of rich UI elements

provided. These elements include forms, dialog boxes, tabs, trees, andgrids.

Integration of Ext JS;You can use Ext JS with other common Web development server-sideframeworks, including PHP, the Java language, Microsoft .NET, Ruby onRails, and ColdFusion.

Ext JS and Ajax:

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

Ext JS integration with other Web server frameworks:

You can use Ext JS with other common Web development server-side

frameworks, including PHP, the Java language, Microsoft .NET, Ruby onRails, and ColdFusion. For integration specifics for each of theseframeworks.

Ext JS development tools


24/32

You can integrate Ext JS framework development into several popularintegrated development environments (IDEs), including Eclipse, Aptana, andKomodo. For information about including Ext JS development support inyour IDE of choice.

Conclusion

Web development frameworks often promise to simplify and speedapplication development, but many fall short of that goal. Ext JS keeps itspromise with an easy-to-use development model. The latest release of ExtJS version 3.0 shows that it is committed to evolving and remaining acornerstone of RIA development.Posted by Raja at 2:33 AM1 comments

Friday, December 4, 2009

ExtJs URL's

http://extjs.com/learn/http://examples.extjs.eu/

http://extjs.com/forum/showthread.php?p=71636#post71636(EXT forumurl see reply)

1 http://blog.taragana.com/index.php/archive/how-to-make-ajax-calls-with-extjs-easily/ (ajax call for jsp from extjs)

2 http://extjs.com/forum/showthread.php?t=3987 (tree docs)3 http://extjs.com/forum/archive/index.php/f-5-p-20.html(Ext js queries)

4 http://extjs.com/forum/showthread.php?t=10002(Store Grid Data in DBExample)

5http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list,_create,_edit,_delete_function(grid example with java paging)

6 http://extjs.com/forum/archive/index.php/t-10805.html(updating griddata into DB)
http://extjsexamples.blogspot.com/2010/02/get-to-know-ext-js.htmlhttp://extjsexamples.blogspot.com/2010/02/get-to-know-ext-js.htmlhttp://extjsexamples.blogspot.com/2009/12/extjs-links.htmlhttp://extjsexamples.blogspot.com/2010/02/get-to-know-ext-js.htmlhttp://extjsexamples.blogspot.com/2009/12/extjs-links.html


25/32

7 http://extjs.com/forum/archive/index.php/t-7241.html(object does notsupport )

8 http://extjs.com/forum/archive/index.php/f-5-p-17.html types pf errorsin ext js

9 http://75.126.167.146/forum/showthread.php?p=42670 keep xml on jsnot on WEB-INF

10 http://extjs.com/forum/archive/index.php/t-11642.html_25.rows[_22]has no propery error

11 http://www.sk-typo3.de/ExtJS-Filter-Grid.345.0.html?PHPSESSID=9fe1cc70eb7e7ca3e14d496d35e47f27(filter grid data using

combobox)

12 http://ffzhuang.blogspot.com/(nice doc on new technologiesajax,srping,yui...)

13http://extjs.com/learn/Tutorial:Using_Ext_grid_form_dialog_to_achieve_paging_list,_create,_edit,_delete_function(good doc for paging with javaand Json)

14 http://extjs.com/forum/showthread.php?p=71636#post71636(EXT forumurl see reply)

2.0 sampleshttp://www.extjs.com/deploy/dev/examples/samples.html

Record edit panelhttp://recordform.extjs.eu/

http://www.dojochina.com/?q=node/799(Live search) http://extjs.com/deploy/dev/examples/form/forum-search.htmlhttp://extjs.com/deploy/dev/examples/form/forum-search.js

EXT.ux (User extensions)http://extjs.com/forum/forumdisplay.php?f=21


26/32

htmleditor in a window (Form panel in window)http://extjs.com/forum/showthread.php?t=25551

Tree+checkbox in 2.0 in JSP

http://extjs.com/forum/showthread.php?t=27267

Menu in Form Panel ina window:http://extjs.com/forum/showthread.php?t=29884

large grid data in a window:(demo)http://www.siteartwork.de/livegrid_demo/http://extjs.com/forum/showthread.php?p=84902#post84902

Other Plug-ins;

Ext JS LiveGrid Component: http://www.siteartwork.de/livegridLive Grid:http://extjs.com/forum/showthread.php?p=84902#post84902

Ext.ux.YoutubePlayer: http://www.siteartwork.de/youtubeplayerExt.ux.Wiz (wizard-component):http://www.siteartwork.de/wizardcomponenthttp://www.siteartwork.de

editable grid: add colors to rows & images in grid column

http://extjs.com/forum/showthread.php?t=18435&highlight=gridPanel------------------------------

ExtJs 2.1 :http://extjs.com/deploy/dev/docs/

EXTJS2.0 links:http://www.gwt-ext.com/demo/http://extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/

Aptana:lib file for aptana:http://orsox.mocis.at/download.php?view.1

downloads:http://www.aptana.com/node/350

plug-ins


27/32

http://www.aptana.com/search/node/aptana+plug-in+for+eclipsehttp://update.aptana.com/install/3.2/http://www.linuxjournal.com/article/9620

EXTJS:

http://extjswordpress.net/theme-revealed/http://www.ajaxrain.com/tagcloud.php?tag=extjs#scripthttp://extjs.com/explorer/#overview (codes- demos)

http://extjs.com/forum/archive/index.php/t-3107.htmlhttp://extjs.com/forum/showthread.php?t=15982http://extjs.com/forum/showthread.php?p=68611#post68611http://extjs.com/forum/showthread.php?t=13736&highlight=editable+gridpanel

Example Layout site:http://examples.extjs.eu/

forums for Extjs:http://inezha.com/p/7631575?PageIndex=10http://extjs.com/forum/archive/index.php/t-8353.html

Combo control:http://extjs.com/forum/archive/index.php/t-26959.html

Number field in Grid:http://extjs.com/forum/showthread.php?p=148459

Grid Row color:http://www.hastentechnologies.com/blog/post/ExtJs-Tips-for-GridPanel-Row---Marking2c-Colouring2c-Focusing--Special-Key-Event-Firing.aspx

Editable Grid syntax function:http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22802044.html

Grid video :www.youtube.com/watch?v=qQWJtfW5Ovs

Json Grid samplehttp://extjs.org.cn/extjs/examples/grid/json-grid.html


28/32

Xtemplate:http://www.experts-exchange.com/Programming/Languages/Scripting/AJAX/Q_23497098.html

Dataview problems:

http://extjs.com/forum/showthread.php?p=135936

Good Examples:http://examples.extjs.eu/

All ExtJS2.0 forums:http://extjs.com/forum/archive/index.php/f-9-p-22.html

EXTjs + FCK editor:http://extjs.com/forum/archive/index.php/t-19839.html

EXTJS Editor Grid forum: for complete use of Editable Gird - AJAX ::::http://extjs.com/forum/showthread.php?t=18435

FormPanel (xtype submit)http://www.extjs.com/deploy/dev/examples/statusbar/statusbar-advanced.htmlhttp://extjs.com/forum/archive/index.php/t-10666.htmlhttp://extjs.com/forum/archive/index.php/t-10666.html

Load data from xml:(FormPanel)http://www.extjs.com/deploy/dev/examples/form/xml-form.html

Posted by Raja at 11:24 PM0 commentsOlder PostsHomeSubscribe to: Posts (Atom)

Find moreTop of Form

poweredby

Bottom of Form

Gallery Box
http://extjsexamples.blogspot.com/2009/12/extjs-links.htmlhttp://extjsexamples.blogspot.com/search?updated-max=2009-12-04T23:24:00-08:00&max-results=7http://extjsexamples.blogspot.com/http://extjsexamples.blogspot.com/feeds/posts/defaulthttp://extjsexamples.blogspot.com/2009/12/extjs-links.htmlhttp://extjsexamples.blogspot.com/search?updated-max=2009-12-04T23:24:00-08:00&max-results=7http://extjsexamples.blogspot.com/http://extjsexamples.blogspot.com/feeds/posts/default


29/32
http://www.flickr.com/photos/60090559@N05/5623828720/http://www.flickr.com/photos/the-g-uk/5771197923/http://www.flickr.com/photos/61591144@N03/5737986705/http://www.flickr.com/photos/ciscoibsg/5730410889/http://www.flickr.com/photos/notionscapital/5818602708/http://www.flickr.com/photos/martingrohs/5672147008/


30/32
http://www.flickr.com/photos/shorby/5899441383/http://www.flickr.com/photos/butterflybird/5752267261/http://www.flickr.com/photos/jorgosphotos/5974983558/http://www.flickr.com/photos/53566630@N05/5939521616/http://www.flickr.com/photos/dalbao/5617100306/http://www.flickr.com/photos/notionscapital/6018657069/


31/32

Blog Archive
http://www.flickr.com/photos/james__clayton/5703049476/http://www.flickr.com/photos/ciscoibsg/5730411681/http://www.flickr.com/photos/ciscoibsg/5730959946/http://www.flickr.com/photos/65819195@N00/5882147515/http://www.flickr.com/photos/solutionsinsurance/5790452110/http://www.flickr.com/photos/armydre2008/6012029995/http://www.flickr.com/photos/61913510@N07/5655108970/http://www.flickr.com/photos/berniethomas68/690815709/


32/32

2010 (3)

October(1)

Extjs Interview Answers

March (1)

February (1)

2009 (3)

Is Ext JS easy to learn?

Followers

About Me

RajaLearn 2 Live.. Live 2 Learn..

View my complete profile
http://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=3http://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/2010_10_01_archive.htmlhttp://extjsexamples.blogspot.com/2010/10/extjs-interview-answers.htmlhttp://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/2010_03_01_archive.htmlhttp://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/2010_02_01_archive.htmlhttp://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/search?updated-min=2009-01-01T00:00:00-08:00&updated-max=2010-01-01T00:00:00-08:00&max-results=3http://www.blogger.com/profile/12693415331870475091http://www.blogger.com/profile/12693415331870475091http://www.blogger.com/profile/12693415331870475091http://www.blogger.com/profile/12693415331870475091http://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/search?updated-min=2010-01-01T00:00:00-08:00&updated-max=2011-01-01T00:00:00-08:00&max-results=3http://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/2010_10_01_archive.htmlhttp://extjsexamples.blogspot.com/2010/10/extjs-interview-answers.htmlhttp://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/2010_03_01_archive.htmlhttp://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/2010_02_01_archive.htmlhttp://tmp/svn47.tmp/javascript:void(0)http://extjsexamples.blogspot.com/search?updated-min=2009-01-01T00:00:00-08:00&updated-max=2010-01-01T00:00:00-08:00&max-results=3http://www.blogger.com/profile/12693415331870475091http://www.blogger.com/profile/12693415331870475091

about extjs

Documents