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

《基于ext js的个人教学信息统计系统的设计与实现》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、基于ExtJS的个人教学信息统计系统的设计与实现　　摘要：该文介绍了ExtJS的基本应用，讨论了ExtJS优秀的外观设计，并用此框架开发了一个个人教学信息统计系统，界面的设计全部使用EXTJS6.0，后台用Java进行数据的维护，数据库使用MySQL，该系统能实现个人信息的查询与保存。　　关键词：ExtJS；面板；表单；数据提交；数据显示　　中图分类号：TP311文献标识码：A文章编号：1009-3044（2016）27-0059-03　　1概述　　ExtJS是一个用javascript写的，主要用于

2、创建前端用户界面，是一个与后台技术无关的前端优秀的ajax框架，因此，可以把ExtJS用在.Net、Java、JSP等各种开发语言开发的应用中。EXTJS开发了一系列非常简单易用的控件及组件库，我们只需要使用这些组件就能实现各种丰富多彩的UI的开发，即使项目组没有美工人员，也可以开发出专业的用户界面。这些仅仅是其外在美，其还有最核心的内在美，即JSON。JSON为一种更轻、更友好的Webservices客户端的格式（多采用浏览器的形式或访问REST风格10Web服务的Ajax应用程序的形式）。JSON

3、和XML一样也是一种简单文本格式。相对于XML，它更加易读、更便于肉眼检查。在语法的层面上，JSON与其他格式的区别是在于分隔数据的字符，JSON中的分隔符限于单引号、小括号、中括号、大括号、冒号和逗号。每当要统计个人相关信息的时候，最棘手的就是之前的信息保存问题，比如个人的教学任务，每个学期都会有多个班级，这样几年累积下来就会有不少的数据，基于此，借助EXT开发了一个小的应用系统，用来保存个人授课信息，同时对个人授课信息还能进行简单的查询。此系统略加改造，也同样适用于其他领域的个人信息记录。　　2如

4、何在页面中使用ExtJS　　想要在页面中使用Ext，首先去官网下载安装文件（http：//www.sencha.com/products/extjs），下载完成后，会有一个压缩文件，解压该压缩包，得到相关的文件和目录，接下来在页面中导入开发需要用到的文件　　　　如果需要用到控件中的相关信息显示中文字符（默认显示英文），还需要在页面中添加如下代码：　　　　3系统的界面设计及后台实现　　首先设计的是主界面，选择的是window面板，相比较Panel面板，对于本系统而言window面板容器已经足够满足我们的

5、需求，用起来也较方便。效果如下图所示：　　附上具体的实现代码：　　functionmain（）　　{　　varmywindow=Ext.create（"Ext.window.Window"，10　　{　　title："个人教学信息统计"，　　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（）；　　}　　接着是设计信息登记模块，该

7、模块所涉及的控件比较多，所以如何对各个模块进行排版，是首要考虑的。在设计该模块时，选择了表单面板，主要是考虑到后期数据的提交较方便，而且表单面板在排版上也能满足我们的需求。附上该模块实现的效果图：　　附上部分代码：　　varbookStore=Ext.create（'Ext.data.Store'，　　{10　　//指定读取数据的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："任课班级"，　　store：bookStore，　　mode："local"，　　triggerAction："all"，　　emptyText："请选择任课班级"，　　disp