admin 管理员组

文章数量: 1184232


2024年5月9日发(作者:php导入一次文件)

2013年第5期 

福建广播电视大学学报 

No.5,2013 

总第101期 

Journal of Fujian Radio&"IV University 

General,No.101 

ExtJS在网络课程模板中的应用 

黄林昊 

(福建广播电视大学,福建福州,350003) 

摘要:本文针对现代信息教育下的全媒体网络课程建设的实际需要,利用Ex 技术构建全媒体网络课程 

模板。对网络课程模板、ExtJS、Ext.NET、Sencha技术做了深度的解析,对Ext.NET在网络课程模板中的几个 

典型应用进行了详细地分析与研究。同时也对全媒体网络课程模板的发展提出了实质性的见解,使其更加适 

应新形势下开放大学远程教育的需要。 

关键词:网络课程;ExtJS;Ext.NET;Sencha 

中图分类号:(;728.8 文献标识码:A 文章编号:1008—7346{2013)05—0o87一O5 

随着第三代移动通信技术与移动便携式终 

互性,改善网络课程的功能局限,美化网络课程 

端的飞速发展与普及,充分利用全媒体网络进 的界面,同时还能解决多平台的兼容性等问题。 

行的教育教学活动已然成为目前信息教育活动 

什么是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) 

动以及协助网络课程开发的小工具等多种基本 

的小X组件,是基于Ex 框架库开发来的, 

功能。【1】在全媒体网络课程模板的设计中利用 

具有很好的浏览器的兼容性。通俗点说,就是 

ExtJS技术,可以有效的提升网络课程模板的交 

将开源的ExtJS框架库,利用ASP.NET的自定 

收稿日期:2013—08—18 

作者简介:黄林昊,男,福建福州人。福建广播电视大学电子信息与计算机系讲师。 

87 

福建广播电视大学学报(总第101期) 2013年l0月25日 

义控件技术,封装成ASP.NET的控件,简化开 

发难度,提高开发效率。所有的组件是居于Ex— 

t,lS框架库上封装而来的,它包含有丰富的A— 

uration><configSections>,在其后添加<section 

name=”extnet”type=”Ext.Net.GlobalConfig”re— 

quirePermission=”flase”,>,除此以外根据不同的 

WEB服务器IIS6或者IIS7增加一段不同的IIS 

JAX运用,简化了终端的开发步骤。Ext.NET非 

常适合做WEB应用程序的开发,它包含了类似 

于输入、验证、显示等AJAx的Web组件,支 

持各种页面布局框架,支持多种数据绑定与展 

配置代码,具体代码可以参考下载ZIP文件包中 

的Sample.Web.config代码文件的内容。嘲 

(二)Ext.NET中Events事件的处理方法 

现。设计开发人员可以在Visual Studio开发环 

境中的可视化设计器内进行各方面的属性配置。 

Ext.NET和ExtJS一样也是开源的,开发者 

可以很方便地获取到它的源代码,它的授权方 

式分为社区版和高级版,社区版为免费开源, 

高级版为License有收费,普通情况我们采用社 

区版来制作应用。开发者使用Ext.NET就是用 

ExtJS和HTML作为系统前台,用ASP.NET和 

C样作为系统后台来开发各种WEB应用程序。 

二、Ext.NET的使用方法 

(一)在Visual Studio中加载Ext.NET 

1.从http://www.ext.neffdownload下载最新的 

Ext.NET版本。解压缩到一个新建目录,并将以 

下6个文件复制到W-EB应用项目的/bin目录下: 

Ext.Net.dU 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.dU和 

Newtonsofi.Json.dll三个DLL文件。 

3.把Ext.Net添加到Visual Studio 2008的工 

具箱。在工具栏上单击“添加选项卡”,此选项 

卡命名为(Ext.Net),右键单击此选项卡,“选择 

项目”点击“浏览”按钮下的“.NET Framework 

