ExtGrid简易教程.doc

Ext.Grid 前言： 什么是Ext？从应用角度上讲Ext是一个用户界面库，而不是一个简单的JavaScript Library。原本作为Yahoo! UI Library(也就是YUI)的扩展而被开发出来，但从1.1版本开始由于支持者的增多，已经得到了必要的扩充，不再依赖于YUI。ExtJS可以与prototype.js和jquery等成熟的js库一起使用，也可以作为单独的应用部署到开发中去，目前必威体育精装版版本为2.1 本例子只是一个简单的利用Ext.Grid组件+JSP+Struts实现与数据库交互的增删改查示例，由于本人也是个初学Ext不到5天的人，所以代码粗糙还望大家见谅(实际完成整套增删改查也不过两天的时间，这说明Ext还是一个很好上手的工具的，大家可以打消顾虑尽情来享受Ext带给我们绚丽多彩的前台界面了！) PS： 本例是对照附件中的EXT2.0中文教程.pdf完成的，大部分代码都是照猫画虎样的照的教程敲的，但是该教程由于Ext版本变更或其他原因导致某些功能在Ext2.1下无法使用，所以才编写了这个简易教程，本例中大部分代码在EXT2.0中文教程.pdf中都可以找到，所以就不在这里复述了，只是针对EXT2.0中文教程.pdf中的一些由于版本改动造成的偏差进行说明，建议大家在学习EXT2.0中文教程.pdf中的Grid教程时对照的本例子来学习 准备工作 运行环境:MyEclipse6.0.1+JDK1.5+mssql2000 首先，建立一个web工程，导入Struts包(我使用的1.1版本```是不是很复古?)以及mssql的连库Jar包 将Ext2.1压缩包中的resources文件夹,ext-all.js,ext-all-debug.js,ext-base.js还有ext-lang-zh_CN.js拷贝到工程的WebRoot目录下 将org.json工具包拷贝到工程的src目录下,用于java对象与json格式数据的封装解析 在mssql2000数据库中建立一个简单的数据库EasyDB,建立一张表emp，共有四个字段eid，ename，esex，edescn，加入若干条数据后在工程中编写DBConnection数据库连接类并测试连接通过 至此,准备工作就算做完了!接下来就进入实际编码阶段 编码工作 工程组成：一个Html页面用于界面表现; 一个Jsp页面用于将后台数据封装成json格式的字符串后供Ext读取; 三个struts的Action，包括list,save还有del,分别完成查询,增改还有删除的业务实现; 一个struts的ActionForm，用于描述数据库中emp表 一个EmpDAO，完成对Emp对象的增删改查等基本操作(为了方便本例中由Action直接调用EmpDAO而不在建立中间的业务层); 一个实现了Filter接口的Servlet类，负责中文过滤功能; 针对EXT2.0中文教程的一些补充修正 在body/body中加入div id=”grid” style=”height:450px”/div，这样编写好的Ext.Grid组件就会出现在这个层所在的位置了 在head中编写：script Ext.onReady(function(){ //Ext代码 }) /script 所有的Ext代码都应该写在Ext.onReady(function(){})之间 Jsp在拼写JSON格式的字符串结束后使用response输出后必须将其关闭（response.getWriter().close();），否则Ext将无法读取到输出到页面上的json格式字符串 个人感觉本例中Ext2.1与Ext1.1最大的区别在于为Grid按钮添加的方法 1.1中EditorGrid变成了2.1中EditorGridPanle 2.1中添加按钮的方式为在创建EditorGridPanle时配置属性buttons，要求格式为buttons:[{},{}],每一个{}代表一个按钮。举例 新增按钮 { text:添加一行, handler:function(){ var initValue = { eid:, ename:请输入姓名, esex:, edescn:请输入备注 }; var p = new Record(initValue); grid.stopEditing(); ds.insert(0,p); grid.startEditing(0,0); p.dirty = true; p.modified = initValue; if(ds.modified.indexOf(p) == -1){ ds.