ExtJS Javascript Library for Beginners!

The Ext Javascript library for beginners, as I learn ExtJS so will you!

Ext.onready and Ext.MessageBox.alert

leave a comment »


<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>

About these ads

Written by jameshd

12th February, 2008 at 8:14 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: