Manual ExtCore 3

7/30/2019 Manual ExtCore 3

1/44

ExtCore 3.0 Manual

Written by techbughttp://techbug.tistory.com

http://extjs.com/products/extcore/manual/index.php.
http://techbug.tistory.com/http://extjs.com/products/extcore/manual/index.phphttp://extjs.com/products/extcore/manual/index.phphttp://extjs.com/products/extcore/manual/index.phphttp://techbug.tistory.com/


2/44

ExtCore Overview

Ext Core is a lightweight and feature rich core JavaScript library available under an MIT license. Ext Core is packed

full of exciting features intended to allow for rapid web development while encouraging well designed and scalable

code. This library provides abstractions for DOM manipulation/traversal, Ajax, Events and custom events,animations, templating, OO mechanisms and more. Ext Core is released under an MIT license and is perfect for

inclusion in a dynamic webpage or even a small application.

Download

Ext Core can be downloadedhereand the latest information can be found on theExt Core Project Page.

Including Ext Core

Ext Core ships with both a debug version as well as a production version. The production version has been minified

(whitespace, carriage returns and comments removed) and obfuscated (all local variables have been renamed to

shorter versions) using YUI Compressor. You should always use the -debug version when developing since you'll

receive more informative (ie: unobfuscated) error messages.

To include the Ext Core library's development version, simply include the following JavaScript file:

And for the production version (25k compressed and gzipped), simply remove "-debug":

That's it. There is no css file to include with Ext Core.

Simple Example

After you have included Ext Core to your web page, try out the following code to check if everything working

correctly

Ext.onReady(function() {

Ext.DomHelper.append(document.body, {tag: 'p', cls: 'some-class'});

Ext.select('p.some-class').update('Ext Core successfully injected');

});

About

The Ext Core Manual was authored by Tommy Maintz, Aaron Conran, James Donaghue, Jamie Avins & Evan

Trimboli. Thank you to all reviewers who reviewed the manual prior to its release. We are currently looking for

translations to all other languages.

The Ext Core Manual is licensed under the GNU FDL,GNU Free Documentation License.

Copyright (C) 2009 Ext JS, LLC.

Permission is granted to copy, distribute and/or modify this document

under the terms of the GNU Free Documentation License, Version 1.3

or any later version published by the Free Software Foundation;

with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.

A copy of the license is included in the section entitled "GNUFree Documentation License".
http://extjs.com/products/extcore/download.phphttp://extjs.com/products/extcore/download.phphttp://extjs.com/products/extcore/download.phphttp://extjs.com/products/extcore/http://extjs.com/products/extcore/http://extjs.com/products/extcore/http://www.gnu.org/copyleft/fdl.htmlhttp://www.gnu.org/copyleft/fdl.htmlhttp://www.gnu.org/copyleft/fdl.htmlhttp://www.gnu.org/copyleft/fdl.htmlhttp://extjs.com/products/extcore/http://extjs.com/products/extcore/download.php


3/44


4/44

Ext.Elements

Getting Ext.Elements

An HTML Document typically consists of a lot of html markup. When the browser loads your html document, each

tag in your markup get translated into an HTMLElement and the browser builds aDocument Object Model(DOM)

tree of the markup. This DOM tree is saved in the browser's global scope in a variable called document. This

document variable holds a reference to every piece of markup which has been loaded on the page.

The documentobject provides an important method namedgetElementById. This method allows you to retrieve

the underlyingHTMLElementin any browser. However, you should be mindful that there are many differences

among browsers when directly manipulating the DOM. Ext Core implements a class named Ext.Element

which wraps around typical HTMLElement's providing you cross-browser support.

Ext.Element has the most methods out of any class in the Ext Core library. These methods can be categorized as

follows:

CSS & Styling

(eg: setStyle, addClass)

Dom Querying or Traversal

(eg: query, select, findParent)

Dom Manipulation

(eg: createChild, remove)

Dimensions

(eg: getHeight, getWidth)

You can use the method Ext.get to create an instance of an Ext.Element which wraps around any HTMLElement.

For example, if your markup had an element with an id of 'myElementId' you could retrieve it like this.

var el = Ext.get('myElementId');

UsingFirebug, try executing the following code. Observe the methods exposed by Ext.Element. Remember that

because you are looking at the raw JS Object, both public as well as private methods are visible. When in doubt,

consult the API documentation.


console.dir(el);

console.diris a method provided by Firebug which will dump out the contents of an object in an easily viewable

format. It also allows you to expand and collapse sub-objects which have additional properties. Properties are

shown in the color black. Methods/Functions are green; constructors or classes in red.

Now let's try interacting with the paragraph above which has an id ofmyElementId.


el.addClass('error');
https://developer.mozilla.org/En/DOMhttps://developer.mozilla.org/En/DOMhttps://developer.mozilla.org/En/DOMhttps://developer.mozilla.org/en/DOM/document.getElementByIdhttps://developer.mozilla.org/en/DOM/document.getElementByIdhttps://developer.mozilla.org/en/DOM/document.getElementByIdhttps://developer.mozilla.org/en/DOM/elementhttps://developer.mozilla.org/en/DOM/elementhttps://developer.mozilla.org/en/DOM/elementhttp://www.getfirebug.com/http://www.getfirebug.com/http://www.getfirebug.com/http://getfirebug.com/console.htmlhttp://getfirebug.com/console.htmlhttp://getfirebug.com/console.htmlhttp://www.getfirebug.com/https://developer.mozilla.org/en/DOM/elementhttps://developer.mozilla.org/en/DOM/document.getElementByIdhttps://developer.mozilla.org/En/DOM


5/44

After executing this code, the font color in the paragraph above will change to red. This page has a CSS rule which

changes all elements with a class of error to the color red. The CSS rule looks like this:

.error {

color: red;

}

The next section on Ext.Element (CSS Classes & Styling) will cover many ways to interact with with your elements'

CSS classes and styling.

Introducing the Flyweight

TheFlyweight Design Patternis a pattern used to minimize memory usage by creating a single global object and

then re-using that object over and over again. Ext creates a global Ext.Element to use as the Flyweight when it

starts up. This global flyweight instance can then be used to target any node in the Dom. To access this flyweight

object you can use the Ext.fly method. Those new to Ext often express confusion about whether to use Ext.get or

Ext.fly:

Whenever a reference to an Ext.Element is required to be saved for later use, use the Ext.get method. For times

when you don't need to store a reference to the element, you can use the shared flyweight Ext.Element across the

library. To access this flyweight object, use the method Ext.fly(elementId).

Let's remove the error class from the paragraph above.

Ext.fly('myElementId').removeClass('error');

When this code was executed, Ext was able to re-use the existing shared flyweight object and did not have to

instantiate a brand new instance of an Ext.Element. The fly method is appropriate in situations executing a single,

one-lined, atomic operation. You never want to try to store a reference to the flyweight object, since it is subject

to change by some other snippet of code. For an example, let's take a look at the following example.

var el = Ext.fly('foo');

Ext.fly('bar').frame();el.addClass('error');

frame is a highlighting effect that is included in the animation package of Ext.Element. What do you think the

results would be?

The answer is that the element with an id of bar will have the frame effect applied to it and then immediately after

it will also have the CSS class of error applied to it. Nothing will happen to the element with an id of foo, because

the reference elpoints to the global flyweight which was overwritten when we used the frame effect on bar. If you

did not expect this, re-read the section about flyweights as it is an important concept if you wish to use the Ext.fly

method.

Ext.getExt.get takes an HTMLElement, Ext.Element, String id as a parameter and returns a new instance of an

Ext.Element.

All three of the following return an Ext.Element:

var el1 = Ext.get('elId'); // takes an element id

var el2 = Ext.get(el1); // takes an Ext.Element

var el3 = Ext.get(el1.dom); // takes an HTMLElement

Ext.flyExt.fly takes the same argument as Ext.get but it returns a reference to an internally managed flyweight instance

of an Ext.Element. Never store a reference to the flyweight object as it will change per invocation of this method.

It is intended purely as a mechanism to enhance performance by circumventing the need to instantiate a newExt.Element when a reference in not needed (eg: if you just want to perform an action).

Here is an example of using Ext.fly:
http://en.wikipedia.org/wiki/Flyweight_patternhttp://en.wikipedia.org/wiki/Flyweight_patternhttp://en.wikipedia.org/wiki/Flyweight_patternhttp://en.wikipedia.org/wiki/Flyweight_pattern


6/44

// We want to perform only one discrete action on this element.

Ext.fly('elId').hide();

Ext.getDomExt.getDom returns a dom node for the passed in String (id), dom node, or Ext.Element.

Here are some examples:

// gets dom node based on id

var elDom = Ext.getDom('elId');// gets dom node based on the dom node

var elDom1 = Ext.getDom(elDom);

// If we don't know if we are working with an

// Ext.Element or a dom node use Ext.getDom

function(el){

var dom = Ext.getDom(el);

// do something with the dom node

}

CSS Clases & Styling

We have learned about markup, how that relates to the document and the methods that Ext Core provides making

it easy to retrieve that data. What about the layout of the document though? How do we manipulate the layout

and styling of the document? The answer is to useCascading Style Sheets (CSS)styling. CSS is the language by

which we can control layout and visual information about our page. Ext Core makes it really easy to manipulate

the style of elements in the document through classes or by modifying styles directly.

myCls {

color: #F00;

}

...

Hello

In the example above the class 'myCls' is applied to the div giving the text 'Hello' a visual color of red (#F00).

Now that we have already learned about firebug, take a look some more of the wonderful tools that it has to offer

us. Right click on any element in the page and choose "Inspect Element". Now in firebug we can see the dom tree

and where that element is located. If you look to the right of that tree you will see a panel with all of the styles

applied to that element.

If you're not yet familiar with using FireBug, pause now and learn all about it -- it's the oscilloscope of web-
http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/


7/44

development. Inspect-element comes in handy for changing styles on an existing site or creating and debugging

styles on a new site. So lets explore the methods that Ext Core provides to make css modifications easier for you.

addClassTo easily add a class to an element:

Ext.fly('elId').addClass('myCls'); // adds the class 'myCls' to the element

radioClassAdd class in one element and remove that same class if it exists from all of its siblings in one call.

// add the class 'myCls' to the element and remove that same class from

// all sibilings.

Ext.fly('elId').radioClass('myCls');

removeClassRemove one or more classes from an element.

Ext.fly('elId').removeClass('myCls'); // remove the class from the element

toggleClassToggle a class on/off. If it isn't applied to the element it will be, it is is then it will be removed.

Ext.fly('elId').toggleClass('myCls'); // the class is addedExt.fly('elId').toggleClass('myCls'); // the class is removed

Ext.fly('elId').toggleClass('myCls'); // the class is added again

hasClassCheck to see if the element has the class applied.

if (Ext.fly('elId').hasClass('myCls')) {

// it has the class

}

replaceClassReplace the class a with class b.

Ext.fly('elId').replaceClass('myClsA', 'myClsB');

getStyleGets a normalized (currentStyle and computed style) property from the element.

var color = Ext.fly('elId').getStyle('color');

var zIndx = Ext.fly('elId').getStyle('z-index');

var fntFmly = Ext.fly('elId').getStyle('font-family');

// ... etc.

setStyleSet style properties on an element. Takes a string or an object literal.

Ext.fly('elId').setStyle('color', '#FFFFFF');

Ext.fly('elId').setStyle('z-index', 10);

Ext.fly('elId').setStyle({

display : 'block',

overflow : 'hidden',

cursor : 'pointer'

});

// animate the transition of color

Ext.fly('elId').setStyle('color', '#FFFFFF', true);// animate the transition of color with a duration of .75 seconds

Ext.fly('elId').setStyle('color', '#FFFFFF', {duration: .75});

// ... etc.


8/44

getColorGets a normalized (6 digit hex) color value for the passed in property, accepts a default value if the property is not

set and a prefix (# is the default).

Ext.fly('elId').getColor('background-color');

Ext.fly('elId').getColor('color');

Ext.fly('elId').getColor('border-color');

// ... etc.

setOpacitySets the opacity of the element.

Ext.fly('elId').setOpacity(.5);

Ext.fly('elId').setOpacity(.45, true); // animates

// animates with a duration of half a second

Ext.fly('elId').setOpacity(.45, {duration: .5});

clearOpacityClears any opacity settings of the element.

Ext.fly('elId').clearOpacity();

Dom Traversal

Frequently we want to navigate around the dom tree from any given position that we are working in. Ext Core

provides many useful cross browser methods that give you trememndous power in traversing up, down and all

around the dom. Again CSS comes to the rescue when we want to perform complex navigations rather easily. The

use of CSS3 selectors has a powerful application in this domain. Take the following markup:

.red {

color: #F00;

}

...

a-one

a-two

a-three

a-four

b-one

b-two

b-three

Now say you have a requirement to make every other list item have red text. Ext Core allows you to solve this

elegantly with the following one-liner.

Ext.fly('elId').select('li:nth-child(2n)').addClass('red');

Here is the result:


9/44

Now that we've seen some of the power in Ext Core's Dom Traversal API, lets explore more:

isTests the current element to see if it matches the selector.

var el = Ext.get('elId');

if (el.is('p.myCls')) {

// do something

}

findParentFinds a parent node that matches the selector, starts at the current node.

Ext.fly('elId').findParent('div'); // returns a dom node

Ext.fly('elId').findParent('div', 4); // looks up 4 parent nodes

Ext.fly('elId').findParent('div', null, true); // returns an Ext.Element

findParentNodeFinds a parent node that matches the selector, starts at the parent node.

Ext.fly('elId').findParentNode('div');

upFinds a parent node that matches the selector, starts at the parent node. This returns an Ext.Element

Ext.fly('elId').up('div');

Ext.fly('elId').up('div', 5); // only looks up 5 parents

selectSelect takes a query and returns an Ext.CompositeElement or an array of Ext.Elements. Also if you call this from

an element it is used as the root to start the query, if it is called from Ext.select the entire document is searched.

// CompositeElement of results is returned

Ext.fly('elId').select('div:nth-child(2)');

// Array of elements is returned

Ext.fly('elId').select('div:nth-child(2)', true);

// Entire document is searchedExt.select('div:nth-child(2)');

querySelect takes a query and returns an array of dom nodes. Takes an optional root element as a second argument, if

this is not present it defaults to document root.

Ext.query('div:nth-child(2)'); // Array of dom nodes that matched the selector

childChild selects a single child at any given depth below the current element based on the passed in selector.

Ext.fly('elId').child('p.highlight'); // returns an Ext.Element

Ext.fly('elId').child('p.highlight', true); // returns a dom node

downSelects a single direct child based on the passed in selector.


10/44

Ext.fly('elId').down('span'); // returns an Ext.Element

Ext.fly('elId').down('span', true); // returns a dom node

parentGets the parent node for this element. If a selector is passed in it will go up the chain looking for a match.

// grabs the parent node as and Ext.Element

Ext.fly('elId').parent();

// grabs the parent node as a dom nodeExt.fly('elId').parent("", true);

// grabs the first parent that is a div, returns Ext.Element

Ext.fly('elId').parent("div");

nextGets the next sibling skipping text nodes. If a selector is passed in it will filter for that selector.

// grabs the next sibling node as and Ext.Element

Ext.fly('elId').next();

// grabs the next sibling node as a dom node

Ext.fly('elId').next("", true);// grabs the next sibling node that is a div, returns Ext.Element

Ext.fly('elId').next("div");

prevGets the previous sibling skipping text nodes. If a selector is passed in it will filter for that selector.

// grabs the previous sibling node as and Ext.Element

Ext.fly('elId').prev();

// grabs the previous sibling node as a dom node

Ext.fly('elId').prev("", true);

// grabs the previous sibling node that is a div, returns Ext.Element

Ext.fly('elId').prev("div");

firstGets the first sibling skipping text nodes. If a selector is passed in it will filter for that selector.

// grabs the first sibling node as and Ext.Element

Ext.fly('elId').first();

// grabs the first sibling node as a dom node

Ext.fly('elId').first("", true);

// grabs the first sibling node that is a div, returns Ext.Element

Ext.fly('elId').first("div");

lastGets the last sibling skipping text nodes. If a selector is passed in it will filter for that selector.

// grabs the last sibling node as and Ext.Element

Ext.fly('elId').last();

// grabs the last sibling node as a dom node

Ext.fly('elId').last("", true);

// grabs the last sibling node that is a div, returns Ext.Element

Ext.fly('elId').last("div");


11/44

Manipulation

Elements

In a dynamic page one of the most frequent tasks is to create or remove elements in the DOM. Due to

inconsistencies between browsers this can prove to be a challenging task. Ext Core provides a stong API that

abstracts these cross browser inconsistencies and is internally optimized for efficiency. We can easily add, remove

or replace nodes in the Dom tree at any position we want relative to siblings and parents using Ext Core's Dom

Manipulation API. Let's take a look for ourselves -- observe the following markup:

paragraph one

paragraph two

paragraph three

Here is a screenshot of the markup:

Lets create a new node and insert this as a first child of 'elId':

Ext.fly('elId').insertFirst({

tag: 'p',

html: 'Hi I am the new first child'

});

Now we can see that our node was inserted:

Easy enough! -- lets explore some of the more powerful mainuplation API's provided by Ext Core:

appendChildAppends the passed element(s) to this element.

var el = Ext.get('elId1');

// append the dom node with this id.

Ext.fly('elId').appendChild('elId2');

// append an Ext.Element

Ext.fly('elId').appendChild(el);

// append the result of an array of selectors

Ext.fly('elId').appendChild(['elId2','elId3']);

// append a straight dom node

Ext.fly('elId').appendChild(el.dom);

// append a CompositeElement of all divs

Ext.fly('elId').appendChild(Ext.select('div'));

appendToAppends this element to the passed in element.


12/44


Ext.fly('elId').appendTo('elId2'); // append to the dom node with this id.

Ext.fly('elId').appendTo(el); // append to the Ext.Element el

insertBeforeInserts this element before the passed in element.


// inserts before the dom node with this id.

Ext.fly('elId').insertBefore('elId2');

// inserts before the Ext.Element el

Ext.fly('elId').insertBefore(el);

insertAfterInserts this element after the passed in element.


// inserts after the dom node with this id.

Ext.fly('elId').insertAfter('elId2');

// inserts after the Ext.Element el

Ext.fly('elId').insertAfter(el);

insertFirstTakes an element, id, or DomHelper config and inserts the existing node or creates a new element from the

DomHelper config as the first child of this element.


// inserts the dom node with this id as the first child.

Ext.fly('elId').insertFirst('elId2');

// inserts the Ext.Element el as the first child

Ext.fly('elId').insertFirst(el);

// creates a new node with the DomHelper config and inserts

// the result as the first child.

Ext.fly('elId').insertFirst({

tag: 'p',

cls: 'myCls',html: 'Hi I am the new first child'

});

replaceReplace the passed in element with this element.


// replaces the element with id 'elId2' with 'elId'.

Ext.fly('elId').replace('elId2');

// replaces the element with id 'elId1' with 'elId'Ext.fly('elId').replace(el);

replaceWithTakes an element, id, or DomHelper config and replaces this element with the existing node or the newly created


13/44

element from the DomHelper config.


Ext.fly('elId').replaceWith('elId2'); // replaces 'elId' with 'elId2'.

Ext.fly('elId').replaceWith(el); // replaces 'elId' with 'elId1'

// creates a new node with the DomHelper config

// and replaces 'elId' with this node.

Ext.fly('elId').replaceWith({

tag: 'p',

cls: 'myCls',

html: 'Hi I have replaced elId'

});

DomHelper configs

In the examples above, perhaps you notice the following:

.insertFirst({tag: 'p',

html: 'Hi I am the new first child'

});

You may have wondered what the 1st argument to insertFirst is. This is a DomHelper config which represents the

markup to be created. DomHelper configs support many properties for specifying child nodes, such as html

fragments and DomNode attributes (css classes, url, src, id, etc). Here are some of the API's available on

Ext.Element that allow you to interact directly with Ext.DomHelper:

createChildCreates the passed DomHelper config and appends it to this element or optionally inserts it before the passed childelement.


var dhConfig = {

tag: 'p',

cls: 'myCls',


};

// creates a new node and appends it to 'elId'.

el.createChild(dhConfig);

// creates a new node and inserts before el's first child.

el.createChild(dhConfig, el.first());

wrapWraps this element with a newly created element

Ext.fly('elId').wrap(); // wraps elId with a div

// wraps elId with the newly create element

Ext.fly('elId').wrap({

tag: 'p',cls: 'myCls',


});


14/44

Html Fragments

Html fragments are just what they sound like, fragments of html markup. Ext Core provides the ability to modify

the dom with html fragments, allowing you to focus upon just those fragments of markup that you intend to

modify the dom with, freeing you from browser implementation and performance worries. Ext Core does all of that

for you -- all you need to do is provide the markup. For example, given the following markup:

onetwo

three

four

What do you think the following Ext Core code will do?

Ext.fly('elId').insertHtml('beforeBegin', '

Hi
')
Lets take a look at the markup afterward:

Hi

one

two

three

four

Suprised? That's because we are able to specify the relative position where we want this markup applied. We

specified 'beforeBegin'. What about this:

Ext.fly('elId').insertHtml('afterBegin', '

Hi
')
Lets take a look:

Hi

one

two

three

four

Now we will use 'beforeEnd'.

Ext.fly('elId').insertHtml('beforeEnd', '

Hi
')
Lets take a look:

one

two

three

four

Hi

And finally lets look at 'afterEnd'.


15/44

Ext.fly('elId').insertHtml('beforeEnd', '

Hi
')
Lets take a look:

one

two

three

four

Hi

The following API is yeaprovided for you to work with html fragments.

insertHtmlInserts an html fragment into this element. You need to specify where (beforeBegin, beforeEnd, afterBegin,

afterEnd) the fragment and can optionally specify if you want an Ext.Element returned instead of the dom node.

Ext.fly('elId').insertHtml(

'beforeBegin',

'


16/44

Event handling poses one of the most troublesome differences among the browsers. Ext Core abstracts the

differences you would encounter to achieve cross-browser event handling. If you were to use each browser's

native event handling mechanism you need to use different methods to register and unregister events in addition

to a myriad of other frustrating inconsistencies.

Ext Core provides a rich event model which frees one from these differences by using a single clean, consistent

interface. Just as Ext.Element wraps around a native Dom node, Ext Core will also wrap the browser's native

event-object with an instance of Ext.EventObject. Ext.EventObject normalizes cross-browser differences, such as

which mouse button is clicked, keys pressed, mechanisms to stop event-propagation along with a method toprevent default actions from taking place.

To tie an event handler to an element on the page we will use the on method of Ext.Element. The on method is a

preferred shorthand for addListener. The first argument specifies which event to subscribe to and the second

argument specifies the function to run when that event occurs.

Ext.fly('myEl').on('click', function(e, t) {

// perform an action on click of myEl

// e is an Ext.EventObject describing what occured

// t is the target HTMLElement

});

Ext Core normalizes the arguments of all Dom events. The event handler which is tied to the event will always

receive a normalized event object (Ext.EventObject) and the target HTMLElement.

Let's take a look at the API provided for Event Handling:

addListener/onAppends an event handler to this element. The shorthand version on is equivalent and preferred for concise code.


el.on('click', function(e,t) {

// e is a normalized event object (Ext.EventObject)

// t the target that was clicked, this is an Ext.Element.// this also points to t.

});

removeListener/unRemoves an event handler from this element. The shorthand version un is equivalent.


el.un('click', this.handlerFn);

// or

el.removeListener('click', this.handlerFn);

Ext.EventObjectEventObject exposes a cross-browser consistent event model mimicking the standard W3C methods if necessary.

// e is not a standard event object, it is a Ext.EventObject

function handleClick(e){

e.preventDefault();

var target = e.getTarget();

...

}

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

myDiv.on("click", handleClick);

//or

Ext.EventManager.on('myDiv', 'click', handleClick);

Ext.EventManager.addListener('myDiv', 'click', handleClick);


17/44

Advanced Event Handling

Ext Core has several convenience configurations for more advanced event handling techniques such as event

delegation, buffering, and delays.

delegationEvent delegation is a technique that is used to reduce memory consumption and prevent exposure to memory-

leaks. The basic idea is this:

Rather than registering an event handler for each element in a group of elements, register it once in a container

element taking advantage of the bubbling phase in the event life-cycle and centralize the event-handling at the

container level.

This doesn't mean that you want to register one global handler on the body element, as any action on the page

that fired an event would bubble up to that handler and probably have the reverse effect, actually degrading

performance. This technique is extremely useful in situations like a drop-down, a calendar, etc. Anywhere you

have a group of elements that can be directly or almost directly contained by a container element. Lets take a

look:

Take the following markup:

Instead of registering a handler directly upon each list item as follows:

Ext.fly('btn-edit').on('click, function(e,t) {

// handle the event

});

Ext.fly('btn-delete').on('click, function(e,t) {

// handle the event});

Ext.fly('btn-cancel').on('click, function(e,t) {

// handle the event

});

To use the event delegation technique instead, registering just one handler on the container along with

accompanying logic:

Ext.fly('actions').on('click, function(e,t) {

switch(t.id) {

case ''btn-edit':

// handle the event

break;

case 'btn-delete':

// handle the event

break;

case 'btn-cancel':

// handle the event

break;

}

});Because events bubble up the dom hierarchy, they will reach the handler that we registered on the 'actions' div.

We then use a simple switch to execute the required code. This approach scales well because we can add many

different child elements and still maintain a single event handler.


18/44

delegateThis is a configuration option that you can pass along when registering a handler for an event to assist with event

delegation. By setting this configuration option to a simple selector, Ext Core will filter the target or look for a

descendant of the target.


// handle click

}, this, {// will filter target to be a descendant with the class 'clickable'

delegate: '.clickable'

});

hoverExt Core has a cross browser solution for creating a hover effect. The hover method will ensure that a function is

run when the mouse enters an element and when the mouse leaves an element. mouseenter and mouseleave are

native Internet Explorer events which will filter mouseout and mouseover events when you are when working with

child elements. Ext Core implements these events for W3C compliant browsers so that you can use them in any

browser.

// handles when the mouse enters the elementfunction enter(e,t){

t.toggleClass('red');

}

// handles when the mouse leaves the element

function leave(e,t){

t.toggleClass('red');

}

// subscribe to the hover

el.hover(over, out); removeAllListeners

Removes all previous added listeners from this element

el.removeAllListeners();

singleThis is a configuration option that you can pass along when registering a handler for the event. When set to true,

the handler will fire just once then automatically remove itself.


// handle click

}, this, {single: true// will remove the event after its first firing.

});

