Ext.Element basics

by Ryan Morris

HTML

<div id="container">
    <p>I am a container</p>
</div>

CSS

body {
     background-color:#aeaeae;
 }
 #container {
     background-color:#ccc;
 }

JavaScript

// fetches the DOM node
var containerDiv = document.getElementById('container');

// fetches an Ext.Element for this node
var containerDiv = Ext.get('container');

// note that the Ext.Element.dom === the dom node itself
containerDiv.dom === document.getElementById('container');

// can set height/width
containerDiv.setHeight(100);
containerDiv.setWidth(100);

containerDiv.setSize(400, 200, {
    duration: 1,
    easing: 'bounceOut'
});

// create child nodes

containerDiv.createChild('<p>Child paragraph<p>'); // like innerHtml

// but better to use a config object

containerDiv.createChild({
    tag: 'div',
    html: 'Child div'
});

// we can nest children too

containerDiv.createChild({
    tag: 'div',
    id: 'nestedDiv',
    style: 'border: 1px solid #f90;',
    children: {
        tag: 'div',
        html: '...nested div'
    }
});

// and arrays of nested children

containerDiv.createChild({
    tag: 'div',
    id: 'nestedDiv',
    style: 'border: 1px solid #f90;',
    children: [
        {
            tag: 'div',
            html: '...nested div A'
        },
        {
            tag: 'div',
            html: '...nested div B'
        }
    ]
});

// also..
// can specify location to inject a child with second argument
// .insertFirst()
// .remove();

// and on to traversal...
containerDiv.down('div:last-child'); // css3 selectors here...
containerDiv.select('div:last-child');

// and taking it further... events, ajax