1. #1
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    17
    Vote Rating
    0
    dnalot is on a distinguished road

      0  

    Lightbulb Lightweight DomComponent and Canvas

    Lightweight DomComponent and Canvas


    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'

    Examples and their equivalent BoxComponent:

    Simple:
    Code:
    {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:
    Code:
    {
      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
    Attached Files
    Last edited by dnalot; 5 Mar 2008 at 8:13 AM. Reason: update

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    16
    jack.slocum will become famous soon enough

      0  

    Default


    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!'}}
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2007
    Posts
    17
    Vote Rating
    0
    dnalot is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar