Clear Up
SharpKit Reference

Ext.util Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
AbstractMixedCollection

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

AbstractMixedCollectionConfig
AbstractMixedCollectionEvents
AnimateConfig
AnimateEvents
BindableConfig
BindableEvents
ClickRepeater

A wrapper class which can be applied to any element. Fires a "click" event while the mouse is pressed. The interval between firings may be specified in the config but defaults to 20 milliseconds.

Optionally, a CSS class may be applied to the element during the time it is pressed.

ClickRepeaterConfig
ClickRepeaterEvents
ComponentDragger

A subclass of Ext.dd.DragTracker which handles dragging any Component.

This is configured with a Component to be made draggable, and a config object for the Ext.dd.DragTracker class.

A delegate may be provided which may be either the element to use as the mousedown target or a Ext.DomQuery selector to activate multiple mousedown targets.

When the Component begins to be dragged, its beginDrag method will be called if implemented.

When the drag ends, its endDrag method will be called if implemented.

ComponentDraggerConfig
ComponentDraggerEvents
Cookies

Utility class for setting/reading values from browser cookies. Values can be written using the set method. Values can be read using the get method. A cookie can be invalidated on the client machine using the clear method.

CookiesConfig
CookiesEvents
CSS

Utility class for manipulating CSS rules

CSSConfig
CSSEvents
DelayedTask

The DelayedTask class provides a convenient way to "buffer" the execution of a method, performing setTimeout where a new timeout cancels the old timeout. 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. An example would be performing validation on a keypress. You can use this class to buffer the keypress events for a certain number of milliseconds, and perform only if they stop for that amount of time.

Usage

  
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/on will also setup a delayed task for you to buffer events.

DelayedTaskConfig
DelayedTaskEvents
ElementContainerConfig
ElementContainerEvents
Event

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Represents single event type that an Observable object listens to. All actual listeners are tracked inside here. When the event fires, it calls all the registered listener functions.

EventConfig
EventEvents
Filter

Represents a filter that can be applied to a MixedCollection. Can either simply filter on a property/value pair or pass in a filter function with custom logic. Filters are always used in the context of MixedCollections, though Stores frequently create them when filtering and searching on their records. Example usage:

  
//set up a fictional MixedCollection containing a few people to filter on
            var allNames = new Ext.util.MixedCollection();
            allNames.addAll([
            {id: 1, name: 'Ed',    age: 25},
            {id: 2, name: 'Jamie', age: 37},
            {id: 3, name: 'Abe',   age: 32},
            {id: 4, name: 'Aaron', age: 26},
            {id: 5, name: 'David', age: 32}
            ]);
            var ageFilter = new Ext.util.Filter({
            property: 'age',
            value   : 32
            });
            var longNameFilter = new Ext.util.Filter({
            filterFn: function(item) {
            return item.name.length > 4;
            }
            });
            //a new MixedCollection with the 3 names longer than 4 characters
            var longNames = allNames.filter(longNameFilter);
            //a new MixedCollection with the 2 people of age 32:
            var youngFolk = allNames.filter(ageFilter);
            
FilterConfig
FilterEvents
FloatingConfig
FloatingEvents
Format

This class is a centralized place for formatting functions. It includes functions to format various different types of data, such as text, dates and numeric values.

Localization

This class contains several options for localization. These can be set once the library has loaded, all calls to the functions from that point will use the locale settings that were specified.

Options include:

  • thousandSeparator
  • decimalSeparator
  • currenyPrecision
  • currencySign
  • currencyAtEnd

This class also uses the default date format defined here: Ext.Date.defaultFormat.

Using with renderers

There are two helper functions that return a new function that can be used in conjunction with grid renderers:

  
columns: [{
            dataIndex: 'date',
            renderer: Ext.util.Format.dateRenderer('Y-m-d')
            }, {
            dataIndex: 'time',
            renderer: Ext.util.Format.numberRenderer('0.000')
            }]
            

Functions that only take a single argument can also be passed directly:

  
columns: [{
            dataIndex: 'cost',
            renderer: Ext.util.Format.usMoney
            }, {
            dataIndex: 'productCode',
            renderer: Ext.util.Format.uppercase
            }]
            

Using with XTemplates

