Ext Js Dom Helper

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    6 Favorites

    Ext Js Dom Helper - Presentation Transcript

    1. Creating Elements with Ext.DomHelper By Aaron Conran
    2. Creating Elements with the DOM
      • The DOM provides us with methods such as document.createElement and HTMLElement.setAttribute as well as the innerHTML property to create elements
      • Creating elements strictly through DOM methods can be tedious and verbose
    3. Cross-browser Support
      • Cross-browser inconsistencies eliminated
      • ExtJS knows when to set properties , use setAttribute or use innerHTML depending on the browser
      • Creating elements with only the DOM can be slow in certain browsers and using innerHTML is not allowed in others
    4. ExtJS DomHelper
      • The Ext.DomHelper class is a convenient utility class for working with the dom.
      • It supports using both HTML fragments and the dom
      • We’ll look at a comparison between strictly using the DOM and Ext’s DH
      • Then we’ll go over the various config options of DH
    5. Comparison
      • // Using DOM methods
      • var myEl = document.createElement('a');
      • myEl.href = 'http://www.yahoo.com/';
      • myEl.innerHTML = 'My Link';
      • myEl.setAttribute('target', '_blank');
      • document.body.appendChild(myEl);
      • // Using Ext’s DomHelper (DH) for short
      • Ext.DomHelper.append(document.body, {tag: 'a', href: 'http://www.yahoo.com/', html: 'My Link', target: '_blank'});
    6. DomHelper config
      • DH Configs are used throughout the Ext library
      • Such as:
        • autoCreate attribute of a ContentPanel or BasicDialog (Ext 1.x)
        • html attribute of a Panel or Window (Ext 2.x)
    7. DH Configs
      • DH Configs support the following custom attributes:
        • tag – this is the HTMLElement to create
        • cls – this is the CSS class to use
        • style – this is any inline CSS style info. This can be either an object literal or a quoted string
        • htmlFor – this is the HTMLElement’s for attribute
        • html – this is the inner html of the new element
        • cn / children – this is an array of children elements which also use DH configs
    8. DH Configs
      • DH configs also support all other HTML attributes
      • Ex:
        • target
        • name
        • id
        • value
        • href
    9. Ext.DomHelper
      • DomHelper provides us methods to put our newly created elements in the DOM
        • append
        • insertAfter
        • insertBefore
        • insertFirst
        • overwrite
    10. Ext.DH
      • All of these methods have the same signature
      • ( String/HTMLElement/Element el, Object/String o, [Boolean returnElement] )
        • el – is the context element
        • o – is the DH config object
        • returnElement – is an optional boolean value to return an Ext.Element instead of an HTMLElement
    11. DH
      • append – adds the new element as the last child of the context element
      • insertAfter – adds the new element directly after the context element
      • insertBefore – adds the new element directly before the context element
      • insertFirst – adds the new element as the first child of the context element
      • overwrite – overwrites the inner html of the context element
      • Code:
      • Existing markup:
      • <div id=&quot;preExistingDiv&quot;>
      • <div id=&quot;preExistingFirstChild&quot;></div>
      • </div>
      DH Complex Example
    12. DH Complex Example
      • Result:

    + sdhjl2000sdhjl2000, 3 years ago

    custom

    5706 views, 6 favs, 1 embeds more stats

    sdhjl2000@gmail.com

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 5706
      • 5588 on SlideShare
      • 118 from embeds
    • Comments 0
    • Favorites 6
    • Downloads 106
    Most viewed embeds
    • 118 views on http://www.extjswithrails.com

    more

    All embeds
    • 118 views on http://www.extjswithrails.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories