初次接触Ext

作者在 2008-03-17 17:05:18 发布以下内容

        下午项目经理说可能要用到Ext和dwr,叫我这段时间好好看下。于是,马上去网上找例子。
        那个官网上的例子的确不错,太强大了!让我见识到了Ext的厉害!不过看了下源代码,很复杂,绝对不是像我这种从来没听过Ext的人一下能看懂的。
        学习一门语言最好的办法就是边看边写。于是自己想模仿着写个最简单的Hello World,但是试了N久,就是不弹出这个对话框来...郁闷...于是慢慢查问题,发现有几个文件是必须要导入的,而且顺序还不能错!光这个就查了好久,最后终于被弄出来了!哈哈~~~~兴奋中,赶紧记下来:
        根据查到的资料,首先,下载好Ext的包后,解压。其中,ext-all.js,adapter/ext/ext-base.js和整个resources目录是必需的,还有重要的文件是build/locale/ext-lang-zh_CN.js和ext-all.css。
        我写的简单例子:
        index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Ext Index Page</title>

<script type="text/javascript" src="exts/ext-base.js" ></script>

<script type="text/javascript" src="exts/ext-all.js" ></script>

<script type="text/javascript" src="index.js" ></script>

</head>

<body>

<script>

Ext.onReady(function(){

alert("ready!");

});

</script>

<input type="button" id="my" value="Click me" />

</body>

</html>
        注意开头的ext-base.js和ext-all.js的引入顺序,不能错啊!如果需要引入ext-all.css的话,必须放在这个两个文件之前引入,build/locale/ext-lang-zh_CN.js则放后面。
        然后是index.js:

Ext.onReady(function(){

var button = Ext.get('my');

button.on('click', function(){

alert("Hello world!");

});

});
        嗯,这个就是超级简单的例子。加载完index.html页面后显示ready,点击按钮显示Hello world!。
        好,今天就到这里了。要复习下JavaScript的内容了。

Ext2.0 | 阅读 2264 次
文章评论,共0条
游客请输入验证码