ExtJS在网络课程模板中的应用
2013-01-15
（福建广播电视大学，福建福州，350003）
随着第三代移动通信技术与移动便携式终端的飞速发展与普及，充分利用全媒体网络进行的教育教学活动已然成为目前信息教育活动应用的主要形式和重要的发展方向。全媒体的网络教育教学课程可以从时间与空间上拓宽教育的范围与领域，利用丰富的教育媒体资源、友好的交互手段和便携的移动设备，为学习者提供良好的基础保障。全媒体的网络教育离不开大量优秀的全媒体网络课程，但网络课程制作难度大，影响了网络课程建设的普及度。利用网络课程模板就能解决这个困难，同时大大提升全媒体网络课程的制作效率。网络课程模板是指一整套可自动生成网络课程的系统程序，目的在于通过模板来提供给教师一个标准化的课程设计结构，这个结构包括像章节知识点的呈现、实践教学的设计框架；师生间的社交活动以及协助网络课程开发的小工具等多种基本功能。[1]在全媒体网络课程模板的设计中利用ExtJS技术，可以有效的提升网络课程模板的交互性，改善网络课程的功能局限，美化网络课程的界面，同时还能解决多平台的兼容性等问题。
一、什么是ExtJS与Ext.NET
ExtJS是基于WEB2.0中一个成熟的AJAX开源框架库，利用ExtJS可以开发RIA富客户端的AJAX应用，这个富客户端是一个用JavaScript编写的用于创建友好的前端用户界面，它是与后台技术无关的前端AJAX框架。因此，可以把ExtJS用在.NET、JAVA、PHP等多种语言的应用开发应用中。ExtJS是最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织的一种可视化组件，这个框架库从UI界面，到CSS样式的应用，到数据解析的处理上，都是一款成熟的JavaScript精品客户端。[2]
Ext.NET 是一个 ASP.NET（WebForm+MVC）的AJAX组件，是基于ExtJS框架库开发来的，具有很好的浏览器的兼容性。通俗点说，就是将开源的ExtJS框架库，利用ASP.NET的自定义控件技术，封装成ASP.NET的控件，简化开发难度，提高开发效率。所有的组件是居于ExtJS框架库上封装而来的，它包含有丰富的AJAX运用，简化了终端的开发步骤。Ext.NET非常适合做WEB应用程序的开发，它包含了类似于输入、验证、显示等AJAX的Web组件，支持各种页面布局框架，支持多种数据绑定与展现。设计开发人员可以在Visual Studio开发环境中的可视化设计器内进行各方面的属性配置。
Ext.NET和ExtJS一样也是开源的，开发者可以很方便地获取到它的源代码，它的授权方式分为社区版和高级版，社区版为免费开源，高级版为License有收费，普通情况我们采用社区版来制作应用。开发者使用Ext.NET就是用ExtJS和HTML作为系统前台，用ASP.NET和C#作为系统后台来开发各种WEB应用程序。
二、Ext.NET的使用方法
（一）在Visual Studio中加载Ext.NET
1.从http://www.ext.net/download下载最新的Ext.NET版本。解压缩到一个新建目录，并将以下6个文件复制到WEB应用项目的/bin目录下：
Ext.Net.dll Ext.Net.xml
Ext.Net.Utilities.dll Ext.Net.Utilities.xml
Newtonsoft.Json.dll Newtonsoft.Json.xml
2.添加引用 Ext.Net，打开 Visual Studio 2008，在“解决方案资源管理器”中添加引用，浏览增加 Ext.NET.dll，Ext.NET.Utilities.dll和Newtonsoft.Json.dll三个DLL文件。
3.把Ext.Net添加到Visual Studio 2008的工具箱。在工具栏上单击“添加选项卡”，此选项卡命名为（Ext.Net），右键单击此选项卡，“选择项目”点击“浏览”按钮下的“.NET Framework组件”导入Ext.NET.dll。
4.配置WEB应用项目的WEB.CONFIG文件。打开WEB.CONFIG文件在其中找到
因为以上方面考虑的是三个完全没有重叠的方面，Eggleston把它们放在一个“三维”的立体图上，如图1所示。
（二）Ext.NET中Events事件的处理方法
在Ext.NET的使用是采用事件驱动机制的，实现Events事件的方式有四种 Listeners，DirectEvents， DirectMethods 和 MessageBus。 Listeners就是客户端的事件处理程序；DirectEvents是指服务器端的事件处理程序，使用AJAX的客户端的事件；DirectMethods是使用AJAX的客户端利用JavaScript调用服务器端的方法（如C＃或VB）；MessageBus是指MessageBus允许松动耦合组件的事件，事件可以发布或订阅互不干涉。每个组件都有MessageBusListeners（客户端的处理程序的MessageBus事件）和MessageBusDi rectEvents（服务器端的MessageBus事件处理程序）。[4]对于Listeners和DirectEvents的使用方法，利用一个实例来做解释。
1.Listeners
Ext.NET的Listeners通过给Ext按扭添加了一个客户端方法Handler，示例代码如下：
三、Ext.NET在网络课程模板中的几个典型应用
网络课程模板主要包含有网站内容管理模块（包括栏目与内容的添加、修改、删除）、学习资源模块、精选案例模块、在线测试模块、学习论坛模块、自测自练模块、教学视频模块、师生互动模块、实践教学模块、形成性测试模块等。在这些模块中应用Ext.NET实现类似ext:TextField文本框的自动验证提示，ext:ComboBox下拉列表的数据绑定，ext:GridPanel表格控件显示JSON数据与数据的自动排序与筛选，ext:ViewPort窗口视图组件来实现多窗口等功能，可以更好的展现课程多窗口界面，同时具有良好的交互功能和友好的UI界面。下面介绍在网络课程模板中的几个典型应用：
（一）支持AJAX的用户登录
登录窗口中用户通过输入用户名、密码和验证码来登陆系统。输入信息的文本框使用Ext.NET技术实现了用户输入信息的自己AJAX的提示工作。例如网络课程模板中用户登录页面代码：Login.aspx和Login.aspx.cs。
Login.aspx页面文件中添加ext:FormPanel控件建立面板，通过ext:TextField作为用户名、用户密码或验证码的输入框，同时设置AJAX属性EmptyText、BlankText，就可以方便实现输入不为空等客户端自动验证。
通过ext：Button作为提交按钮设置OnDirectClick事件为CS代码的Button1_Click事件来处理验证
（二）自动绑定数据的下拉列表
在增加，修改等界面经常会用到下拉列表，这些下拉列表在初始化的时候需要连接数据库来实现数据绑定的效果。利用Ext.NET的ext:ComboBox组件就可以方便的实现数据的绑定。例如在系统中设置学生专业的页面代码：Sp－Type.aspx和 SpType.aspx.cs。
SpType.aspx的页面中增加ext:ComboBox设置属性FieldLabel、BlankText等等，就可以在页面中获得一个下拉列表，这时下拉列表并没有数据，我们通过CS代码里的BindComboxSp－Type事件来绑定数据。
SpType.aspx.cs代码中利用一个 BindComboxSpType过程来实现ext：ComboBox数据的绑定利用DAO获取到所需要的数据库字段部分放置到一个DataTable中，利用foreach的循环把DataTable中的每一行通过ComboBox.Items.Add加载进去。
（三）使用JSON数据的GridPanel表
在显示教学资源，用户信息等众多页面中我们需要类似EXCEL数据表的数据展现形式，还需要能快速的进行排序和简单的筛选，利用Ext.NET封装的ext：GridPanel表格控件就可以很方便友好的利用JSON来显示这些数据表信息，（JSON：JavaScript Object Notation是一种数据交互格式）。例如在系统中的显示用户信息的页面，UserList.aspx和UserList.aspx.cs。
UserList..aspx的页面中添加ext:Store控件用来在客户端连接JSON数据。ext:Store控件中加载ext:JsonReader，在JsonReader中添加代表数据表字段的ext：RecordField，并设置它的Name、Type。使用了JsonReader绑定的数据格式是JSON类型的，在后台绑定的是DataSet，关键的是RecordField中Name指定的名字，必须和你后台要绑定的数据里字段DataSet中的名称一致。
接着在页面中加入ext：GridPanel，同时设置好各选项，如StoreID="StoreStuList"表示依赖的数据ext：Store的名称。Title表示标题。AutoExpandColumn="StuName"表示自动适应宽度的数据表字段。在ext：GridPanel中加入ext：Column数据列，设置数据列依赖的DataIndex="StuName"，Header表示列标题。依次添加多个数据列。在其尾部加上ext：RowSelectionModel作为ext：GridPanel的选择控制部分，通过ext:RowSelectionModel的 OnEvent="StuListRowSelect"这个事件达到读取客户端选择哪条记录的ID号。最后加入ext:PagingToolbar用来控制数据的分页。
UserList.aspx.cs代码中的在页面的Page_Load事件内写入StuListBind绑定教学计划的过程，该过程通过StoreStuList.DataSource=ds.Tables[0].DefaultView；与 StoreStuList.DataBind（）；来实现对客户端 ext：Store数据的绑定，绑定了 ext：Store也就实现了对ext：GridPanel数据的绑定。同时前台客户端StuList.Data_Refresh的操作也绑定了StuListBind过程在客户端的刷新中就能不丢失数据，因为客户端的刷新就会带来后台服务器端的刷新事件。绑定的DataSet就是通过DAL的FdmbStuListDAO来返回所需的数据。这样就能够实现对ext：GridPanel控件的数据绑定与显示。
这些都是Ext.NET在网络课程模板中的一些典型应用，可以看出Ext.NET让网络课程在WEB程序的前端上呈现了很好的显示效果，具有良好的交互性。
四、ExtJS的发展与网络课程模板的展望
ExtJS从2007年的1.0发展到2012年最新的ExtJS4.1，已经非常成熟了，无论是界面之美，还是功能之强，ExtJS都高居JS脚本库的榜首。ExtJS在.NET中的应用也丰富多彩，从Coolite、ExtAspNet、ExtExtenders 以及最新的Ext.NET同样都是非常成熟与高效。特别是在客户端代码和服务端代码的平衡上有其独到之处。
2012年基于JavaScript编写的AJAX框架ExtJS，将现有的ExtJS整合了JQTouch、Raphael库合并而成的一个开源项目，随后ExtJS更名为Sencha。并且推出了适用于目前世界上最前沿的支持触摸WEB浏览的Sencha Touch框架，该框架是世界上第一个基于HTML5的Mobile App框架，Sencha Touch可以让编写的Web App浏览器程序看起来像Native App本地程序一样。它的特点在于友好的用户界面加上丰富的数据管理功能，基于最新的WEB标准HTML5和CSS3，全面兼容世界上最好的具有触摸屏的各种Android和IOS等设备，这些设备代表了当前全球超过95%的移动数据通信量。同时Sencha Touch具备增强的触摸事件，在TouchStart、TouchEnd等标准事件基础上，增加了自定义事件 数 据 ， 如 Tap、 Swipe、 Pinch、Rotate 等 ，Sencha Touch还自带功能极其强大的数据包，通过AJAX、JSON、YQL等方式绑定到各控件模板，记录到本地离线存储使用。这些特性使得Sencha Touch变成全球领先的移动应用程序开发框架。[5]
鉴于ExtJS到Sencha再到移动平台的Sencha Touch基本的结构、逻辑、语法是相通的，这样就能很好的实现系统的平滑过渡。在网络课程模板中应该继续稳固更新传统PC平台浏览的版本，同时加紧开发支持各种移动平台的移动版本，平滑过渡做到各种平台版本兼容。网络课程模板做到支持全媒体，支持多平台，才是一个完整的全媒体网络课程模板，这样的网络课程模板才能生成的优秀的网络课程，让学生们做到时时，处处，人人的学习效果，这样的目标同样也是网络教育的发展途径和前进方向。
[1]曹良亮.网络课程制作模板的设计研究[J].现代教育技术，2006，(6).
[2]Ext JS API Documentation[EB/OL].（2013-03-27）[2013-04-05].http://www.extjs.com/docs.
[3]Ext.NET Examples Explorer[EB/OL].（2013-03-27）[2013-04-05].http://examples.ext.net.
[4]Ext.NET API Documentation[EB/OL].（2013-03-27）[2013-04-05].http://docs.ext.net.
[5]百度百科.Sencha[EB/OL].[2013-03-07](2013-04-08).http://baike.baidu.com/view/3775099.htm.
