PDA

View Full Version : Lightweight DomComponent and Canvas



dnalot
12 Feb 2008, 9:32 PM
DomComponent is a subclass of BoxComponent which allows you to add html markup or a DomHelper config in the standard autoEl property like a Panel but without its bloat. If nothing is passed, it defaults to DomHelper's default empty div. Registers an xtype of 'dom' for lazy init. DomComponent also proxies all listeners with the proxy config property to the Element itself and ensures their scope as the Component which provides lazy init for hairy mouse events in its listeners property!

The Canvas class extends Container and features the exact same functionality as DomComponent except wraps everything in a div and registers an xtype of 'canvas' :D

Examples and their equivalent BoxComponent:

Simple:

{xtype:'dom', cls:'my-class'}
//vs.
{xtype:'box', autoEl:'div', cls:'my-class'}

//or

{xtype:'dom', autoEl:'my label'}
//vs.
{xtype:'dom', autoEl:{html:'my label'}}

DomHelper:

{
xtype:'dom',
autoEl:{tag:'blockquote', html:'autoEl is cool!'},
listeners:{click:function(){alert(this.autoEl.html)}, proxy:true}
}

//vs.

{xtype:'box', autoEl:{tag:'blockquote', html:'autoEl is cool!'}}
//lazy mouse listeners cannot normally proxy to the Element to my knowledge

Updates
-- 2008-02-14 --
[fixed] - Listeners whether lazy or dynamic receive intended Component scope rather than Element
[changed] - Now piggybacks on standard autoEl config rather than html property
[changed] - Cleaned up globals in closure
[added] - Plain text in autoEl gets wrapped by div for a label
[implemented] - Canvas subclass of Container sharing DomComponent methods
-- 2008-02-15 --
[fixed] - Complete event rewrite accounting for numerous oversights including removal
[changed] - Event proxying requires the proxy config property which may be used anywhere the scope property is expected
-- 2008-02-16 --
[fixed] - Forgot addListener/removeListener aliases for Canvas
[changed] - Capitalized on base addListener's recursion to greatly simplify proxying
-- 2008-02-17 --
[fixed] - Cavas returns autoEl content for resizing rather than containing div
[changed] - Added dependency for internal use
-- 2008-02-20 --
[changed] - Cavas defaults to AlignLayout if installed
[added] - html property for autoEl generated content wrapped by el
-- 2008-02-26 --
[fixed] - Proxy against items' getActionEl() rather than el itself
-- 2008-02-27 --
[fixed] - Leave autoEl id's to superclass and fix html property for 2.0.2 compliance
-- 2008-03-05 --
[added] - getFirstChild() and getLastChild() methods to Canvas for easy access to anonymous items

jack.slocum
13 Feb 2008, 12:12 PM
Try the autoEl config. It was added in 2.0.1. I don't believe it shows up in the docs yet, but we will get that fixed for the next release.

Simple:
{xtype:'box', autoEl: 'div', cls:'my-class'}

DomHelper:
{xtype:'box', autoEl: {tag:'blockquote', html:'autoEl is cool!'}}

dnalot
14 Feb 2008, 6:07 PM
thanks jack i hadn't noticed that b/c it was hidden in Component rather than BoxComponent. i altered my class to provide the following extra utility:

1. if no applyTo, autoEl, etc, at all is provided, autoEl defaults to {}, providing an empty div.

2. if autoEl contains a String w/o any tags, e.g. "my label", it defaults to {html : autoEl}, wrapping plain text in a div rather than interpreting it as a tag.

3. all events added to the Component at any time proxy to the Element itself making it easy to lazy init mouse handlers in the listeners config property. additionally the scope of that object and thus its handlers defaults to the Component if none is specified. this is intended to provide the handler easy access to both the Element (this.el) as well as its Component's container (this.ownerCt).

thanks again for the pointer i may have missed that in another post :)