Extjs 学习 日记 (一) ： Extjs咋回事呢？

 

Extjs 学习日记： Extjs咋回事呢？

  

引子：

公司在web开发中需要一个界面脚本库，从而支持界面上的快速开发。我因此开始关注javascript UI库，在查找了大量资料的后确定采用Extjs，并开始了Extjs的学习。在此将每日的学习心得记录下来，以此督促自己同时也与正在进行该方面学习或开发的朋友们探讨。

 

正文：

好，书归正传。

Extjs何方神圣？Extjs是当今非常流行的富客户端脚本库，或者叫javascript UI 库。衍生于Yahoo的YUI-ext 。该脚本库代码及文档都发布在 www.extjs.com 网站上，作为目前开源的脚本库之一，在代码更新速度、社区人气及使用率上都领先于其他的脚本库。

 

Javascript 脚本语言已经存在了许多年，在AJAX概念未提出以前并未受到重视。由于AJAX概念的明确提出，无刷新数据交换技术才逐步为人们所重视，由此带来的便利导致开发人员对该技术的喜欢和使用。同时为了对脚本操作方便及加强界面效果逐步加强了对javascript的使用。为了方便开发，提高开发效率，在此基础上不断有通用的脚本库产生。

 

Extjs只是一个javascript的脚本库，同时结合ＣＳＳ样式表，实现了各种视觉效果。他的基础构成包括两个脚本库ext-all.js,ext-base.js,及样式表ex-all.css。目前最新版本2.02.，可以在 www.extjs.com 网站下载。该网站目前免费提供全部代码、文档及例程。如果需要实时获取最新代码，从SVN服务器上获取，就需要交费了。当然目前在网站上可以免费下载的代码足以满足我们日常开发的需要。

 

俗话说：光说不练假把式,光练不说真把式,连说带练全把式。说了这么多了，现在就看看这个脚本库的界面效果----露一小脸。您请看，代码如下：

 

咱先整个静态页面，hello.htm

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

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

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

 

<script type="text/javascript" >

Ext.onReady(function(){ Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');   });

</script>

代码那叫一个简单明了，上面说过了把两个基础的脚本文件和一个样式表引用进来，这都是核心内容。然后写几句简单的脚本调用一下，显示一个那就相当美丽的提示框，效果如何，您看下面的图片。这个页面要放在您老人家下载的ext 压缩包的解压后目录下。那位看官说了要是还不行呢，那你就把页面中文件引用的路径去掉，然后找到这几个文件都放一个目录就行了。如果还不行呢，那您就别学了。

 

 

效果还行吧，一个很的提示框。

 

能多整几个么？没问题，整，整，整，整，整，整，老鼻子多了，你看咋样？

 

注：当年我自己做这个可是花了一些时间的，而且要控制的地方比较多，要用一个div把页面上的东西挡住使之失效，然后再用div显示这么个信息框。后来发现如果页面上有列表框，用div还档不住，必须要用个iframe才可以，而且还要处理浏览器的兼容问题，一个字，麻烦。（数错了应该是两个字）。现在幸福了，就这么一整，引用，然后调用就成了。先不管他怎么实现，也许和俺当年的实现方法差不多，但是人家这个通用而且好用，那就行了，咱要求不高。

---

 

社区门户网站，而且可以拖动

---

窗体，可以放大缩小

---

这个做网站的都需要，老漂亮的表格

---

菜单，你能分辨是WEB 还是客户端的么？

---

---

尾声：效果不错吧，今儿就这样了，明天继续。革命不是请客吃饭，坚持到底才能胜利！