bufferThis is a configuration option that you can pass along when registering a hanlder for the event. This causes the

handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the

event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place.


// handle click

}, this, {

buffer: 1000 // will delay and buffer the firing of//this event after its initial fire 1000 miliseconds (or 1 second).

});

delay


19/44

This is a configuration option that you can pass along when registering a hanlder for the event. The number of

milliseconds to delay the invocation of the handler after te event fires.


// handle click

}, this, {

// will delay the firing of this event after its initial

// fire 1000 miliseconds (or 1 second).

delay: 1000

});

targetThis is a configuration option that you can pass along when registering a hanlder for the event. If you have a

specific target that you want to handle for only, you can assign a reference of it to this config option and Ext Core

will make sure that your handler gets only calls the handler when it has reached that node in its bubbling phase.


// handle click

}, this, {// only handles the event when it has bubbled up to the first 'div'.

target: el.up('div')

});

Dimensions & Sizing

Often we need to retrieve or change the dimensions of some particular element on a page. Once again, Ext Core

abstracts dimensioning through a clean API. Most of the setter-methods accept animation configurations or a

straight boolean true to animate the action. Let's take a look:

// changes the height to 200px and animates with default configuration

Ext.fly('elId').setHeight(200, true);

// changes the height to 150px and animates with a custom configuration