XTemplates can also directly use Ext.util.Format functions:

  
new Ext.XTemplate([
            'Date: {startDate:date("Y-m-d")}',
            'Cost: {cost:usMoney}'
            ]);
            
FormatConfig
FormatEvents
Grouper

Represents a single grouper that can be applied to a Store. The grouper works in the same fashion as the Ext.util.Sorter.

GrouperConfig
GrouperEvents
HashMap

Represents a collection of a set of key and value pairs. Each key in the HashMap must be unique, the same key cannot exist twice. Access to items is provided via the key only. Sample usage:

var map = new Ext.util.HashMap();
            map.add('key1', 1);
            map.add('key2', 2);
            map.add('key3', 3);
            map.each(function(key, value, length){
            console.log(key, value, length);
            });
            

The HashMap is an unordered class, there is no guarantee when iterating over the items that they will be in any particular order. If this is required, then use a Ext.util.MixedCollection.

HashMapConfig
HashMapEvents
History

History management component that allows you to register arbitrary tokens that signify application history state on navigation actions. You can then handle the history change event in order to reset your application UI to the appropriate state when the user navigates forward or backward through the browser history stack.

Initializing

The init method of the History object must be called before using History. This sets up the internal state and must be the first thing called before using History.

HistoryConfig
HistoryEvents
Inflector

General purpose inflector class that pluralizes, singularizes and ordinalizes words. Sample usage:

  
//turning singular words into plurals
            Ext.util.Inflector.pluralize('word'); //'words'
            Ext.util.Inflector.pluralize('person'); //'people'
            Ext.util.Inflector.pluralize('sheep'); //'sheep'
            //turning plurals into singulars
            Ext.util.Inflector.singularize('words'); //'word'
            Ext.util.Inflector.singularize('people'); //'person'
            Ext.util.Inflector.singularize('sheep'); //'sheep'
            //ordinalizing numbers
            Ext.util.Inflector.ordinalize(11); //"11th"
            Ext.util.Inflector.ordinalize(21); //"21st"
            Ext.util.Inflector.ordinalize(1043); //"1043rd"
            

Customization

The Inflector comes with a default set of US English pluralization rules. These can be augmented with additional rules if the default rules do not meet your application's requirements, or swapped out entirely for other languages. Here is how we might add a rule that pluralizes "ox" to "oxen":

  
    Ext.util.Inflector.plural(/^(ox)$/i, "$1en");
            

Each rule consists of two items - a regular expression that matches one or more rules, and a replacement string. In this case, the regular expression will only match the string "ox", and will replace that match with "oxen". Here's how we could add the inverse rule:

  
    Ext.util.Inflector.singular(/^(ox)en$/i, "$1");
            

Note that the ox/oxen rules are present by default.

InflectorConfig
InflectorEvents
KeyMap

Handles mapping key events to handling functions for an element or a Component. One KeyMap can be used for multiple actions.

A KeyMap must be configured with a target as an event source which may be an Element or a Component.

If the target is an element, then the keydown event will trigger the invocation of bindings.

It is possible to configure the KeyMap with a custom eventName to listen for. This may be useful when the target is a Component.

The KeyMap's event handling requires that the first parameter passed is a key event. So if the Component's event signature is different, specify a processEvent configuration which accepts the event's parameters and returns a key event.

Functions specified in bindings are called with this signature : (String key, Ext.EventObject e) (if the match is a multi-key combination the callback will still be called only once). A KeyMap can also handle a string representation of keys. By default KeyMap starts enabled.

Usage:

  
// map one key by key code
            var map = new Ext.util.KeyMap({
            target: "my-element",
            key: 13, // or Ext.EventObject.ENTER
            fn: myHandler,
            scope: myObject
            });
            // map multiple keys to one action by string
            var map = new Ext.util.KeyMap({
            target: "my-element",
            key: "a\r\n\t",
            fn: myHandler,
            scope: myObject
            });
            // map multiple keys to multiple actions by strings and array of codes
            var map = new Ext.util.KeyMap({
            target: "my-element",
            binding: [{
            key: [10,13],
            fn: function(){ alert("Return was pressed"); }
            }, {
            key: "abc",
            fn: function(){ alert('a, b or c was pressed'); }
            }, {
            key: "\t",
            ctrl:true,
            shift:true,
            fn: function(){ alert('Control + shift + tab was pressed.'); }
            }]
            });
            

