Article
Build Rich Internet Applications with Ext
Page: 1 2
Let's take a look at a simple example of what Ext can do for us. Suppose we wanted to implement a graphical fading feature in our application -- something we can use to make an object appear and disappear in a way that looks pleasing to the eye. Here's a possible implementation of such a feature in plain JavaScript, without using Ext:
<html>
<head>
<title>Fading without Ext</title>
</head>
<body>
<div
id="my-element-to-fade"
style="width:100px;height:100px;background-color:Red">
</div>
<br />
<button onclick="shiftOpacity('my-element-to-fade', 1000);">
Fade!
</button>
<script type="text/javascript">
function changeOpacity(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function setOpacity(id, opStart, opEnd, ms)
{
var speed = Math.round(ms / 100);
var timer = 0;
if(opStart > opEnd)
{
for(i = opStart; i >= opEnd; i--)
{
setTimeout(
"changeOpacity(" + i + ",'" + id + "')",
(timer * speed)
);
timer++;
}
}
else if(opStart < opEnd)
{
for(i = opStart; i <= opEnd; i++)
{
setTimeout(
"changeOpacity(" + i + ",'" + id + "')",
(timer * speed)
);
timer++;
}
}
}
function shiftOpacity(id, ms)
{
if(document.getElementById(id).style.opacity == 0)
{
setOpacity(id, 0, 100, ms);
}
else
{
setOpacity(id, 100, 0, ms);
}
}
</script>
</body>
</html>
This code generates a simple page with just a red square and a button on it (view the demo). Clicking the button either fades the red square in or out, depending on whether or not it's currently visible. The functionality works just fine, but as you can see it required quite a few lines of (ugly) code. Fortunately, we can achieve the exact same functionality using Ext, but with much less code (download Ext if you'd like to play along at home):
<html>
<head>
<title>Fading with Ext</ title>
<script
type="text/javascript"
src="ext/adapter/prototype/prototype.js">
</script>
<script
type="text/javascript"
src="ext/adapter/prototype/scriptaculous.js?load=effects">
</script>
<script
type="text/javascript"
src="ext/adapter/prototype/ext-prototype-adapter.js">
</script>
<script
type="text/javascript"
src="ext/ext-all.js">
</script>
</head>
<body>
<div
id="my-element-to-fade"
style="width:100px;height:100px;background-color:Red;">
</div>
<button onclick="showHide('my-element-to-fade');" style="margin-top: 10px;">
Fade!
</button>
<script type="text/javascript">
function showHide(id)
{
Ext.get(id).toggle(true);
}
</script>
</body>
</html>
Both code examples give the exact same result, as illustrated below (see for yourself).
The code of interest to us in these examples is what you see between the <script> tags in the two code listings. Although this is a very simple example, the difference is quite remarkable. If you put this into a bigger context (like a full-blown web-based word processor), you can imagine what difference the use of a library like Ext could make.
Summary
The Ext JavaScript library can save you from enormous headaches. Seven years ago, before words like Ajax and Rich Internet Application existed, I joined a team that began the development of a full-featured web-based business system. We wanted to make it a worthy alternative to desktop-based systems, so a rich and intelligent user interface was a must. Back then, nothing even close to Ext existed, and while our system today implements everything we need it to, there's no doubt that if something like Ext had existed from the very beginning it would have reduced the development effort significantly.
As I've stated a couple of times in this article, Ext is a very consistent library -- much of the functionality can be found throughout the whole library. This means it's important to get things right from the beginning, as it will help you a lot when moving forward to the more advanced (and interesting) features.