Published Sep 17, 2010 | The Sencha Dev Team | FAQ | Easy
Last Updated Jul 11, 2011

This article lists some questions you might have when accessing DOM elements with Ext JS and the Ext.get function.

Ext.get does not get my Component

Ext.get returns an Ext.Element object which is an abstraction of an HTML element object containing utility methods to perform DOM manipulation. It does not retrieve Components (e.g. Panels, Grids, form Fields, etc) by their id. To retrieve Components use Ext.getCmp.

How to access existing HTML components

Thanks to dj [1]

Your HTML code, for example here a button

<input type="submit" id="btnLaunch" value="Lancer" name="btnLaunch"/>

is NOT an Ext.Button.

An Ext.Button looks quite differently in HTML e.g. this is a button of one of my ExtJS applications

<table cellspacing="0" cellpadding="0" border="0" class="x-btn-wrap x-btn x-btn-text-icon" id="ext-comp-1169" style="width: auto;"><tbody><tr><td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button type="button" class="x-btn-text" id="ext-gen138" style="background-image: url(/img/settings.gif);">Profile</button></em></td><td class="x-btn-right"><i> </i></td></tr></tbody></table>

Ext.Button needs all those extra HTML to do it's work. Your normal HTML submit input element (not even a HTML button element ) can only be accessed as Ext.Element:

Ext.get('btnLaunch').dom.value = 'a test';

Ext.getCmp() can only get you the button object if you created that somewhere else.

E.g. I create the button mentioned above with

new Ext.Button({ 
                id:'settings-button', 
                text: 'Profile', 
                cls: "x-btn-text-icon", 
                icon: MMEPR.baseUrl + "img/settings.gif", 
                handler: this.showSettings, 
                scope: this, 
                renderTo: container 
            });

and can later get a reference to it with

var button = Ext.getCmp('settings-button');

Hide widget if not clicked on

You could do something like:

Ext.getBody().on('click', function(e){
    if (myPicker.isVisible() && !myPicker.getEl().contains(e.getTarget()){
        myPicker.hide();
    }
});

So the logic here is: Listen for clicks on the document body. If the picker is visible and the click wasn't on the date picker or one of it's child elements, hide it.

My <LI> elements are not styled

Ext resets the browser's stylesheet to a standard setting to ensure a level playing field across all browsers so that it can create pixel-perfect layouts.

The principle is outlined here: http://developer.yahoo.com/yui/reset/

Part of this is to remove the default styling of <LI> elements.

To style your <LI> elements, use a CSS rule which selects the elements you wish to style.

See http://www.w3.org/TR/CSS21/generate.html#propdef-list-style

You can avoid this problem in Ext 3