基于Ext JS的个人教学信息统计系统的设计与实现

李翠平

摘要：该文介绍了Ext JS的基本应用，讨论了Ext JS优秀的外观设计，并用此框架开发了一个个人教学信息统计系统，界面的设计全部使用EXT JS6.0，后台用Java进行数据的维护，数据库使用MySQL，该系统能实现个人信息的查询与保存。

关键词：Ext JS；面板；表单；数据提交；数据显示

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）27-0059-03

1 概述

Ext JS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端优秀的ajax框架， 因此，可以把ExtJS用在.Net、Java、JSP等各种开发语言开发的应用中。EXT JS开发了一系列非常简单易用的控件及组件库，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发，即使项目组没有美工人员，也可以开发出专业的用户界面。这些仅仅是其外在美，其还有最核心的内在美，即JSON。JSON 为一种更轻、更友好的 Web services客户端的格式（多采用浏览器的形式或访问 REST风格 Web服务的Ajax应用程序的形式）。JSON和XML一样也是一种简单文本格式。相对于XML，它更加易读、更便于肉眼检查。在语法的层面上，JSON与其他格式的区别是在于分隔数据的字符，JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。每当要统计个人相关信息的时候，最棘手的就是之前的信息保存问题，比如个人的教学任务，每个学期都会有多个班级，这样几年累积下来就会有不少的数据，基于此，借助EXT开发了一个小的应用系统，用来保存个人授课信息，同时对个人授课信息还能进行简单的查询。此系统略加改造，也同样适用于其他领域的个人信息记录。

2 如何在页面中使用Ext JS

想要在页面中使用Ext，首先去官网下载安装文件（http：//www.sencha.com/products/extjs），下载完成后，会有一个压缩文件，解压该压缩包，得到相关的文件和目录，接下来在页面中导入开发需要用到的文件

如果需要用到控件中的相关信息显示中文字符（默认显示英文），还需要在页面中添加如下代码：

3 系统的界面设计及后台实现

首先设计的是主界面，选择的是window面板，相比较Panel面板，对于本系统而言window面板容器已经足够满足我们的需求，用起来也较方便。效果如下图所示：

附上具体的实现代码：

function main（）

{

var mywindow=Ext.create（"Ext.window.Window"，

{

title："个人教学信息统计"，

width：300，

height：200，

tools：[{type："minimize"}，{type："maximize"}]，

tbar：[{xtype："button"，text："信息登记"，menu：[{text："登记"，handler：dengji}]}，{xtype："button"，text："信息查询"，menu：[{text："查询"，handler：chaxun}]}，{xtype："button"，text："日历表"，menu：{handler：function （）{Ext.create（"Ext.menu.DatePicker"，{value：new Date（）}）}}}]，

renderTo：Ext.getBody（），

html：""

}）

mywindow.show（）；

}

接着是设计信息登记模块，该模块所涉及的控件比较多，所以如何对各个模块进行排版，是首要考虑的。在设计该模块时，选择了表单面板，主要是考虑到后期数据的提交较方便，而且表单面板在排版上也能满足我们的需求。附上该模块实现的效果图：

附上部分代码：

var bookStore = Ext.create（Ext.data.Store，

{

// 指定读取数据的name、id字段

fields： [name ， id]，

data ： [

{"id"： 1， "name"："11软件1班"}，

{"id"： 2， "name"："11软件2班"}，

{"id"： 3， "name"："11软件3班"}，

{"id"： 4， "name"："11软件4班"}

]

}）；

var grade=Ext.create（"Ext.form.ComboBox"，{

name："grade"，

fieldLabel："任课班级"，

store：bookStore，

mode："local"，

triggerAction："all"，

emptyText："请选择任课班级"，

displayField："name"，

valueField："id"

}）；

//课程学时数

var classnumber=Ext.create（"Ext.form.Number"，{name："numberlove"，fieldLabel："课程学时数"}）；

//班级人数

var studentnumber=Ext.create（"Ext.form.Number"，{name："numberlove"，fieldLabel："班级人数"}）；

面板的组装：