Since 4.1.0, KeyMaps can bind to Components and process key-based events fired by Components.

To bind to a Component, use the single parameter form of constructor and include the Component event name to listen for, and a processEvent implementation which returns the key event for further processing by the KeyMap:

  
var map = new Ext.util.KeyMap({
            target: myGridView,
            eventName: 'itemkeydown',
            processEvent: function(view, record, node, index, event) {
            // Load the event with the extra information needed by the mappings
            event.view = view;
            event.store = view.getStore();
            event.record = record;
            event.index = index;
            return event;
            },
            binding: {
            key: Ext.EventObject.DELETE,
            fn: function(keyCode, e) {
            e.store.remove(e.record);
            // Attempt to select the record that's now in its place
            e.view.getSelectionModel().select(e.index);
            e.view.el.focus();
            }
            }
            });
            
KeyMapConfig
KeyMapEvents
KeyNav

Provides a convenient wrapper for normalized keyboard navigation. KeyNav allows you to bind navigation keys to function calls that will get called when the keys are pressed, providing an easy way to implement custom navigation schemes for any UI component.

The following are all of the possible keys that can be implemented: enter, space, left, right, up, down, tab, esc, pageUp, pageDown, del, backspace, home, end.

Usage:

  
var nav = new Ext.util.KeyNav({
            target : "my-element",
            left   : function(e){
            this.moveLeft(e.ctrlKey);
            },
            right  : function(e){
            this.moveRight(e.ctrlKey);
            },
            enter  : function(e){
            this.save();
            },
            // Binding may be a function specifiying fn, scope and defaultAction
            esc: {
            fn: this.onEsc,
            defaultEventAction: false
            },
            scope : this
            });
            
KeyNavConfig
KeyNavEvents
LruCache

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

A linked HashMap implementation which maintains most recently accessed items at the end of the list, and purges the cache down to the most recently accessed maxSize items upon add.

LruCacheConfig
LruCacheEvents
Memento

This class manages a set of captured properties from an object. These captured properties can later be restored to an object.

MementoConfig
MementoEvents
MixedCollection
MixedCollectionConfig
MixedCollectionEvents
ObservableConfig
ObservableEvents
Offset

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

OffsetConfig
OffsetEvents
Point

Represents a 2D point with x and y properties, useful for comparison and instantiation from an event:

  
var point = Ext.util.Point.fromEvent(e);
            
PointConfig
PointEvents
ProtoElement

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Manages certain element-like data prior to rendering. These values are passed on to the render process. This is currently used to manage the "class" and "style" attributes of a component's primary el as well as the bodyEl of panels. This allows things like addBodyCls in Panel to share logic with addCls in AbstractComponent.

ProtoElementConfig
ProtoElementEvents
Queue

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

An internal Queue class.

QueueConfig
QueueEvents
Region

This class represents a rectangular region in X,Y space, and performs geometric transformations or tests upon the region.

This class may be used to compare the document regions occupied by elements.

RegionConfig
RegionEvents
RenderableConfig
RenderableEvents
SortableConfig
SortableEvents
Sorter

Represents a single sorter that can be applied to a Store. The sorter is used to compare two values against each other for the purpose of ordering them. Ordering is achieved by specifying either:

  • A sorting property
  • A sorting function

As a contrived example, we can specify a custom sorter that sorts by rank:

  
    Ext.define('Person', {
            extend: 'Ext.data.Model',
            fields: ['name', 'rank']
            });
            Ext.create('Ext.data.Store', {
            model: 'Person',
            proxy: 'memory',
            sorters: [{
            sorterFn: function(o1, o2){
            var getRank = function(o){
            var name = o.get('rank');
            if (name === 'first') {
            return 1;
            } else if (name === 'second') {
            return 2;
            } else {
            return 3;
            }
            },
            rank1 = getRank(o1),
            rank2 = getRank(o2);
            if (rank1 === rank2) {
            return 0;
            }
            return rank1 < rank2 ? -1 : 1;
            }
            }],
            data: [{
            name: 'Person1',
            rank: 'second'
            }, {
            name: 'Person2',
            rank: 'third'
            }, {
            name: 'Person3',
            rank: 'first'
            }]
            });
            