Ext.fly('elId').setHeight(150, {

duration : .5, // animation will have a duration of .5 seconds

// will change the content to "finished"

callback: function(){ this.update("finished"); }

});

Pull up firebug, inspect and element (right click and then click on 'Inspect Element') and take a look at the right

panel and click on "layout". You should see something like this:

This information is extremely useful since it provides all the dimensions of the inspected-element. Notice the

element has a width of 895px, a height of 1669px, 0px padding all around, 0px border all around and 0px margin.

All this information is available to you through Ext Core's Dimensioning API of Ext.Element!


20/44

var dimSz = Ext.get('dim-sizing');

var padding = dimSz.getPadding('lrtb'); // has value of 0px

var border = dimSz.getBorderWidth('lrtb'); // has value of 0px

var height = dimSz.getHeight(); // has value of 1691px

var width = dimSz.getWidth(); // has value of 895px

Grab this code and run it in firebug to see for yourself. In fact go a step further and try using the setters to modify

the height and width and see what happens to the box in the firebug layout panel. (NOTE: if your height andwidth are different from the image, that is because of the dimensions of your browser. If you navigate of inspect

that element in you actual browser the outputs should match.)

Lets explore the rest of the API:

getHeightReturns the offset height of the element

var ht = Ext.fly('elId').getHeight();

getWidthReturns the offset width of the element

var wd = Ext.fly('elId').getWidth(); setHeight

Set the height of the element

Ext.fly('elId').setHeight();

setWidthSet the width of the element

Ext.fly('elId').setWidth();

getBorderWidthGets the width of the border(s) for the specified side(s). Side can be t, l, r, b or any combination of those to add

multiple values. For example, passing lr would get the border (l)eft width + the border (r)ight width.

var bdr_wd = Ext.fly('elId').getBorderWidth('lr');

getPaddingGets the width of the padding(s) for the specified side(s). Side can be t, l, r, b or any combination of those to add

multiple values. For example, passing lr would get the padding (l)eft + the padding (r)ight

var padding = Ext.fly('elId').getPadding('lr');

clipStore the current overflow setting and clip overflow on the element - use unclip to remove

Ext.fly('elId').clip();

unclipReturn clipping (overflow) to original clipping before clip() was called

Ext.fly('elId').unclip();

isBorderBoxTrue if the detected browser is Internet Explorer running in non-strict mode.

if (Ext.isBorderBox) {

// do something

}

PositioningThrough Ext Core's positioning API it's a snap to get and set all aspects of an element's position across all

browsers. Similar to the dimension API, most of the setters support animations, either through a boolean true (for


21/44

defaults) or by passing an object-literal configuration object as the second argument. Lets see an example of what

this looks like: Lets see an example of what this looks like:

// changes the x-coord to 75px and animates with a custom configuration

Ext.fly('elId').setX(75, {

duration : .5, // animation will have a duration of .5 seconds

// will change the content to "finished"

callback: function(){ this.update("finished"); }});

getXGets the current X position of the element based on page coordinates. Element must be part of the DOM tree to

have page coordinates (display:none or elements not appended return false).

var elX = Ext.fly('elId').getX()

getYGets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to


var elY = Ext.fly('elId').getY()

getXYGets the current position of the element based on page coordinates. Element must be part of the DOM tree to


var elXY = Ext.fly('elId').getXY() // elXY is an array

setXSets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page

coordinates (display:none or elements not appended return false).

Ext.fly('elId').setX(10)

setYSets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have pagecoordinates (display:none or elements not appended return false).

Ext.fly('elId').setY(10)

setXYSets the position of the element in page coordinates, regardless of how the element is positioned. The element

must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).

Ext.fly('elId').setXY([20,10])

getOffsetsToReturns the offsets of this element from the passed element. Both element must be part of the DOM tree and not

have display:none to have page coordinates.

var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl);

getLeftGets the left X coordinate

var elLeft = Ext.fly('elId').getLeft();

getRightGets the right X coordinate of the element (element X position + element width)

var elRight = Ext.fly('elId').getRight();

getTopGets the top Y coordinate

var elTop = Ext.fly('elId').getTop();

getBottom


22/44

Gets the bottom Y coordinate of the element (element Y position + element height)

var elBottom = Ext.fly('elId').getBottom();

setLeftSets the element's left position directly using CSS style (instead of setX).

Ext.fly('elId').setLeft(25)

setRightSets the element's CSS right style.

Ext.fly('elId').setRight(15)

setTopSets the element's top position directly using CSS style (instead of setY).

Ext.fly('elId').setTop(12)

setBottomSets the element's CSS bottom style.

Ext.fly('elId').setBottom(15)

setLocationSets the position of the element in page coordinates, regardless of how the element is positioned. The element


Ext.fly('elId').setLocation(15,32)

moveToSets the position of the element in page coordinates, regardless of how the element is positioned. The element


Ext.fly('elId').moveTo(12,17)

positionInitializes positioning on this element. If a desired position is not passed, it will make the the element positioned

relative IF it is not already positioned.

Ext.fly('elId').position("relative")

clearPositioningClear positioning back to the default when the document was loaded

Ext.fly('elId').clearPositioning()

Ext.fly('elId').clearPositioning("top")

getPositioningGets an object with all CSS positioning properties. Useful along with setPostioning to get snapshot before

performing an update and then restoring the element.

var pos = Ext.fly('elId').getPositioning()

setPositioningSet positioning with an object returned by getPositioning().

Ext.fly('elId').setPositioning({

left: 'static',

right: 'auto'

})

