ExtJS开发实践

很久以前就看过有关ExtJS方面的知识，一直没有拿它做一些东西，闲来无事帮女朋友做毕业设计，于是选择用ExtJS来实现下，弄了两天，感觉还是比较好上手的，这里结合实例和大家分享下利用ExtJS开发的知识。

ExtJS简介

ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

OK，简单的了解下ExtJS，废话不多说，进入正题。

ExtJS开发实践之Border布局

Border布局在ExtJS中的应用很常见，可以将整个页面划分成几个区域，该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。

基本代码：

Code

通过定义Viewport，就可以实现Border的布局，将页面划分成东西南北中五个部分，每个部分添加什么，就有自己决定啦，很好理解。

效果：

ExtJS开发实践之Tree控件

对于ExtJS中的树来说，树加载器TreeLoader是一个比较关键的部件，树加载器由Ext.tree.TreeLoader类定义，只有AsyncTreeNode才会使用TreeLoader。

基本代码：

Code

从上面的代码中可以看出，树中显示的内容是从Content/DMenuTree.aspx中Load到的，这里我实现的方法是通过数据库中一个表保存树形结构，然后通过将数据转化成Json输出到页面中。

效果：

ExtJS开发实践之TabPanel控件

个人认为这是ExtJS中提供的最实用绚丽的控件之一，他可以实现Tab的添加和删除，给用户很人性的用户体验。

基本代码：

Code

效果：

ExtJS开发实践之数据的获取和显示

 ExtJS中的数据交互基本上就是以Ajax的方式进行传递和实现的，也就是可以不用刷新页面，就可以访问服务器的程序进行数据读取或数据保存等操作。

基本代码：

Code

简单说下上面的代码，大家就明白ExtJS是如何获取数据的了。首先定义一个保存数据库字段的数组，然后定义ExtJS中保存数据的核心Ext.data.Store，从CarInfo.aspx中读取数据，并将读取的数据通过JsonReader付给定义好的数组，最后通过Load方法加载参数。而CarInfo.aspx中实现的是对数据的访问操作。从这也可以看出，通过脚本实现数据的交互，从而完成无刷新的操作。

数据的显示：这里要介绍的是ExtJS中的GridPanel

ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。这里不逊色于GridView的功能。

基本代码：

Code

效果：


ExtJS开发实践之Window窗体

ExtJS中窗口是由Ext.Window类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。

基本代码：

Code

效果：

实现起来可以说是相当的容易。很实用。

ExtJS开发实践之换肤

最后我们来说下ExtJS中的换肤功能，这个是有ExtJS内部提供的，实用起来十分方便，我只需定义一个皮肤脚本文件：

Code

通过选择，指定不同的css。

效果：

 

小结：ExtJS开发实践中的基本应用就介绍到这，通过强大的ExtJS类库，可以很容易的实现炫酷的UI效果，对我们的开发带来很大的帮助，但是，好事的同时也有一些弱势，脚本的调试就是很头疼的问题，一个小小的"，"就可能叫你检查半天。相信合理的使用ExtJS，会给你的开发带来很不错的效果。

 

 

posted @ 2009-11-11 08:31  GWPBrian  阅读(8747)  评论(5)  编辑  收藏  举报