SorterConfig
SorterEvents
TaskRunner

Provides the ability to execute one or more arbitrary tasks in a asynchronous manner. Generally, you can use the singleton Ext.TaskManager instead, but if needed, you can create separate instances of TaskRunner. Any number of separate tasks can be started at any time and will run independently of each other.

Example usage:

  
// Start a simple clock task that updates a div once per second
           var updateClock = function () {
           Ext.fly('clock').update(new Date().format('g:i:s A'));
           }
           var runner = new Ext.util.TaskRunner();
           var task = runner.start({
           run: updateClock,
           interval: 1000
           }
            

The equivalent using TaskManager:

  
var task = Ext.TaskManager.start({
           run: updateClock,
           interval: 1000
           });
            

To end a running task:

  
    Ext.TaskManager.stop(task);
            

If a task needs to be started and stopped repeated over time, you can create a Task instance.

  
var task = runner.newTask({
           run: function () {
           // useful code
           },
           interval: 1000
           });
           task.start();
           // ...
           task.stop();
           // ...
           task.start();
            

A re-usable, one-shot task can be managed similar to the above:

  
var task = runner.newTask({
           run: function () {
           // useful code to run once
           },
           repeat: 1
           });
           task.start();
           // ...
           task.start();
            

See the start method for details about how to configure a task object.

Also see Ext.util.DelayedTask.

TaskRunnerConfig
TaskRunnerEvents
TextMetrics

Provides precise pixel measurements for blocks of text so that you can determine exactly how high and wide, in pixels, a given block of text will be. Note that when measuring text, it should be plain text and should not contain any HTML, otherwise it may not be measured correctly.

The measurement works by copying the relevant CSS styles that can affect the font related display, then checking the size of an element that is auto-sized. Note that if the text is multi-lined, you must provide a fixed width when doing the measurement.

If multiple measurements are being done on the same element, you create a new instance to initialize to avoid the overhead of copying the styles to the element repeatedly.

TextMetricsConfig
TextMetricsEvents

Interfaces

Name Description
Animate

This animation class is a mixin.

Ext.util.Animate provides an API for the creation of animated transitions of properties and styles. This class is used as a mixin and currently applied to Ext.Element, Ext.CompositeElement, Ext.draw.Sprite, Ext.draw.CompositeSprite, and Ext.Component. Note that Components have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and opacity (color, paddings, and margins can not be animated).

Animation Basics

All animations require three things - easing, duration, and to (the final end value for each property) you wish to animate. Easing and duration are defaulted values specified below. Easing describes how the intermediate values used during a transition will be calculated. Easing allows for a transition to change speed over its duration. You may use the defaults for easing and duration, but you must always set a to property which is the end value for all animations.

Popular element 'to' configurations are:

  • opacity
  • x
  • y
  • color
  • height
  • width

Popular sprite 'to' configurations are:

  • translation
  • path
  • scale
  • stroke
  • rotation

The default duration for animations is 250 (which is a 1/4 of a second). Duration is denoted in milliseconds. Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve used for all animations is 'ease'. Popular easing functions are included and can be found in Easing.

For example, a simple animation to fade out an element with a default easing and duration:

  
var p1 = Ext.get('myElementId');
            p1.animate({
            to: {
            opacity: 0
            }
            });
            

To make this animation fade out in a tenth of a second:

  
var p1 = Ext.get('myElementId');
            p1.animate({
            duration: 100,
            to: {
            opacity: 0
            }
            });
            

Animation Queues

By default all animations are added to a queue which allows for animation via a chain-style API. For example, the following code will queue 4 animations which occur sequentially (one right after the other):

  
p1.animate({
            to: {
            x: 500
            }
            }).animate({
            to: {
            y: 150
            }
            }).animate({
            to: {
            backgroundColor: '#f00'  //red
            }
            }).animate({
            to: {
            opacity: 0
            }
            });
            

You can change this behavior by calling the syncFx method and all subsequent animations for the specified target will be run concurrently (at the same time).

  
p1.syncFx();  //this will make all animations run at the same time
            p1.animate({
            to: {
            x: 500
            }
            }).animate({
            to: {
            y: 150
            }
            }).animate({
            to: {
            backgroundColor: '#f00'  //red
            }
            }).animate({
            to: {
            opacity: 0
            }
            });
            

This works the same as:

  
p1.animate({
            to: {
            x: 500,
            y: 150,
            backgroundColor: '#f00'  //red
            opacity: 0
            }
            });
            

The stopAnimation method can be used to stop any currently running animations and clear any queued animations.

Animation Keyframes

You can also set up complex animations with keyframes which follow the CSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites. The previous example can be written with the following syntax:

  
p1.animate({
            duration: 1000,  //one second total
            keyframes: {
            25: {     //from 0 to 250ms (25%)
            x: 0
            },
            50: {   //from 250ms to 500ms (50%)
            y: 0
            },
            75: {  //from 500ms to 750ms (75%)
            backgroundColor: '#f00'  //red
            },
            100: {  //from 750ms to 1sec
            opacity: 0
            }
            }
            });
            

Animation Events

Each animation you create has events for beforeanimate, afteranimate, and lastframe. Keyframed animations adds an additional keyframe event which fires for each keyframe in your animation.

All animations support the listeners configuration to attact functions to these events.

  
startAnimate: function() {
            var p1 = Ext.get('myElementId');
            p1.animate({
            duration: 100,
            to: {
            opacity: 0
            },
            listeners: {
            beforeanimate:  function() {
            // Execute my custom method before the animation
            this.myBeforeAnimateFn();
            },
            afteranimate: function() {
            // Execute my custom method after the animation
            this.myAfterAnimateFn();
            },
            scope: this
            });
            },
            myBeforeAnimateFn: function() {
            // My custom logic
            },
            myAfterAnimateFn: function() {
            // My custom logic
            }
            

Due to the fact that animations run asynchronously, you can determine if an animation is currently running on any target by using the getActiveAnimation method. This method will return false if there are no active animations or return the currently running Ext.fx.Anim instance.

In this example, we're going to wait for the current animation to finish, then stop any other queued animations before we fade our element's opacity to 0:

  
var curAnim = p1.getActiveAnimation();
            if (curAnim) {
            curAnim.on('afteranimate', function() {
            p1.stopAnimation();
            p1.animate({
            to: {
            opacity: 0
            }
            });
            });
            }
            
Bindable

This class is used as a mixin.

This class is to be used to provide basic methods for binding/unbinding stores to other classes. In general it will not be used directly.

ElementContainer

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

This mixin enables classes to declare relationships to child elements and provides the mechanics for acquiring the elements and storing them on an object instance as properties.

This class is used by components and container layouts to manage their child elements.

A typical component that uses these features might look something like this:

  
    Ext.define('Ext.ux.SomeComponent', {
            extend: 'Ext.Component',
            childEls: [
            'bodyEl'
            ],
            renderTpl: [
            '<div id="{id}-bodyEl"></div>'
            ],
            // ...
            });
            

The childEls array lists one or more relationships to child elements managed by the component. The items in this array can be either of the following types:

  • String: the id suffix and property name in one. For example, "bodyEl" in the above example means a "bodyEl" property will be added to the instance with the result of Ext.get given "componentId-bodyEl" where "componentId" is the component instance's id.
  • Object: with a name property that names the instance property for the element, and one of the following additional properties:
    • id: The full id of the child element.
    • itemId: The suffix part of the id to which "componentId-" is prepended.
    • select: A selector that will be passed to Ext.select.
    • selectNode: A selector that will be passed to Ext.DomQuery.selectNode.

The example above could have used this instead to achieve the same result:

  
childEls: [
           { name: 'bodyEl', itemId: 'bodyEl' }
           ]
            

When using select, the property will be an instance of Ext.CompositeElement. In all other cases, the property will be an Ext.Element or null if not found.

Care should be taken when using select or selectNode to find child elements. The following issues should be considered:

  • Performance: using selectors can be slower than id lookup by a factor 10x or more.
  • Over-selecting: selectors are applied after the DOM elements for all children have been rendered, so selectors can match elements from child components (including nested versions of the same component) accidentally.

This above issues are most important when using select since it returns multiple elements.

IMPORTANT Unlike a renderTpl where there is a single value for an instance, childEls are aggregated up the class hierarchy so that they are effectively inherited. In other words, if a class where to derive from Ext.ux.SomeComponent in the example above, it could also have a childEls property in the same way as Ext.ux.SomeComponent.

  
    Ext.define('Ext.ux.AnotherComponent', {
            extend: 'Ext.ux.SomeComponent',
            childEls: [
            // 'bodyEl' is inherited
            'innerEl'
            ],
            renderTpl: [
            '<div id="{id}-bodyEl">'
            '<div id="{id}-innerEl"></div>'
            '</div>'
            ],
            // ...
            });
            

The renderTpl contains both child elements and unites them in the desired markup, but the childEls only contains the new child element. The applyChildEls method takes care of looking up all childEls for an instance and considers childEls properties on all the super classes and mixins.

Floating

A mixin to add floating capability to a Component.

Observable

Base class that provides a common interface for publishing events. Subclasses are expected to to have a property "events" with all the events defined, and, optionally, a property "listeners" with configured listeners defined.

For example:

  
    Ext.define('Employee', {
            mixins: {
            observable: 'Ext.util.Observable'
            },
            constructor: function (config) {
            // The Observable constructor copies all of the properties of `config` on
            // to `this` using Ext.apply. Further, the `listeners` property is
            // processed to add listeners.
            //
            this.mixins.observable.constructor.call(this, config);
            this.addEvents(
            'fired',
            'quit'
            );
            }
            });
            

This could then be used like this:

  
var newEmployee = new Employee({
            name: employeeName,
            listeners: {
            quit: function() {
            // By default, "this" will be the object that fired the event.
            alert(this.name + " has quit!");
            }
            }
            });
            
Renderable

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

Given a component hierarchy of this:

  
{
           xtype: 'panel',
           id: 'ContainerA',
           layout: 'hbox',
           renderTo: Ext.getBody(),
           items: [
           {
           id: 'ContainerB',
           xtype: 'container',
           items: [
           { id: 'ComponentA' }
           ]
           }
           ]
           }
            

The rendering of the above proceeds roughly like this:

  • ContainerA's initComponent calls render passing the renderTo property as the container argument.
  • render calls the getRenderTree method to get a complete Ext.DomHelper spec.
  • getRenderTree fires the "beforerender" event and calls the #beforeRender method. Its result is obtained by calling #getElConfig.
  • The #getElConfig method uses the renderTpl and its render data as the content of the autoEl described element.
  • The result of getRenderTree is passed to Ext.DomHelper.append.
  • The renderTpl contains calls to render things like docked items, container items and raw markup (such as the html or tpl config properties). These calls are to methods added to the Ext.XTemplate instance by #setupRenderTpl.
  • The #setupRenderTpl method adds methods such as renderItems, renderContent, etc. to the template. These are directed to "doRenderItems", "doRenderContent" etc..
  • The #setupRenderTpl calls traverse from components to their Ext.layout.Layout object.
  • When a container is rendered, it also has a renderTpl. This is processed when the renderContainer method is called in the component's renderTpl. This call goes to Ext.layout.container.Container#doRenderContainer. This method repeats this process for all components in the container.
  • After the top-most component's markup is generated and placed in to the DOM, the next step is to link elements to their components and finish calling the component methods onRender and afterRender as well as fire the corresponding events.
  • The first step in this is to call #finishRender. This method descends the component hierarchy and calls onRender and fires the render event. These calls are delivered top-down to approximate the timing of these calls/events from previous versions.
  • During the pass, the component's el is set. Likewise, the renderSelectors and childEls are applied to capture references to the component's elements.
  • These calls are also made on the Ext.layout.container.Container layout to capture its elements. Both of these classes use Ext.util.ElementContainer to handle childEls processing.
  • Once this is complete, a similar pass is made by calling #finishAfterRender. This call also descends the component hierarchy, but this time the calls are made in a bottom-up order to afterRender.
Sortable

A mixin which allows a data component to be sorted. This is used by e.g. Ext.data.Store and Ext.data.TreeStore.

NOTE: This mixin is mainly for internal use and most users should not need to use it directly. It is more likely you will want to use one of the component classes that import this mixin, such as Ext.data.Store or Ext.data.TreeStore.

© Copyright 2005-2011 SharpKit. All rights reserved.