translatePointsTranslates the passed page coordinates into left/top css values for this element

// {left:translX, top: translY}

var points = Ext.fly('elId').translatePoints(15,18);

Animations


23/44

Ext Core has animation plugins available that give you a robust set of preconfigured animations that are alredy

applied as methods to Ext.Element so you can do cool things like this:

Ext.fly('slideEl').slideOut('r');

Copy the above code, run it in FireBug and see what happens. You will see below that Ext has a full set of

animations already built for you. Each animation takes a configuration object literal making it very customizable if

you need more than the default behavior. Perhaps you want to add your own callback function to fire upon

completion of the animation:

Ext.fly('slideEl').slideOut('r', {

callback : function(){

alert('Finished sliding the element out');

}

});

So you can see there are some really powerful animations here.

Animations support 8-way anchoring, so you can choose from 8 different anchor points to either start or end your

animation.

ValueDescription

tl The top left corner

t The center of the top edge

tr The top right corner

l The center of the left edge

r The center of the right edge

bl The bottom left corner

b The center of the bottom edge

br The bottom right corner

Lets explore the API further:

slideIn/slideOutSlides the element into or out of view. An anchor point can be optionally passed to set the point of origin for the

slide effect. This function automatically handles wrapping the element with a fixed-size container if needed. See

the Fx class overview for valid anchor point options. Usage:

// default: slide the element in from the top

el.slideIn();

// default: slide the element out from the bottom

el.slideOut();

// common config options shown with default values

el.slideIn('t', {

easing: 'easeOut',

duration: .5

});

el.slideOut('t', {

easing: 'easeOut',

duration: .5,remove: false,

useDisplay: false

});


24/44

puffFades the element out while slowly expanding it in all directions. When the effect is completed, the element will be

hidden (visibility = 'hidden') but block elements will still take up space in the document. The element must be

removed from the DOM using the 'remove' config option if desired. Usage:

// default

el.puff();

// common config options shown with default valueel.puff({

easing: 'easeOut',

duration: .5,

remove: false,

useDisplay: false

});

switchOffBlinks the element as if it was clicked and then collapses on its center (similar to switching off a television). When

the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still take up space

in the document. The element must be removed from the DOM using the 'remove' config option if desired. Usage:

// default

el.switchOff();

// all config options shown with default values

el.switchOff({

easing: 'easeIn',

duration: .3,

remove: false,

useDisplay: false});

highlightHighlights the Element by setting a color (applies to the background-color by default, but can be changed using

the "attr" config option) and then fading back to the original color. If no original color is available, you should

provide the "endColor" config option which will be cleared after the animation. Usage:

// default: highlight background to yellow

el.highlight();

// common config options shown with default valuesel.highlight("ffff9c", {

//can be any valid CSS property (attribute) that supports a color value

attr: "background-color",

endColor: (current color) or "ffffff",

easing: 'easeIn',

duration: 1

});

frameShows a ripple of exploding, attenuating borders to draw attention to an Element. Usage:

// default: a single light blue ripple

el.frame();



25/44

el.frame("C3DAF9", 1, {

duration: 1 //duration of each individual ripple.

// Note: Easing is not configurable and will be ignored if included

});

pauseCreates a pause before any subsequent queued effects begin. If there are no effects queued after the pause it will

have no effect. Usage:

el.pause(1);

fadeIn/fadeOutFade an element in (from transparent to opaque). The ending opacity can be specified using the "endOpacity"

config option. Or fade an element out (from opaque to transparent). The ending opacity can be specified using the

"endOpacity" config option. Note that IE may require useDisplay:true in order to redisplay correctly. Usage:

// default: fade in from opacity 0 to 100%

el.fadeIn();

el.fadeOut();


el.fadeIn({

endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)

easing: 'easeOut',

duration: .5

});

el.fadeOut({

endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)

easing: 'easeOut',

duration: .5,remove: false,

useDisplay: false

});

scaleAnimates the transition of an element's dimensions from a starting height/width to an ending height/width. Usage:

// change height and width to 100x100 pixels

el.scale(100, 100);

// common config options shown with default values. The height and width will// default to the element's existing values if passed as null.