var f=Ext.create（"Ext.form.Panel"，{

title："个人教学信息登记"，

width：500，

autoHeight：true，

url："FormServlet"，

method："post"，

style："padding：6px"，

labelAlign："right"，

tools：[{type："close"，handler：function （）{f.close（）}}]，

frame：true，

items：[time，name，classnumber，grade，studentnumber，information]，

buttons：[

{xtype："tbfill"}，

{

text："保存"，

handler：function （）{

f.getForm（）.submit（

{

url：save.jsp，

success：function （）{Ext.Msg.alert（"成功"，"恭喜您，提交成功！"）}，

failure：function （）{Ext.Msg.alert（"失败"，"对不起，表单提交失败"）}}）

}

}

在设计该模块时，充分利用了EXT JS的的表单元素验证功能，实现用户名和密码不能为空以及用户名和密码的格式验证。比如对于授课时间的格式设置，首先授课时间不能为空的验证可以方便的实现，同时还可以设置授课时间的输入格式。

最后设计的是查询模块，该模块首先是界面设计，这部分的设计比较简单，主要实现放在了后台数据库及java的连接上。该功能的实现选择了MVC模式，这样可以充分的将页面设计部分与数据处理分离开，这样后期如果想将该系统应用在其他领域也很容易实现。现摘录部分主要实现数据库连接与操作代码：

//传递sql语句，返回受影响的行数

public int executeUpdate（String sql） throws SQLException，

ClassNotFoundException， IOException {

if （st == null）

getStatement（）；

int h = st.executeUpdate（sql）；

return h；

}

//传递sql语句，返回查询的结果集

public ResultSet executeQuery（String sql） throws SQLException，

ClassNotFoundException， IOException {

if （st == null）

getStatement（）；

ResultSet rs = st.executeQuery（sql）；

return rs；

}

private void insert（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException {

String time=request.getParameter（"time"）；

String name=request.getParameter（"name"）；

String grade=request.getParameter（"grade"）；

String classnumber=request.getParameter（"classnumber"）；

String studentnumber=request.getParameter（"studentnumber"）；

String information=request.getParameter（"information"）；

TeachingInfo info=new TeachingInfo（）；

info.setTime（time）；；

info.setName（name）；

info.setGrade（grade）；

info.setClassnumber（classnumber）；

info.setStudentnumber（Integer.parseInt（studentnumber））；

info.setInformation（information）；

TeachingInfoDao dao=new TeachingInfoDao（）；

boolean flag；

try {

flag = dao.insertOne（info）；

if（flag）

{

PrintWriter out=response.getWriter（）；

out.print（"{success：true，msg：信息保存成功}"）；

}

} catch （ClassNotFoundException | SQLException e） {

// TODO Auto-generated catch block

e.printStackTrace（）；

}

}

在进行查询信息输出时，需要将JSON格式的数据转换为字符串输出，在Ext JS中，可以使用如下方式进行转换

json方法应用：decode：将json字符串转换为对象，encode：将对象转换为json字符串

var Mystrjson="{Name：陈建强，Sex：男，Age：26，Married：false}"；

//第一json字符串

var Myobjson=Ext.decode（Mystrjson）；

//将json字符串转换为对象

Myobjson.Name；//使用json对象属性

var Mystrjson2=Ext.encode（Myobjson）；//将json对象转换为json字符串 其中Mystrjson=Mystrjson2

4 结束语

本系统的使用能基本上满足个人信息的保存，解决了个人信息简单并且长期保存的问题。在同事使用过程中得到了一定的肯定。该系统可以基于网络进行访问，系统中后续还可以在添加相关的个人信息管理功能，满足个人工作信息和生活信息的相关处理。

参考文献：

[1] 李钢.疯狂Ajax讲义[M]. 3版. 北京：电子工业出版社，2013.

[2] 赵俊峰，姜宁.Java Web应用开发案例教程——基于MVC模式的JSP+Servlet+JDBC和AJAX[M]. 北京：清华大学出版社，2013.

[3] 王电钢 刘孙俊.Java Web应用开发技术[M]. 北京：人民邮电出版社，2012.

[4] 王维虎，宫婷.网页设计与开发HTML、CSS、JavaScript[M]. 北京：人民邮电出版社，.

[5] 传智播客高教产品研发部.HTML+CSS+SjavaScript网页制作案例教程[M]. 北京：人民邮电出版社， 2015.

[6] Jesus Garcia.Ext JS实战[M]. 北京：人民邮电出版社， 2012.

[7] 钟协良.Ext JS开发实战[M]. 北京：清华大学出版社， 2012.

[8] 张鑫，黄灯桥.JavaScript凌厉开发——Ext JS3详解与实践[M].北京：清华大学出版社， 2010.