基于Ext JS的個人教學(xué)信息統(tǒng)計系統(tǒng)的設(shè)計與實(shí)現(xiàn)

李翠平

摘要：該文介紹了Ext JS的基本應(yīng)用，討論了Ext JS優(yōu)秀的外觀設(shè)計，并用此框架開發(fā)了一個個人教學(xué)信息統(tǒng)計系統(tǒng)，界面的設(shè)計全部使用EXT JS6.0，后臺用Java進(jìn)行數(shù)據(jù)的維護(hù)，數(shù)據(jù)庫使用MySQL，該系統(tǒng)能實(shí)現(xiàn)個人信息的查詢與保存。

關(guān)鍵詞：Ext JS；面板；表單；數(shù)據(jù)提交；數(shù)據(jù)顯示

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2016）27-0059-03

1 概述

Ext JS是一個用javascript寫的，主要用于創(chuàng)建前端用戶界面，是一個與后臺技術(shù)無關(guān)的前端優(yōu)秀的ajax框架， 因此，可以把ExtJS用在.Net、Java、JSP等各種開發(fā)語言開發(fā)的應(yīng)用中。EXT JS開發(fā)了一系列非常簡單易用的控件及組件庫，我們只需要使用這些組件就能實(shí)現(xiàn)各種豐富多彩的UI的開發(fā)，即使項(xiàng)目組沒有美工人員，也可以開發(fā)出專業(yè)的用戶界面。這些僅僅是其外在美，其還有最核心的內(nèi)在美，即JSON。JSON 為一種更輕、更友好的 Web services客戶端的格式（多采用瀏覽器的形式或訪問 REST風(fēng)格 Web服務(wù)的Ajax應(yīng)用程序的形式）。JSON和XML一樣也是一種簡單文本格式。相對于XML，它更加易讀、更便于肉眼檢查。在語法的層面上，JSON與其他格式的區(qū)別是在于分隔數(shù)據(jù)的字符，JSON中的分隔符限于單引號、小括號、中括號、大括號、冒號和逗號。每當(dāng)要統(tǒng)計個人相關(guān)信息的時候，最棘手的就是之前的信息保存問題，比如個人的教學(xué)任務(wù)，每個學(xué)期都會有多個班級，這樣幾年累積下來就會有不少的數(shù)據(jù)，基于此，借助EXT開發(fā)了一個小的應(yīng)用系統(tǒng)，用來保存?zhèn)€人授課信息，同時對個人授課信息還能進(jìn)行簡單的查詢。此系統(tǒng)略加改造，也同樣適用于其他領(lǐng)域的個人信息記錄。

2 如何在頁面中使用Ext JS

想要在頁面中使用Ext，首先去官網(wǎng)下載安裝文件（http：//www.sencha.com/products/extjs），下載完成后，會有一個壓縮文件，解壓該壓縮包，得到相關(guān)的文件和目錄，接下來在頁面中導(dǎo)入開發(fā)需要用到的文件

如果需要用到控件中的相關(guān)信息顯示中文字符（默認(rèn)顯示英文），還需要在頁面中添加如下代碼：

3 系統(tǒng)的界面設(shè)計及后臺實(shí)現(xiàn)

首先設(shè)計的是主界面，選擇的是window面板，相比較Panel面板，對于本系統(tǒng)而言window面板容器已經(jīng)足夠滿足我們的需求，用起來也較方便。效果如下圖所示：

附上具體的實(shí)現(xiàn)代碼：

function main（）

{

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

{

title："個人教學(xué)信息統(tǒng)計"，

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（）；

}

接著是設(shè)計信息登記模塊，該模塊所涉及的控件比較多，所以如何對各個模塊進(jìn)行排版，是首要考慮的。在設(shè)計該模塊時，選擇了表單面板，主要是考慮到后期數(shù)據(jù)的提交較方便，而且表單面板在排版上也能滿足我們的需求。附上該模塊實(shí)現(xiàn)的效果圖：

附上部分代碼：

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

{

// 指定讀取數(shù)據(jù)的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"

}）；

//課程學(xué)時數(shù)

var classnumber=Ext.create（"Ext.form.Number"，{name："numberlove"，fieldLabel："課程學(xué)時數(shù)"}）；

//班級人數(shù)

var studentnumber=Ext.create（"Ext.form.Number"，{name："numberlove"，fieldLabel："班級人數(shù)"}）；

面板的組裝：

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

title："個人教學(xué)信息登記"，

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（"失敗"，"對不起，表單提交失敗"）}}）

}

}