el.scale(

[element's width],

[element's height], {

easing: 'easeOut',

duration: .35

}

);

shiftAnimates the transition of any combination of an element's dimensions, xy position and/or opacity. Any of these

properties not specified in the config object will not be changed. This effect requires that at least one new

dimension, position or opacity setting must be passed in on the config object in order for the function to have any

effect. Usage:


26/44

// slide the element horizontally to x position 200 while changing

// the height and opacity

el.shift({ x: 200, height: 50, opacity: .8 });

// common config options shown with default values.

el.shift({

width: [element's width],

height: [element's height],

x: [element's x position],

y: [element's y position],

opacity: [element's opacity],

easing: 'easeOut',

duration: .35

});

ghostSlides the element while fading it out of view. An anchor point can be optionally passed to set the ending point of

the effect. Usage:

// default: slide the element downward while fading out

el.ghost();


el.ghost('b', {

easing: 'easeOut',

duration: .5,

remove: false,

useDisplay: false});

Complex animationsWe can also use the Ext Core animation system to build our own complex custom animations. Copy the following

code into FireBug and see what it does:

var el = Ext.get('complexEl')

el.animate({

borderWidth: {to: 3, from: 0},

opacity: {to: .3, from: 1},

height: {to: 50, from: el.getHeight()},

width: {to: 300, from: el.getWidth()}

});

Miscellaneous

The following are useful Ext.Element methods which don't fit in the previous sections but bear mentioning.

focusTries to focus the element. Any exceptions are caught and ignored.

el.focus();

blurTries to blur the element. Any exceptions are caught and ignored

el.blur();

getValueReturns the value of the "value" attribute


27/44

el.getValue();

el.getValue(true); // parses the value as a number

isBorderBoxTrue if the detected browser is Internet Explorer running in non-strict mode

if (Ext.isBorderBox) { }

getAttributeNSReturns the value of a namespaced attribute from the element's underlying DOM node.

el.getAttributeNS("","name");


28/44

Composite Element

What is a Composite?

"The Composite (Design pattern) allows a group of objects to be treated in the same way as a single instance of

an object." (Wikipedia) Ext.CompositeElement allows you to work with a collection of zero to many elements as a

single entity. CompositeElement uses the same interface as Ext.Element simplifying your job as a developer and

eliminating the need for common run-time checks when dealing with a collection. CompositeElement's are typically

retrieved by using the static methodExt.select. Ext.select uses DomQuery to search the entire document for any

element which matches a particular selector.

For example given the following markup:

Sample A

Lorem Ipsum

Some additional content

We could use the CSS selector '.title' to search the entire page and retrieve a CompositeElement that contains

references to the div's first and third.

var els = Ext.select('.title');

Note: The element third also has an additional CSS class of secondCSSCls. HtmlElement's can have multiple CSS

classes by separating them with a space. This selector does not require that only title is applied and therefore both

'first' and 'third' will be returned.

After obtained a CompositeElement we can now work with this collection of Elements as a single element. For

Example, we could then add a CSS class of error to the collection.

var els = Ext.select('.title');

els.addClass('error');

When you are aware of the location of the elements you want to retrieve relative to another element on the page

you should first obtain a reference to that element and then search from there. This will make your search perform

faster because it is searching a smaller subset of the entire document. Let's see what happens when we add an

additional div with an id of 'accordion' wrapping around our first, second and third elements.

Sample A

Lorem Ipsum

Some additional content
http://en.wikipedia.org/wiki/Composite_patternhttp://en.wikipedia.org/wiki/Composite_patternhttp://en.wikipedia.org/wiki/Composite_patternhttp://extjs.com/deploy/dev/docs/?class=Ext&member=selecthttp://extjs.com/deploy/dev/docs/?class=Ext&member=selecthttp://extjs.com/deploy/dev/docs/?class=Ext&member=selecthttp://extjs.com/deploy/dev/docs/?class=Ext&member=selecthttp://en.wikipedia.org/wiki/Composite_pattern


29/44

Since we know that the elements will be within a div with an id of accordion we can scope our search to only the

accordion element.

var accordion = Ext.get('accordion');

accordion.select('title');

Any time that you are aware of the location of the elements within your markup you should make sure that you

scope your search like this to optimize performance.

Other useful methods of CompositeElement are displayed in this code sample:

var accordion = Ext.get('accordion');

accordion.select('title');

// firstItem now has an Ext.Element pointing to the first div

var firstItem = accordion.item(0);

// alerts 1 or the second position

alert(accordion.indexOf('third'));

// alerts 2

alert(accordion.getCount());

// Removes the element from the collection and from the DOM

accordion.removeElement('one', true);

Note: Methods which have been removed from CompositeElement which users of Ext JS may be familiar with:

each, first, last, fill, contains, filter.


30/44

Ajax Implementation

Ajax Defined

Asynchronous JavaScript and XML (coined AJAX in 2005), is a group of interrelated web development techniques

used to create interactive web applications or rich Internet applications. With Ajax, web applications can retrieve

data from the server asynchronously in the background without interfering with the display and behavior of the

existing page. Data is retrieved using the XHR (XMLHttpRequest) object. Because of the complexity of handling

cross-browser distinctions between XHR implementations, Ajax frameworks have emerged to abstract these

differences into a set of reusable programming constructs. Within Ext, performing these functions is done within

the Ext.Ajaxsingletonobject.

Ext.Ajax

Ext.Ajax extends the Ext.data.Connection class into a singleton and provides a centralized area to make Ajax

requests with maximum flexibility. By using this singleton, all Ajax requests can be routed through one class and

provide access to all functions, events, and parameters.

Ext.Ajax Events

Ext.Ajax exposes global Ajax events that can be handled on every request.

beforerequest (conn, opts)Fires before any Ajax request is sent.

requestcomplete (conn, response, opts)Fires after any Ajax request is completed successfully.

requestexception (conn, response, opts)Fires if an error HTTP status was returned from the server.

// Example: show a spinner during all Ajax requests

Ext.Ajax.on('beforerequest', this.showSpinner, this);

Ext.Ajax.on('requestcomplete', this.hideSpinner, this);Ext.Ajax.on('requestexception', this.hideSpinner, this);

Ext.Ajax Properties

Since Ext.Ajax is asingleton, you can set properties for it once and override them at the request function level

only if necessary. Common properties you may want to set are:

method: The default HTTP method to be used for requests. Note that this is case-sensitive and should be all caps(defaults to undefined; if not set but parms are present will use "POST," otherwise "GET.")

extraParams: An object containing properties which are used as extra parameters to each request made by thisobject (defaults to undefined). Session information and other data that you need to pass with each request are

commonly put here. url: The default URL to be used for requests to the server (defaults to undefined). If the server receives all

requests through one URL, setting this once is easier entering it on every request.

defaultHeaders: An object containing request headers which are added to each request made by this object(defaults to undefined).

// Default headers to pass in every request

Ext.Ajax.defaultHeaders = {

'Powered-By': 'Ext Core'

};

Ext.Ajax.request

Ext.Ajax.request is the function called to send and receive data to the server via Ajax. Success and failure

functions can also be set up to handle theresponsereturned by the server. Note that these success/failure

functions are asynchronous and will be called back when the server responds, while this is happening they

webpage will continue to operate.
http://www.adaptivepath.com/ideas/essays/archives/000385.phphttp://www.adaptivepath.com/ideas/essays/archives/000385.phphttp://www.adaptivepath.com/ideas/essays/archives/000385.phphttp://www.w3.org/TR/XMLHttpRequest/http://www.w3.org/TR/XMLHttpRequest/http://www.w3.org/TR/XMLHttpRequest/http://extjs.com/learn/Manual:Intro:Patterns:Singletonhttp://extjs.com/learn/Manual:Intro:Patterns:Singletonhttp://extjs.com/learn/Manual:Intro:Patterns:Singletonhttp://extjs.com/learn/Manual:Intro:Patterns:Singletonhttp://extjs.com/learn/Manual:Intro:Patterns:Singletonhttp://extjs.com/learn/Manual:Intro:Patterns:Singletonhttp://www.w3.org/TR/XMLHttpRequest/#response-entity-bodyhttp://www.w3.org/TR/XMLHttpRequest/#response-entity-bodyhttp://www.w3.org/TR/XMLHttpRequest/#response-entity-bodyhttp://www.w3.org/TR/XMLHttpRequest/#response-entity-bodyhttp://extjs.com/learn/Manual:Intro:Patterns:Singletonhttp://extjs.com/learn/Manual:Intro:Patterns:Singletonhttp://www.w3.org/TR/XMLHttpRequest/http://www.adaptivepath.com/ideas/essays/archives/000385.php


31/44

Ext.Ajax.request({

url: 'ajax_demo/sample.json',

success: function(response, opts) {

var obj = Ext.decode(response.responseText);

console.dir(obj);

},

failure: function(response, opts) {

console.log('server-side failure with status code ' + response.status);

}

});

Ext.Updater

Another common use for Ajax is updating elements dynamically on a page without refreshing everything. The

request method exposes an el configuration which will take the response from a request and set it to the

innerHTML of an element. Developers can also use the Ext.TaskMgr to setup a recurring task to update the

element periodically.

Posting a form with Ajax

Use the form configuration to post a form with Ext.Ajax.request

Ext.Ajax.request({

url: 'ajax_demo/sample.json',

form: 'myForm',

success: function(response, opts) {

var obj = Ext.decode(response.responseText);

console.dir(obj);

},

failure: function(response, opts) {console.log('server-side failure with status code ' + response.status);

}

});


32/44

Ext.DomQuery

What is DomQuery?

DomQuery provides high performance selector/xpath processing. It works on HTML and XML documents (if a

content node is passed in). DomQuery supports most of the CSS3 selectors spec, along with some custom

selectors and basic XPath. A list of the full CSS3 selector spec can be foundhere.

Multiple Selections

You can select multiple sets of at elements with different criteria into a single result set.

// Matches all divs with class foo and all spans with class bar

Ext.select('div.foo, span.bar');

Selection Root

When using a selector, it is possible to specify an optional root node, if it is not specified it will default to the

document body. This can be useful to increase performance, since specifying a root means there will be possibly

less nodes to check.

Ext.get('myEl').select('div.foo'); // These are equivalent

Ext.select('div.foo', true, 'myEl');// These are equivalent

Selection Chaining

Selectors can be chained to match multiple criteria, which is useful if you need to execute a complex query.

Chained attributes are processed in order

// Matches a div with a class of foo, that has a title attribute bar, that is

// the first child of its immediate parent.

Ext.select('div.foo[title=bar]:first');

Element selectors

* any element E an element with the tag E E F All descendent elements of E that have the tag F E > F or E/F all direct children elements of E that have the tag F E + F all elements with the tag F that are immediately preceded by an element with the tag E E ~ F all elements with the tag F that are preceded by a sibling element with the tag E

// Matches all div elements

Ext.select('div');

// Matches all span elements contained inside a div at any levelExt.select('div span');

// Matches all li elements with a ul as their immediate parent

Ext.select('ul > li');

Attribute selectors

E.foo has a class "foo" E[foo] has an attribute "foo" E[foo=bar] has an attribute "foo" that equals "bar" E[foo^=bar] has an attribute "foo" that starts with "bar" E[foo$=bar] has an attribute "foo" that ends with "bar" E[foo*=bar] has an attribute "foo" that contains the substring "bar" E[foo%=2] has an attribute "foo" that is evenly divisible by 2 E[foo!=bar] has an attribute "foo" that does not equal "bar"

// Matches all div elements with the class news
http://www.w3.org/TR/css3-selectors/http://www.w3.org/TR/css3-selectors/http://www.w3.org/TR/css3-selectors/http://www.w3.org/TR/css3-selectors/


33/44

Ext.select('div.news');

// Matches all a elements with an href that is http://extjs.com

Ext.select('a[href=http://extjs.com]');

// Matches all img elements that have an alt tag

Ext.select('img[alt]');

Pseudo selectors

E:first-child E is the first child of its parent E:last-child E is the last child of its parent E:nth-child(n) E is the nth child of its parent (1 based as per the spec) E:nth-child(odd) E is an odd child of its parent E:nth-child(even) E is an even child of its parent E:only-child E is the only child of its parent E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox) E:first the first E in the resultset E:last the last E in the resultset E:nth(n) the nth E in the resultset (1 based) E:odd shortcut for :nth-child(odd) E:even shortcut for :nth-child(even) E:contains(foo) E's innerHTML contains the substring "foo" E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo" E:not(S) an E element that does not match simple selector S E:has(S) an E element that has a descendent that matches simple selector S E:next(S) an E element whose next sibling matches simple selector S E:prev(S) an E element whose previous sibling matches simple selector S

// Matches the first div with a class of code

Ext.select('div.code:first');

// Matches spans that fall on an even index.

Ext.select('span:even');// Matches all divs whos next sibling is a span with class header.

Ext.select('div:next(span.header));

CSS value selectors

E{display=none} css value "display" that equals "none" E{display^=none} css value "display" that starts with "none" E{display$=none} css value "display" that ends with "none" E{display*=none} css value "display" that contains the substring "none" E{display%=2} css value "display" that is evenly divisible by 2 E{display!=none} css value "display" that does not equal "none"


34/44

Generate Dynamic Markup

DomHelper

DomHelper (abbreviated DH) is a utility class used to dynamically generate markup and works around many cross-

browser issues encountered when creating markup using raw DOM scripting. DH is intelligent enough to use HTML

Fragments and innerHTML where appropriate to optimize speed without sacrificing compatibility. Since

Ext.DomHelper is a singleton, all its methods can be accessed statically without instantiating a new instance of the

class.

Ext.DomHelper is a singleton. Therefore you can access all of its methods statically without instantiating a new

instance of the class.

markup

Same as the deprecated createHtml

insertHtml

insertBefore

insertAfter

insertFirstappend

overwrite

DOM Scripting Ext.DomHelper

var myEl = document.createElement('a');

myEl.href = 'http://www.yahoo.com/';

myEl.innerHTML = 'My Link';

myEl.setAttribute('target', '_blank');

var myDiv = document.createElement('div');myDiv.id = 'my-div';

myDiv.appendChild(myEl);

document.body.appendChild(myDiv);

Ext.DomHelper.append(document.body, {

id: 'my-div',

cn: [{

tag: 'a',

href: 'http://www.yahoo.com/',

html: 'My Link',target: '_blank'

}]

});

DomHelper Configurations

When dynamically generating markup with Ext.DomHelper, a DomHelper configuration is used to specify what

markup to create and place in the page. A DomHelper configuration is a representation of any arbitrary

HTMLElement to be created on the page.

Markup DomHelper Configuration

Ext JS

{

tag: 'a',

href: 'http://www.extjs.com',

html: 'Ext JS'

}

Template

Tpl, formatting functions, static method from (importance of textarea)

Template member methods

Adding & executing member formatting functions


35/44

Javascript Augmentation

About JS Augmentation

Javascript is a flexible lanaguage and it allows the programmer to add functions to existing base objects within

Javascript. The reason for doing this is because there are a number of functions that are extremely useful to use

on the base object, however they are either not implemented at all, or only implemented in certain browsers.

When using multiple libraries, they may both implement functions on the base javascript objects. This overlap has

the potential to cause conflicts when using these libraries together. For this reason, Ext adds only a few necessary

functions onto the base objects. Here is an interesting comparison about different libraries and their javascript

augmentation usage:Framework Scanner

Function Augmentation

The following functions have been added to the Function prototype (note that createSequence and

createInterceptor have not been included):

createCallbackCreates a callback function that can pass a series of arguments. These arguments can be dynamic and defined at

runtime. This function ignores scope, if it's required you should use createDelegate. createCallback passes all the

arguments passed to itself to the callback function.

var sayHello = function(firstName, lastName){

alert('Hello ' + firstName + ' ' + lastName);

};

Ext.get('myButton').on('click', sayHello.createCallback('John', 'Smith');

createDelegateThis is similar to createCallback, however is slightly more powerful. It allows you to specify the scope that the

function executes in. It also gives more control about the arguments that are passed to the callback function,especially if there are existing arguments for the event. The first parameter is the scope. The second parameter is

an array of arguments to pass. The third parameter allows you to control how the arguments are passed. If true, it

means append the arguments to the end of any arguments passed already (say in the case of an event object). If

false, it means just pass the argument array, nothing else. If it's an integer, the arguments will be inserted at that

specific index.

var sayHello = function(firstName, lastName, e){

alert('Hello ' + firstName + ' ' + lastName);

};

Ext.get('myButton').on(

'click',

sayHello.createDelegate(this, ['John', 'Smith'],

//0 indicates we want to insert our arguments before any others.

0

);

deferdefer allows you to specify a time period to wait before executing a function. The first argument is the amount of

time, in milliseconds to wait. The second argument is the scope in which to execute the function.

var whatsTheTime = function(){alert(new Date());

};

whatsTheTime.defer(3000); //Wait 3 seconds before executing.
http://mankz.com/code/GlobalCheck.htmhttp://mankz.com/code/GlobalCheck.htmhttp://mankz.com/code/GlobalCheck.htmhttp://mankz.com/code/GlobalCheck.htm


36/44

Array Augmentation

The following methods are added to the Array prototype, if and only if they are not already implemented by the

browser:

indexOfFinds the first index in the array that matches the passed in parameter. If not found in the array, -1 is returned.

var idx = [1, 2, 3, 4, 5].indexOf(3); //Returns 2.

removeRemoves the first instance of the passed argument from the array, if found. Note that this modifies the array.

var arr = [1, 2, 3, 4];

arr.remove(2);

var len = arr.length; // len is now 3.

String Augmentation

The String class has a single format method added. Note that it may conflict when using Ajax.NET.

formatAllows you to define a tokenized string and pass an arbitrary number of arguments to replace the tokens. Each

token must be unique, and must increment in the format {0}, {1}.

var s = String.format(

'Hey {0} {1}', how are you?',

'John',

'Smith'

);

//{0} is substituted with John, {1} is substituted with Smith.


37/44

Utilities

About Utilities

Ext provides a series of general utility functions for working with Javascript and JSON. They vary in their

functionality, but all of them aim to make your life as the developer easier.

apply and applyIf

applyThe apply function is used to copy the properties of one object literal to another. The first argument is the

destination object. The second argument is the source to copy from. Note that all properties in the source will be

copied over, even if they exists in the destination. Also, the destination object will be modified as a result of calling

the method.

var person = {

name: 'John Smith',

age: 30

};

Ext.apply(person, {

hobby: 'Coding',

city: 'London'

}); // person literal now contains hobby and city as well

applyIfThis function is very similar to apply. The only difference is that applyIf only copies properties that don't exist in

the destination object. If they already exist in both, the destination object takes precedence and the property is

not copied.

var person = {

name: 'John Smith',

age: 30,

hobby: 'Rock Band'

};

Ext.applyIf(person, {

hobby: 'Coding',

city: 'London'}); // hobby is not copied over

Url Encoding/Decoding

These methods are useful for transforming JSON data to a format that can be transmitted as part of a GET string

and vice versa.

urlEncodeConverts an object-literal into a string that can be passed as a parameter using a GET request. The string will be

in the format key1=value1&key2=value2....

var params = {foo: 'value1',

bar: 100

};


38/44

var s = Ext.encode(params); // s is now foo=value1&bar=100

urlDecodeThis method is the opposite of urlEncode. It takes a string in the form of key1=value1&key2=value and converts it

into a JavaScript object.

var s = 'foo=value1&bar=100';

var o = Ext.decode(s); // o now contains 2 properties, foo and bar.

alert(o.bar);

Array Handling

The core provides methods for working with arrays and other collections within Javascript.

eachThe each method allows you to iterate over an array or other collections (including Nodelists or

CompositeElements). eac takes a function as the first argument. This function is called for each member in the

collection. Returning false at any point stops iteration.

Ext.each([1, 2, 3, 4, 5], function(num){

alert(num);

});

toArrayThis method converts an iterable collection (or single element) into an proper javascript array.

var arr1 = Ext.toArray(1); // arr1 = [1];

// arr2 now contains an array of Ext elements.

var arr2 = Ext.toArray(Ext.select('div));

JSON

JSON stands for Javascript Object Notation. It is used as a data exchange format, where the data looks very

similar to javascript object literals. When sending and retrieving data from the server, it is necessary to convert

data to and from it's native javascript form. These helper functions assist you to do this. More information about

JSON can be found atjson.org.

encodeTakes a javascript object or array and encodes it as the string representation of the JSON that can be passed to an

external source.

var s = Ext.encode({

foo: 1,

bar: 2

}); //s now contains '{foo=1,bar=2}'

decodeThe opposite of encode, this is used to convert the string representation of JSON into a javascript object. This

method is often called when reading the response from an Ajax callback.

var s = '{foo=1,bar=2}';

var o = Ext.decode(s); o is now an object with 2 properties, foo and bar.

Browser & OS Detection
http://json.org/http://json.org/http://json.org/http://json.org/


39/44

JavaScript

Ext offers a number of browser-detection features allowing developers to work around implementation issues due

to differences between the major browsers. Ext provides detection in both javascript and css, to allow for greater

functionality in both these areas.

The following browser detection is available for javascript:

Internet Explorer - Ext.isIE, Ext.isIE6, Ext.isIE7, Ext.isIE8 Firefox - Ext.isGecko, Ext.isGecko2, Ext.isGecko3 Opera - Ext.isOpera Chrome - Ext.isChrome Safari - Ext.isSafari, Ext.isSafari2, Ext.isSafari3 WebKit - Ext.isWebKit Operating Systems - Ext.isLinux, Ext.isWindows, Ext.isMac

if(Ext.isIE){

// Do browser specific code here

}

CSSA similar mechanism is applied in the CSS, various class names are added to the root element and the body

depending on the current operating environment. This allows for easier style rules to get around browser quirks. If

in strict mode, ext-strict is added to the root. The rest of these are added to the body when appropriate:

.ext-ie, .ext-ie6, .ext-ie7, .ext-ie8 .ext-gecko, .ext-gecko2, .ext-gecko3 .ext-opera .ext-safari .ext-chrome .ext-mac, .ext-linux

/* When in strict mode and using safari, change the font-size. */.ext-strict .ext-safari .sample-item{

font-size: 20px;

}

Type Detection

Since JavaScript is a loosely typed language, it is often necessary to interrogate variables to retrieve their type.

Ext provides a series of methods for help in this regard:

isEmptyChecks whether the passed value is empty, which includes undefined, null or an empty string.

alert(Ext.isEmpty(''));

isArrayChecks whether the passed value is an array.

alert(Ext.isArray([1, 2, 3]));

isObjectChecks whether the passed value is an object.

alert(Ext.isObject({}));

isFunctionChecks whether the passed value is a function.


40/44

alert(Ext.isFunction(function(){

}));

Miscellaneous

idReturns a string that contains a unique identifier. Any call to Ext.id() is guaranteed to return a new id that hasn't

been used. The first parameter is an optional element, which the id is to be assigned to. The second optional

parameter is a prefix for the id.

var s = Ext.id(null, 'prefix'); // No element specified here

var s = Ext.id(Ext.get(document.body)); // Assign the id to an element


41/44

Timed Code Excution

TaskMgr & TaskRunner

The TaskRunner class is used to execute a function at a specified interval. This is useful when doing polling type

operations, for example when reloading Ajax content every 30 seconds. The TaskMgr object is a singleton instance

of TaskRunner, it can be used for quick access to a TaskRunner.

var stop = false;

var task = {

run: function(){

if(!stop){

alert(new Date());

}else{

runner.stop(task); // we can stop the task here if we need to.

}

},interval: 30000 // every 30 seconds

};

var runner = new Ext.util.TaskRunner();

runner.start(task);

// Using TaskMgr

Ext.TaskMgr.start({

run: function(){

},

interval: 1000

});

DelayedTask

The DelayedTask class provides a convenient way to "buffer" the execution of a method. When called, the task will

wait the specified time period before executing. If durng that time period, the task is called again, the original call

will be cancelled. This continues so that the function is only called a single time for each iteration. This method is

especially useful for things like detecting whether a user has finished typing in a text field.

var task = new Ext.util.DelayedTask(function(){

alert(Ext.getDom('myInputField').value.length);});

// Wait 500ms before calling our function. If the user presses another key

// during that 500ms, it will be cancelled and we'll wait another 500ms.

Ext.get('myInputField').on('keypress', function(){

task.delay(500);

});

Note that we are using a DelayedTask here to illustrate a point. The configuration option buffer for addListener/onwill also setup a delayedtask for you to buffer events.


42/44

Class System

JavaScript Classes

Javascript is prototype based, meaning that it differs from typical class based programming languages. In

javascript, creating new classes is done by modifying the prototype of an object. Ext provides a number of

functions that make it simple to create and work with classes. There is a good discussion on various javascript-

based inheritance functionshere.

Ext.extend

Ext provides a series of functions to extend or override existing javascript classes. This means you can add

behaviours and create your own classes, or override the behaviour of a select few functions to suit your needs.

extendCreates a new class definition. The first argument is the class to extend. The second parameter is a l ist of

properties/functions to add to the prototype of the object. When using extend, Ext keeps a reference to the

superclass, as shown in the second example.

Person = Ext.extend(Object, {

constructor: function(first, last){

this.firstName = first;

this.lastName = last;

}

getName: function(){

return this.firstName + ' ' + this.lastName;

}

});

Developer = Ext.extend(Person, {


if(this.isCoding){

return 'Go Away!';

}else{

// Access the superclass getName method

return Developer.superclass.getName.call(this);

}

}

});

var p = new Person('John', 'Smith');

alert(p.getName());

overrideSimilar to extend, however override doesn't create a new class definition. Instead it just changes the behaviour of

the existing class. The first parameter is the class to override, the second parameter is the list of

properties/functions to add t othe prototype of the object.

// Assumes we've declared our Person class above.

Ext.override(Person, {

http://ajaxian.com/archives/comparison-of-javascript-inheritance-mechanisms-proposalhttp://ajaxian.com/archives/comparison-of-javascript-inheritance-mechanisms-proposalhttp://ajaxian.com/archives/comparison-of-javascript-inheritance-mechanisms-proposalhttp://ajaxian.com/archives/comparison-of-javascript-inheritance-mechanisms-proposal


43/44

// Override the behaviour, return the last name first.

return this.lastName + ' ' + this.firstName;

}

});

Things that go in the prototype are shared

When placing items in the prototype of the prototype, they will be shared across all instances of the class. Unless

you specifically want to do this, you should only put "primitive" types inside the prototype definition.

MyClass = Ext.extend(Object, {

// This object literal is now shared between all instances of MyClass.

baseParams: {},

foo: function(){

this.baseParams.bar = 'baz';

}

});

Ext.onReady(function(){

var a = new MyClass();

var b = new MyClass();

a.foo();

// Modifying baseParams in a affects baseParams in b.

console.log(b.baseParams);

});

Singletons

Otherwise known as the module design pattern this pattern allows you to create private JS Variables or methods

through the clever use of closures. The singleton is a good pattern to use when you you have a class of static

methods, or you have a class that will only be used once. A good candidate for a singleton is the entry point into

your application.

MyApp = function(){

var data; data is private and can't be accessed from outside.

return {

init: function(){// Initialize application here

},

getData: function(){

return data;

}

};

}();

Ext.onReady(MyApp.init, MyApp);

Ext.util.Observable

TheObservable (or subscriber)pattern is used to decouple objects that need to know details about the state of

other objects. It does this by using events. When the state of the subject changes, the subject will fire an event.

Subscribers to that particular event on the subject will then be notified that the state change has occurred. Many
http://en.wikipedia.org/wiki/Observer_patternhttp://en.wikipedia.org/wiki/Observer_patternhttp://en.wikipedia.org/wiki/Observer_patternhttp://en.wikipedia.org/wiki/Observer_pattern


44/44

Ext classes extend Observable to allow for a flexible, decoupled programming model. You can easily create classes

that fire custom events:

var MyClass = Ext.extend(Ext.util.Observable, {

constructor: function(config){

this.addEvents('datachanged'); // specify the events we're going to fire

MyClass.constructor.call(this, config);

},

update: function(){

// do some data transformation here

// When firing an event, we can specify what parameters are

// passed to the subscribers.

this.fireEvent('datachanged', this, this.data.length);

}

});

// To subscribe to an eventvar c = new MyClass();

c.on('datachanged', function(obj, num){

// react to the data changed event.

});

Namespaces

Namespaces are useful for organizing your code, they provide 2 main benefits. The first is that you can use them

to prevent polluting the global namespace with objects, which is generally considered to be undesireable. Ext, for

example has just a single global object (the Ext object). It's good practice to put any classes inside a namespace,

a common one is the name of your company or the name of your application. The other advantage is that assistsin keeping your code organized, you can group together similar or co-dependent classes in the same namespace,

which helps to specify your intent to other developers.

// The following are equivalent, the latter is preferred.

Ext.namespace(

'MyCompany',

'MyCompany.Application',

'MyCompany.Application.Reports'

);

Ext.namespace('MyCompany.Application.Reports');

Date post:	04-Apr-2018
Category:	Documents
Upload:	jorge-segundino-ponce-delacruz
View:	221 times
Download:	0 times

Manual ExtCore 3

Documents