|
|
Ext.core Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
DomHelper
|
The DomHelper class provides a layer of abstraction from DOM and transparently supports creating
elements via DOM or using HTML fragments. It also has the ability to create HTML fragment templates
from your DOM building code. DomHelper element specification object A specification object is used when creating elements. Attributes of this object
are assumed to be element attributes, except for 4 special attributes:
tag : The tag name of the element children : or cnAn array of the
same kind of element definition objects to be created and appended. These can be nested
as deep as you want. cls : The class attribute of the element.
This will end up being either the "class" attribute on a HTML fragment or className
for a DOM node, depending on whether DomHelper is using fragments or DOM. html : The innerHTML for the element NOTE: For other arbitrary attributes, the value will currently not be automatically
HTML-escaped prior to building the element's HTML string. This means that if your attribute value
contains special characters that would not normally be allowed in a double-quoted attribute value,
you must manually HTML-encode it beforehand (see Ext.String.htmlEncode) or risk
malformed HTML being created. This behavior may change in a future release. Insertion methods Commonly used insertion methods:
append : insertBefore : insertAfter : overwrite : createTemplate : insertHtml : Example This is an example, where an unordered list with 3 children items is appended to an existing
element with id 'my-div': var dh = Ext.core.DomHelper; // create shorthand alias
// specification object
var spec = {
id: 'my-ul',
tag: 'ul',
cls: 'my-list',
// append children after creating
children: [ // may also specify 'cn' instead of 'children'
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'}
]
};
var list = dh.append(
'my-div', // the context element 'my-div' can either be the id or the actual node
spec // the specification object
);
Element creation specification parameters in this class may also be passed as an Array of
specification objects. This can be used to insert multiple sibling nodes into an existing
container very efficiently. For example, to add more list items to the example above:
dh.append('my-ul', [
{tag: 'li', id: 'item3', html: 'List Item 3'},
{tag: 'li', id: 'item4', html: 'List Item 4'}
]);
Templating The real power is in the built-in templating. Instead of creating or appending any elements,
createTemplate returns a Template object which can be used over and over to
insert new elements. Revisiting the example above, we could utilize templating this time:
// create the node
var list = dh.append('my-div', {tag: 'ul', cls: 'my-list'});
// get template
var tpl = dh.createTemplate({tag: 'li', id: 'item{0}', html: 'List Item {0}'});
for(var i = 0; i An example using a template:
var html = '{2}';
var tpl = new Ext.core.DomHelper.createTemplate(html);
tpl.append('blog-roll', ['link1', 'http://www.edspencer.net/', "Ed's Site"]);
tpl.append('blog-roll', ['link2', 'http://www.dustindiaz.com/', "Dustin's Site"]);
The same example using named parameters:
var html = '{text}';
var tpl = new Ext.core.DomHelper.createTemplate(html);
tpl.append('blog-roll', {
id: 'link1',
url: 'http://www.edspencer.net/',
text: "Ed's Site"
});
tpl.append('blog-roll', {
id: 'link2',
url: 'http://www.dustindiaz.com/',
text: "Dustin's Site"
});
Compiling Templates Templates are applied using regular expressions. The performance is great, but if
you are adding a bunch of DOM elements using the same template, you can increase
performance even further by "compiling" the template.
The way "compile()" works is the template is parsed and
broken up at the different variable points and a dynamic function is created and eval'ed.
The generated function performs string concatenation of these parts and the passed
variables instead of using regular expressions.
var html = '{text}';
var tpl = new Ext.core.DomHelper.createTemplate(html);
tpl.compile();
//... use template like normal
Performance Boost DomHelper will transparently create HTML fragments when it can. Using HTML fragments instead
of DOM can significantly boost performance. Element creation specification parameters may also be strings. If useDom is false,
then the string is used as innerHTML. If useDom is true, a string specification
results in the creation of a text node. Usage: Ext.core.DomHelper.useDom = true; // force it to use DOM; reduces performance
|
|
|
DomHelperConfig
|
|
|
|
DomHelperEvents
|
|
|
|
Element
|
Encapsulates a DOM element, adding simple DOM manipulation facilities, normalizing for browser differences. All instances of this class inherit the methods of Ext.fx.Anim making visual effects easily available to all DOM elements. Note that the events documented in this class are not Ext events, they encapsulate browser events. To
access the underlying browser event, see Ext.EventObject.browserEvent. Some older
browsers may not support the full range of events. Which events are supported is beyond the control of ExtJs. Usage: // by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
Animations When an element is manipulated, by default there is no animation. var el = Ext.get("my-div");
// no animation
el.setWidth(100);
Many of the functions for manipulating an element have an optional "animate" parameter. This
parameter can be specified as boolean (true) for default animation effects. // default animation
el.setWidth(100, true);
To configure the effects, an object literal with animation options to use as the Element animation
configuration object can also be specified. Note that the supported Element animation configuration
options are a subset of the Ext.fx.Anim animation options specific to Fx effects. The supported
Element animation configuration options are: Option Default Description
--------- -------- ---------------------------------------------
duration .35 The duration of the animation in seconds
easing easeOut The easing method
callback none A function to execute when the anim completes
scope this The scope (this) of the callback function
// Element animation options object
var opt = {
duration: 1,
easing: 'elasticIn',
callback: this.foo,
scope: this
};
// animation with some options set
el.setWidth(100, opt);
The Element animation object being used for the animation will be set on the options
object as "anim", which allows you to stop or manipulate the animation. Here is an example: // using the "anim" property to get the Anim object
if(opt.anim.isAnimated()){
opt.anim.stop();
}
Also see the animate method for another animation technique. Composite (Collections of) Elements For working with collections of Elements, see Ext.CompositeElement
|
|
|
ElementConfig
|
|
|
|
ElementEvents
|
|
|
SharpKit.AspNetAjax
Ext