下午项目经理说可能要用到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的内容了。