组件”导入Ext.NET.dll。 

4.配置WEB应用项目的WEB.CONFIG文 

件。打开WEB.CONFIG文件在其中找 ̄lJ<config- 

88 

在Ext.NET的使用是采用事件驱动机制的, 

实现Events事件的方式有四种Listeners,Di— 

rectEvents,DirectMethods和MessageBUS。Lis— 

teners就是客户端的事件处理程序:DirectEvents 

是指服务器端的事件处理程序,使用AJAX的客 

户端的事件;DireetMethods是使用AJAX的客户 

端利用JavaScript调用服务器端的方法(如C#或 

VB);MessageBus是指MessageBus允许松动耦 

合组件的事件,事件可以发布或订阅互不干涉。 

每个组件都有MessageBusListene1"8(客户端的处 

理程序的MessageBus事件)和MessageBusDi 

rectEvents(服务器端的MessageBus事件处理程 

序)。[41对于Listeners和DireetEvents的使用方 

法,利用一个实例来做解释。 

1.Listeners 

Ext.NET的Listeners通过给Ext按扭添加了 

个客户端方法Handler,示例代码如下: 

ASPX代码部分 

<ext:Button ID=”Buttonl”runat=”server” 

Text=”Submit”> 

<Listeners> 

<Click Handler=-“alert("Hello );’。,> 

</Listeners> 

</ext:Button> 

2.DirectEvents 

DirectEvents可以应用大多数的控件中,实 

现异步提交,在Ext.NET.Toolkit的Button控件 

中,通过该控件提供的机制就可以使用Di— 

2013年第5期 黄林昊:ExtJS在网络课程模板中的应用 

rectEvents方便的实现异步提交,示例代码如下: 

ASPX代码部分 

<Buttons> 

<ext:Button runat=”server”Text=”Submit” 

Login.aspx页面文件中添加ext:FormPanel控 

件建立面板,通过ext:TextField作为用户名、用 

户密码或验证码的输入框,同时设置AJAX属性 

EmptyText、BlankText,就可以方便实现输入不 

OnDirectClick=”Button!一Click”,> 

</Buttons> 

CS代码部分 

<script runat=”server”language=”C样”> 

protected void Buttonl

_

Click(object sender, 

DirectEventArgs e) 

I 

,/点击按钮运行的C#事件处理代码 

l 

</script> 

三、Ext.NET在网络课程模板中的几个典型 

应用 

网络课程模板主要包含有网站内容管理模 

块(包括栏目与内容的添加、修改、删除)、学习 

资源模块、精选案例模块、在线测试模块、学 

习论坛模块、自测自练模块、教学视频模块、 

师生互动模块、实践教学模块、形成性测试模 

块等。在这些模块中应用Ext.NET实现类似ext: 

TextField文本框的自动验证提示,ext:C0mboBox 

下拉列表的数据绑定,ext:GridPanel表格控件显 

示JSON数据与数据的自动排序与筛选,ext: 

ViewPort窗口视图组件来实现多窗口等功能,可 

以更好的展现课程多窗口界面,同时具有良好 

的交互功能和友好的uI界面。下面介绍在网络 

课程模板中的几个典型应用: ‘ 

(一)支持AJAX的甩户登录 

登录窗口中用户通过输入用户名、密码和 

验证码来登陆系统。输入信息的文本框使用Ext. 

NET技术实现了用户输入信息的自己AJAx的提 

示工作。例如网络课程模板中用户登录页面代 

码:Login.aspx和Login.aspx.CS。 

为空等客户端自动验证。<ext:TextField ID= 

"TextField1“runat=”servert'FieldLabel=”用户名” 

MaskRe=”a—zA—Z0—9].-EmptyText=”请输入用户 

名-'AllowBlank="false"B1ankText=”用户名不能为 

空!”></ext:TextField> 

通过ext:Button作为提交按钮设置OnDi— 

rectClick事件为CS代码的Buttonl

_

Click事件来 

处理验证<ext:Button runat=Userver”Text= 

”Submit”OnDirectClick=”Button1

Click”,>。 

Login.aspx.CS代码文件中为了使用Ext.NET 

需要引用Ext.NET的命名空间,利用下面的语句 

加入Ext.Net的命名空间。<%@Register As— 

sembly=”Ext.Net”Namespace=”Ext.Net”TagPrefix= 

”ext”%>。代码中的protected void Buttonl Click 

(object sender,DirectEventArgs e){..…。)其中 

的Buttonl

Click事件就自动的获取到客户端的 

按钮事件完成登录所需要的验证任务。 

(二)自动绑定数据的下拉列表 

在增加,修改等界面经常会用到下拉列表, 

这些下拉列表在初始化的时候需要连接数据库 

来实现数据绑定的效果。利用Ext.NET的ext: 

ComboBox组件就可以方便的实现数据的绑定。 

例如在系统中设置学生专业的页面代码:・sp— 

Type.aspx和SpType.aspx.CS。 

SpType.aspx的页面中增加ext:ComboBox设 

置属性FieldLabel、BlankText等等,就可以在 

页面中获得一个下拉列表,这时下拉列表并没 

有数据,我们通过CS代码里的BindComboxSD— 

Type事件来绑定数据。<ext:ComboB0x ID: 

”EditComboBoxSpType”runat=”server”Editable= 

”false”FieldLabel=”专业名称”BlankText="请选择 

89 

福建广播电视大学学报(总第101期) 2013年10月25日 

专业名称-'></ext:ConaboBox> 

致。 

<ext:Store ID=”StoreStuList”runat=”server” 

OnRefreshData=”StuList.DataRefresh”> 

_

SpType.aspx.CS代码中利用一个BindCom— 

boxSpType过程来实现ext:ComboBox数据的绑 

定利用DAO获取到所需要的数据库字段部分放 

置到一个DataTable中,利用foreach的循环把 

DataTable中的每一行通过C0mb0Box.Items.Add 

<Reader> 

<ext:JsonReader> 

<Fields> 

加载进去。 

private void BindComboxSpType(ComboBox 

eb) 

{ 

DataTable dt=new DAL.FdmbSetDAO 0. 

GetFdmbSetlnfoByType(”SpType”).Tables[0]; 

foreach(DataRow r in dt.Rows) 

( 

cbJtemsAdd(new Ext.Net.Listhem(r[1].ToString 

0, 】.ToString0)); 

】 

l 

(三)使用JSON数据的GridPanel表 

在显示教学资源,用户信息等众多页面中 

我们需要类似EXCEL数据表的数据展现形式, 

还需要能快速的进行排序和简单的筛选,利用 

Ext.NET封装的ext:GridPanel表格控件就可以 

很方便友好的利用JSON来显示这些数据表信 

息,(JSON:Java.Script 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中的名称一 

90 

<ext-RecordField Name=”StuID”,> 

<ext:RecordField Name=”StuName”,> 

</Fields> 

/<ext:JsonReader> 

</Reader> 

/<ext:Store> 

接着在页面中加入ext:GridPanel,同时设 

置好各选项,如StorelD="StoreStuList”表示依赖 

的数据ext:Store的名称。Tide表示标题。Au— 

toExpandColumn=”StuName”表示自动适应宽度的 

数据表字段。在ext:GridPanel中加入ext:Col— 

umn数据列,设置数据列依赖的DataIndex= 

,'StuName'-,Header表示列标题。依次添加多个 

数据列。在其尾部加上ext:RowSeleetionModel 

作为ext"GridPanel的选择控制部分,通过ext: 

RowSelectionModel的OnEvent=-'StuListRowSe— 

lect”这个事件达到读取客户端选择哪条记录的 

ID号。最后加入ext:PagingToolbar用来控制数据 

的分页。 

<ext:GridPanel ID=”GridPanelStuList” 

runat=”servert。StorelD=“StoreJxjh”Frame=”true”Ti- 

tl ”学生信息”AutoExpandColumn=”SpName”> 

<ColumnModel> 

<Columns> 

<ext:Column ColumnID=”StuID”Header=”ID” 

Sortable=”true”DataIndex=”StuID”/> 

<ext:ColUB1B ColumnID=”StuName”Header= 

”姓名”Sortable=”true”DataIndex=”StuName” 

福建广播电视大学学报(总第101期) 2013年10月25日 

以上的问题只是经济配料问题的一种,现 

靠性,其决策理论是建立在严格的理论基础之 

在配料问题在工农业生产中时常遇到。比如在 上,运用大量的基础数据,经严密的数学运算 

石油工业中需要将原油提炼成若干中间产品, 得到的,从而使企业在生产的各个环节中优化 

然后将各种中间产品按一定比例混合成为航空 配置,对提高企业的效率是非常有益的。从某 

油、燃料油等,以适应不同用途的需要。这些 种意义上讲,将线性规划方法应用于管理中可 

比例应如何选择才能使经费最节省?又如,在 以说是科学与管理艺术的结合,在未来具有更 

养殖业,在现代大型畜牧业中经常使用工业生 

广阔的发展空间。 

产的饲料喂养动物,这些饲料配方也属于经济 

配料问题。在化工行业、食品行业、食堂营养 

参考文献: 

配餐方面都存在经济配料问题。 

【1】胡运权.运筹学教程[M】.北京:清华大学出版社, 

以上只是总结了几个线性规划在生产中的 

2003. 

实际问题,并建立了相应的数学模型。此外线 

【2]徐玖平,胡知能.运筹学[M].北京:科学出版社,2004. 

性规划还在其他方面有很多的应用,比如合理 

[3】张干宗.线性规划[M】.武汉,武汉大学出版社,2004. 

布局、连续投资、劳动力安排、市场营销调查, 

【4]唐晓文,刘海英,文斌.线性规划[M】.北京:中央广播 

医院绩效评定等方面。 

电视大学出版社.2012. 

【5】刘海英.用线性规划的方法制订企业生产计划叨.福 

大多数线性规划问题都可以采用计算机辅 

建广播电视大学学报,2012,(4). 

助来求解。运用线性规划并配合计算机进行计 

【责任编辑:陈晓蔚】 

算简便易行,降低了企事业管理者对于数学运 

算能力的要求,提高了企业决策的科学性和可 

(上接第91页)绑定到各控件模板,记录到本地 

标同样也是网络教育的发展途径和前进方向。 

离线存储使用。这些特性使得Sencha Touch变 

成全球领先的移动应用程序开发框架。同 

参考文献: 

鉴于ExtJS到Sencha再到移动平台的Sencha 

[1]tW良亮.网络课程制作模板的设计研究[J1.现代教育 

Touch基本的结构、逻辑、语法是相通的,这样 

技术,2006,(6). 

就能很好的实现系统的平滑过渡。在网络课程模 

【2]Ext JS API Documentation【EB/OL].(2013—03— 

板中应该继续稳固更新传统PC平台浏览的版 

27)[2013-04-051.http://www.extjs.com/docs. 

本,同时加紧开发支持各种移动平台的移动版 

[3]Ext.NET Examples Explo ̄r[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].httr,J./docs.ext.neL 

个完整的全媒体网络课程模板,这样的网络课 

(s]-e度百科.Sencha[EB/OL].[2O13—03—07】(2013—04一 

程模板才能生成的优秀的网络课程,让学生们 

os).http:/Paaike.baidu.corn/view/3775099.htm. 

做到时时,处处,人人的学习效果,这样的目 

【责任编辑:陈晓蔚】 

96 


本文标签: 网络 课程 模板