Posts Tagged ‘DOM’
Setting HTML attributes easily with Ext JS
Well a short time since i last blogged I know, sorry about that… hello facebook readers – if there are any!
This wasn’t immediately obvious to me when I first started using the Ext JS library, but there is a really neat way of setting HTML attributes.
Firstly we need a DOM element to play with…(assuming you have got a simple page to play around with…)
var my-div = Ext.get('my-element');
then we go about setting its attributes…
my-div.set({
class : 'rounded-corners',
title : 'This is my example div'
});
Of course you could do the whole code in one call
Ext.get('my-element').set({
class : 'rounded-corners',
title : 'This is my example div'
});
Either way you choose I think its a really nice way of setting attributes…
Ext.onready and Ext.MessageBox.alert
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ext</title>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<link rel="stylesheet" href="ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript">
// any code that will execute after the HTML page has loaded
// has to be passed a function to execute.
Ext.onReady(function ()
{
/* this will be exectued on page_load */
alert("we're ready now");
});
</script>
</head>
<body>
<div id="content">
<div id="header">
<h1 id="header_one">My Site Title</h1>
</div>
<div id="site_content">
<p>Hello welcome to my site.</p>
</div>
</div>
</body>
</html>
Here is a basic HTML page which is using the Ext library on its own (yeah big respect to my HTML’s) . So first things first, a lot of javascript code will throw an error if the element on the page cannot be found. For instance, we want to play with the h1 element before it is displayed on screen (i.e. the page hasn’t loaded yet) – This isn’t possible because the element doesn’t exist in the Document Object Model (DOM) yet.
So Ext has a really cool function called Ext.onReady(). Basically this waits for the entire DOM to load, just the DOM, not images or CSS and then executes whatever it is passed.
Ext.onReady(function ()
{
/* this will be exectued on page_load */
alert("we're ready now");
});
Here we have passed in a <a href=†http://simon.incutio.com/slides/2006/etech/javascript/js-reintroduction-notes.html#functionsâ€>anonymous function</a>. This is the function that will execute whenever the DOM is ready.
All we are doing is displaying an alert box. Very tricky, try and keep up
The majority of you javascript code will go in a call to Ext.onReady() so become familiar with it.
Here’s another onReady() example, this time using an Ext MesageBox. I recommend reading the documentation on the Ext.MessageBox it’s got a heap of useful methods that replace the standard rather bland javascript message boxes.
<script type="text/javascript">
Ext.onReady(function ()
{
Ext.Msg.alert('Page Load', "The Page loaded and now we're here!");
});
</script>
