Web development involves hefty doses of DOM manipulation. This recipe shows how you can use Ext JS to get a handle on any DOM element.
Using a div element as an example, you can get a handle to the div in the following way:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css"
href="../ext/css/ext-all.css"/>
<script type="text/javascript" src="../ext/ext-base.js"></script>
<script type="text/javascript"
src="../ext/ext-all-debug.js"></script>
<script type="text/javascript"> Ext.BLANK_IMAGE_URL = '../ext/images/default/s.gif';
Ext.onReady(function() {
var firstDiv = Ext.get("div-1");
Ext.Msg.alert('Using Ext.get(el)', firstDiv.id);
});
</script>
</head>
<body>
<div id="div-1">This is the first div</div>
</body>
</html>
The previous code uses Ext.get(element), a shorthand for Ext.Element.get(element), to acquire a reference to a div element in the document. You can use this function to retrieve references that encapsulate DOM elements.
The Ext.get(element) function uses simple caching to consistently return the same object. Note that Ext.get(element) does not retrieve Ext JS components. This is can be accomplished using Ext.getCmp(), explained in the next recipe.