資源描述：
《基于ext js的個(gè)人教學(xué)信息統(tǒng)計(jì)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。
1、基于ExtJS的個(gè)人教學(xué)信息統(tǒng)計(jì)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) 摘要：該文介紹了ExtJS的基本應(yīng)用，討論了ExtJS優(yōu)秀的外觀設(shè)計(jì)，并用此框架開發(fā)了一個(gè)個(gè)人教學(xué)信息統(tǒng)計(jì)系統(tǒng)，界面的設(shè)計(jì)全部使用EXTJS6.0，后臺(tái)用Java進(jìn)行數(shù)據(jù)的維護(hù)，數(shù)據(jù)庫使用MySQL，該系統(tǒng)能實(shí)現(xiàn)個(gè)人信息的查詢與保存?！ ￡P(guān)鍵詞：ExtJS；面板；表單；數(shù)據(jù)提交；數(shù)據(jù)顯示 中圖分類號(hào)：TP311文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044（2016）27-0059-03 1概述 ExtJS是一個(gè)用javascript寫的，主要用于
2、創(chuàng)建前端用戶界面，是一個(gè)與后臺(tái)技術(shù)無關(guān)的前端優(yōu)秀的ajax框架，因此，可以把ExtJS用在.Net、Java、JSP等各種開發(fā)語言開發(fā)的應(yīng)用中。EXTJS開發(fā)了一系列非常簡單易用的控件及組件庫，我們只需要使用這些組件就能實(shí)現(xiàn)各種豐富多彩的UI的開發(fā)，即使項(xiàng)目組沒有美工人員，也可以開發(fā)出專業(yè)的用戶界面。這些僅僅是其外在美，其還有最核心的內(nèi)在美，即JSON。JSON為一種更輕、更友好的Webservices客戶端的格式（多采用瀏覽器的形式或訪問REST風(fēng)格10Web服務(wù)的Ajax應(yīng)用程序的形式）。JSON
3、和XML一樣也是一種簡單文本格式。相對(duì)于XML，它更加易讀、更便于肉眼檢查。在語法的層面上，JSON與其他格式的區(qū)別是在于分隔數(shù)據(jù)的字符，JSON中的分隔符限于單引號(hào)、小括號(hào)、中括號(hào)、大括號(hào)、冒號(hào)和逗號(hào)。每當(dāng)要統(tǒng)計(jì)個(gè)人相關(guān)信息的時(shí)候，最棘手的就是之前的信息保存問題，比如個(gè)人的教學(xué)任務(wù)，每個(gè)學(xué)期都會(huì)有多個(gè)班級(jí)，這樣幾年累積下來就會(huì)有不少的數(shù)據(jù)，基于此，借助EXT開發(fā)了一個(gè)小的應(yīng)用系統(tǒng)，用來保存?zhèn)€人授課信息，同時(shí)對(duì)個(gè)人授課信息還能進(jìn)行簡單的查詢。此系統(tǒng)略加改造，也同樣適用于其他領(lǐng)域的個(gè)人信息記錄?！ ?如
4、何在頁面中使用ExtJS 想要在頁面中使用Ext，首先去官網(wǎng)下載安裝文件（http：//www.sencha.com/products/extjs），下載完成后，會(huì)有一個(gè)壓縮文件，解壓該壓縮包，得到相關(guān)的文件和目錄，接下來在頁面中導(dǎo)入開發(fā)需要用到的文件 如果需要用到控件中的相關(guān)信息顯示中文字符（默認(rèn)顯示英文），還需要在頁面中添加如下代碼： 3系統(tǒng)的界面設(shè)計(jì)及后臺(tái)實(shí)現(xiàn) 首先設(shè)計(jì)的是主界面，選擇的是window面板，相比較Panel面板，對(duì)于本系統(tǒng)而言window面板容器已經(jīng)足夠滿足我們的
5、需求，用起來也較方便。效果如下圖所示： 附上具體的實(shí)現(xiàn)代碼： functionmain（） { varmywindow=Ext.create（"Ext.window.Window"，10 { title："個(gè)人教學(xué)信息統(tǒng)計(jì)"， width：300， height：200， tools：[{type："minimize"}，{type："maximize"}]， tbar：[{xtype："button"，text："信息登記"，menu：[{text："登記"，handler：de
6、ngji}]}，{xtype："button"，text："信息查詢"，menu：[{text："查詢"，handler：chaxun}]}，{xtype："button"，text："日歷表"，menu：{handler：function（）{Ext.create（"Ext.menu.DatePicker"，{value：newDate（）}）}}}]， renderTo：Ext.getBody（）， html："" }） mywindow.show（）； } 接著是設(shè)計(jì)信息登記模塊，該
7、模塊所涉及的控件比較多，所以如何對(duì)各個(gè)模塊進(jìn)行排版，是首要考慮的。在設(shè)計(jì)該模塊時(shí)，選擇了表單面板，主要是考慮到后期數(shù)據(jù)的提交較方便，而且表單面板在排版上也能滿足我們的需求。附上該模塊實(shí)現(xiàn)的效果圖： 附上部分代碼： varbookStore=Ext.create（'Ext.data.Store'， {10 //指定讀取數(shù)據(jù)的name、id字段 fields：['name'，'id']， data：[ {"id"：1，"name"："11軟件1班"}， {"id"：2，"name"："11
8、軟件2班"}， {"id"：3，"name"："11軟件3班"}， {"id"：4，"name"："11軟件4班"} ] }）； vargrade=Ext.create（"Ext.form.ComboBox"，{ name："grade"， fieldLabel："任課班級(jí)"， store：bookStore， mode："local"， triggerAction："all"， emptyText："請(qǐng)選擇任課班級(jí)"， disp
