ExtJs01：第一天

    公司网站开发前台用的是ExtJs2，没办法，只能开始重新学习了，准备把每天学到的ExtJs写下来，当做日志吧。其实我不想学ExtJs的，因为我大学的时候看过一本书，说JS将死，学了也没用。再说HTML5就要出山了，王者降临，无人可挡。只是没办法，谁叫我上班啊，还是老老实实的学吧。

    去官网下载了ExtJs2的包，打开官网，出现一行字：Ext Js 4 Preview。Fuck，4代都要出来了，我才开始学2代，真纠结。找到老版本的Ext，下了一个2.3版本的。地址为：http://dev.sencha.com/deploy/ext-2.3.0.zip

 

 

 

    解压之后，看了下ExtJs包里面的内容，大概了解了下

    docs：帮助文档

    examples：案例

    source：ExtJs源码

    resources：各种CSS，图片资源

 

 

    其他的就不管了，先来个 Hello ExtJs2吧 。不过先搞项目之前，建议下个插件spket，就是像java一样自动提示的。想想ExtJs这么多组件我就头疼，没有提示功能怎么行啊。安装spket我就不多说了，自己网上找的。 

 <link rel="stylesheet" type="text/css" href="extJs2.3/resources/css/ext-all.css" />
 <script type="text/javascript" src="extJs2.3/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="extJs2.3/ext-all-debug.js"></script>

 

jsp界面中需引入这三个文件，第一个为ExtJs的CSS，后两个为ExtJs的基本文件，相当于java的jre吧。第三个我导入的是ext-all-debug.js，查看下载下来的包的话，你可以发现还有一个名字和它差不多的文件ext-all.js，一个为开发版，一个是产品版本。功能上是一样的。其实，你只要打开着两个文件就可以发现其中的奥秘了。

 

新建了JS文件，里面代码为：

Ext.onReady(function() {
   Ext.MessageBox.alert("hello", "Hello,ExtJs2.I don't like you");
  });

 

 

搞笑的是，要使你把刚才你引入的CSS文件ext-all.css删除。再调试下，你会发现弹出的对话框变成了这样

好了，ExtJs首战告捷。

中间有个小插曲

自动生成的JSP页面中有一语句

<base href="<%=basePath%>">

 我没注意到，开始引入的文件前面都加了../../，这导致一直没有弹出对话框。太大意了。

 

 

 

 

 

 

 

 

 

 

 

 

评论

1 楼 kangtahewumin 2011-08-23  

你怎么才坚持了一天呀，大哥！