在設(shè)計該模塊時，充分利用了EXT JS的的表單元素驗(yàn)證功能，實(shí)現(xiàn)用戶名和密碼不能為空以及用戶名和密碼的格式驗(yàn)證。比如對于授課時間的格式設(shè)置，首先授課時間不能為空的驗(yàn)證可以方便的實(shí)現(xiàn)，同時還可以設(shè)置授課時間的輸入格式。

最后設(shè)計的是查詢模塊，該模塊首先是界面設(shè)計，這部分的設(shè)計比較簡單，主要實(shí)現(xiàn)放在了后臺數(shù)據(jù)庫及java的連接上。該功能的實(shí)現(xiàn)選擇了MVC模式，這樣可以充分的將頁面設(shè)計部分與數(shù)據(jù)處理分離開，這樣后期如果想將該系統(tǒng)應(yīng)用在其他領(lǐng)域也很容易實(shí)現(xiàn)?，F(xiàn)摘錄部分主要實(shí)現(xiàn)數(shù)據(jù)庫連接與操作代碼：

//傳遞sql語句，返回受影響的行數(shù)

public int executeUpdate（String sql） throws SQLException，

ClassNotFoundException， IOException {

if （st == null）

getStatement（）；

int h = st.executeUpdate（sql）；

return h；

}

//傳遞sql語句，返回查詢的結(jié)果集

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（）；

}

}

在進(jìn)行查詢信息輸出時，需要將JSON格式的數(shù)據(jù)轉(zhuǎn)換為字符串輸出，在Ext JS中，可以使用如下方式進(jìn)行轉(zhuǎn)換

json方法應(yīng)用：decode：將json字符串轉(zhuǎn)換為對象，encode：將對象轉(zhuǎn)換為json字符串

var Mystrjson="{Name：陳建強(qiáng)，Sex：男，Age：26，Married：false}"；

//第一json字符串

var Myobjson=Ext.decode（Mystrjson）；

//將json字符串轉(zhuǎn)換為對象

Myobjson.Name；//使用json對象屬性

var Mystrjson2=Ext.encode（Myobjson）；//將json對象轉(zhuǎn)換為json字符串 其中Mystrjson=Mystrjson2

4 結(jié)束語

本系統(tǒng)的使用能基本上滿足個人信息的保存，解決了個人信息簡單并且長期保存的問題。在同事使用過程中得到了一定的肯定。該系統(tǒng)可以基于網(wǎng)絡(luò)進(jìn)行訪問，系統(tǒng)中后續(xù)還可以在添加相關(guān)的個人信息管理功能，滿足個人工作信息和生活信息的相關(guān)處理。

參考文獻(xiàn)：

[1] 李鋼.瘋狂Ajax講義[M]. 3版. 北京：電子工業(yè)出版社，2013.

[2] 趙俊峰，姜寧.Java Web應(yīng)用開發(fā)案例教程——基于MVC模式的JSP+Servlet+JDBC和AJAX[M]. 北京：清華大學(xué)出版社，2013.

[3] 王電鋼 劉孫俊.Java Web應(yīng)用開發(fā)技術(shù)[M]. 北京：人民郵電出版社，2012.

[4] 王維虎，宮婷.網(wǎng)頁設(shè)計與開發(fā)HTML、CSS、JavaScript[M]. 北京：人民郵電出版社，.

[5] 傳智播客高教產(chǎn)品研發(fā)部.HTML+CSS+SjavaScript網(wǎng)頁制作案例教程[M]. 北京：人民郵電出版社， 2015.

[6] Jesus Garcia.Ext JS實(shí)戰(zhàn)[M]. 北京：人民郵電出版社， 2012.

[7] 鐘協(xié)良.Ext JS開發(fā)實(shí)戰(zhàn)[M]. 北京：清華大學(xué)出版社， 2012.

[8] 張鑫，黃燈橋.JavaScript凌厲開發(fā)——Ext JS3詳解與實(shí)踐[M].北京：清華大學(xué)出版社， 2010.