Extjs3.2+Json lib动态树与GridPanel简单展现

最近项目中要用到Extjs,网上搜了写文档看了之后,写了个小Demo。

Demo描述:

将部门信息用树展示出来,点击树节点的某个部门之后,弹出一个窗口,该窗口中展示这个部门中员工的列表。

首先,到http://www.sencha.com/products/js/download.php下载Extjs3.2的发布包,因为要用到json lib,所以还要到http://sourceforge.net/projects/json-lib/files/json-lib/下载json lib。

mysql数据库脚本:

下面建立web工程:

分别新建DeptModel,EmpModel,TreeModel和PageModel

DeptModel.java:

EmpModel.java:

TreeModel.java,用于生成部门树的模型:

PageModel.java,用于分页的模型:

下面添加工程对Extjs3.2的支持:

解压ext-3.2.0.zip到某个路径,复制adapter、pkgs、resource文件夹、ext-3.2.0/src/locale/ext-lang-zh_CN.js和ext-3.2.0/ext-all.js到WebRoot/js下面,这样就完成了对Extjs功能的支持。

接下来完成从数据库获取部门信息和人员信息并转换成JSON格式:

deptProcessor.jsp:

empProcessor.jsp:

最后列用Extjs提供的TreePanel和Window,GridPanel分别显示部门和人员信息:

tree.jsp:

在浏览器中输入 http://127.0.0.1:8080/Extjs/tree.jsp测试,效果如下:Extjs3.2+Json lib动态树与GridPanel简单展现_第1张图片

<!--StartFragment -->
哈哈,很简单吧。。。

你可能感兴趣的:(gridPanel)