2022年EXT开发入门教程 .pdf

《2022年EXT开发入门教程 .pdf》由会员分享，可在线阅读，更多相关《2022年EXT开发入门教程 .pdf（17页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、广东毅科数码科技有限公司EXT 开发入门教程日期：2008-4 作者：佘俊贤名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 17 页 -1 前言EXTJS 的魅力让人折服，越来越受重视，其重要程度日趋明显，本文旨在提供一个入门级的开发方法，仅供参考。需要具备的基础知识：JS JSON ACTIVERECORD ASPDOTNET 下面以应用系统中最常见的查询，增加，修改，删除等操作介绍这个开发过程。目前开发 EXT 的平台最好是使用JAVAEE 平台，DOTNET 平台也行，但其架构不够灵活，会让人觉得不太爽。鉴于我们公司大量以DOTNET 平台作为应用系统的开发平台，所以下面的

2、例子以DOTNET 平台为主作讲解。先来看一下最终我们要达到的系统效果：进入人员管理的主界面将显示所有人员的资料列表，这种列表是最常见，也用得最多。我们提供新增、修改、删除等操作功能。点击新增的将弹出录入窗口：名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 17 页 -点击保存按键后将插入新的记录。修改、删除的操作与此类似。2 建立 WEB 项目创建 ASPNET 的项目：添加对 ACTIVERECORD 的引用添加 WEB.CONFIG 配置文件，并配置后数据库连接加入 EXT 和 IMAGES 文件夹，必要时可以加入自已的CSS样式表下面谈一下 EXT 这些 JS的引用方法，

3、每个页面都必须引用这些文件，如果每个页面都要手工添加这些引用那是很麻烦的。ASPNET 的布局不是太友好，虽然提供了 MASTPAGE 的方法，但在子页面的设计上会有视觉干扰。所以我们抛弃了这个方法，转而采用了自已的方法：名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 17 页 -1、将需要引用页面HEAD 域的部分独立至一个文件header.txt中，内容如下：Ext.BLANK_IMAGE_URL=./ext/resources/images/default/s.gif;Ext.QuickTips.init();Ext.form.Field.prototype.msgTarg

4、et=side;2、建立 BasePage 类，在这个类中加入EXT 引用。以后每个页面继承BasePage就都有 EXT 的引用了。这里采用SESSION的方法保存这个 HEADER，实际上采用 GLOBAL 的方式会更好些，道理大家可以想想了为什么。这个基类同时处理了JSON数据的来源问题，所有的JSON 数据的提供都是通过 json.aspx，只要加上参数 action 就是通知服务器要使用那个方法提供JSON数据。这里采用简单的反射机制进行处理，这个方法已经够我们使用了。3、建立 user文件夹，用以存放用户管理的页面及JS文件。最后的项目目录结构如下：名师资料总结-精品资料欢迎下载-

5、名师精心整理-第 4 页，共 17 页 -3 建立用户管理模块在前面的基础上建立User 类，可以用代码生成器创建。建议采用modals的命名空间，代表这是一个模型，也即是MVC 中的 M。当然用其他命名也行。名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 17 页 -在 user目录中创建 Default.aspx，Default.js 和 json.aspx文件：这三个文件就是用户管理模块要用到的文件，Default.aspx是主页面文件Default.js 是对应 Default.aspx 的 JS文件，所有的 EXT 代码都在这个 JS文件里面json.aspx是 JSO

6、N 数据的提供者，所有的JSON 数据都是通过这个文件名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 17 页 -获取的。如果按照CS 的观点来看这三个文件的作用，那么Default.aspx 相当于CLIENT，而 json.aspx相当于 SERVER。他们之间通过 AJAX 异步进行数据交换。下面来看看这个 Default.aspx文件：足够简单吧，这里没有任何控件和多余的HTML 代码。仅仅是一个JS引用和二个 DIV 而已。EXT 的开发特点就是如此，所有的代码都转移到JS中去了。服务端的处理变成是多余的。下面再看看 Default.aspx.cs文件：基本上不用写代码

7、，注意要继承BasePage哦。接下来 我们 来关 注 json.aspx 是怎么 编写 的，我 们提 供了 四个 方法：findAll,create,update,destroy，分别说明如下：1、查询所有的用户资料名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 17 页 -我们仅需要二行代码，这得益于AR 框架的能力，所有的细节都帮我们完成了。2、创建用户资料建立新的用户对象，通过 Request自动给各个属性进行赋值，然后调用 Create方法进行持久化，最后输出操作成功信息。这个过程也是极其简单的。3、修改用户资料修改用户资料需要告诉服务器修改那个用户，所以前端页面需要传

8、输入一个用户 ID，我们先从数据库查出旧资料，再从 Request中更新新的用户资料，再进行 Update的操作，这样用户资料就更新完成了。3、删除用户资料名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 17 页 -这段删除的代码也是显而易见的，不用再多解说了吧。好了，我们看到后端的服务端编写实际是是很简单的。不需要太复杂的代码就能完成各荐操作。最后我们再来看看对于入门者最难一部分，就是前端的EXT 代码编写，我们把它存入 Default.js 文件中。很多人觉得EXT 比较难写实际上是对JS 了解不够，所以提高 JS是很重要的。VS2005 对 JS的编辑支持很有限，连简单的语

9、法加亮都没有，仅是一个普通的文本编辑器：名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 17 页 -一种代替的方法是使用其他JS编辑器，比如 UE 等，或者找个比较好的VS插件。目前有很专业的JS 编辑器，可以自动提示后台的方法，在这里就不多讲了。我们来理解一下这个JS文件的结构，大家以后可以COPY 这个模板结构，实际上很多页面的JS 编写都是很雷同的，有几点需要注意的地方，也算是建议吧：每个 JS文件都定义一个 NAMESPANE，即命名空间暴露必要的方法就行，其他的方法都写成私有的，大部分情况下只需要暴露 init 就好。按照逻辑建议各个界面组件，比如buildGrid,b

10、uildWin 等，建议 GRID 时将其引用放在命名空间中的顶部如ds,grid。在 init 中创建各个界面组件。把数据操作的部分分离出来，不要混在界面组件里面，这一点很重要，名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 17 页 -很多 EXT 代码滥写的根源就在这里。下面看一下这个代码结构：1、创建 GRID 我们来看一下创建GRID 是怎么做的，我们仅说出重点，先要建立一个Ext.data.Store对象，这个对象是数据存储过程，需要有二个属性，一个是 proxy，一个是 reader。proxy 指示到什么地方取得JSON 数据，即指定一个URL 就行。我们这名师

11、资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 17 页 -里就是json.aspx?action=findAll。这个 findAll就是我们定义的服务端方法。reader指示读取的数据字段数组，即每个行的字段列表。autoLoad表示创建这个对象的同时装载数据。这个 ds相当于数据源，下面的grid 就是界面组件：指定一个 store的数据存储对象。Columns设定各个列表的属性。renderTo:grid 很重要，表示渲染到页面的什么地方，这个grid，就是页面的。同这个 ID 是一一对应的。tbar是设定表格上方的工具栏，每个工具的handler指定一个处理函数，即点击这

12、个工具时由对应的函数进行处理，前面说到处理数据的代码应该与界面分离，所以我们由把这段数据处理代码写成单独的函数了。2、创建页面布局我们这个用户资料管理模块的布局如下：名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 17 页 -采用 fit 布局就好了，这样，这个GRID 会自动占满屏幕。3、创建录入及修改窗口因为录入及修改时的窗口界面是相同的，只是操作时指定的URL 不同而已，所以我们创建了一个窗口，同样进行录入及修改操作。窗口由 Ext.form.FormPanel 创建，如果只是这样，那么这个表单不会移动，要达到移动的效果，必须再创建一个Ext.Window，再将表单放在窗

13、口的容器内，借助于窗口，这个表单就可以移动了。创建表单代码如下：这段代码采用textfield 作为输入框，这个输入框的名称有讲究，比如这个username中的 user是前缀，后台的 name是属性名，也是字段名。后台代码User user=(User)FormBinding.CreateModel(typeof(User),user,Request);名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 17 页 -就是通过 user的前缀取得对象的各个属性值的。现在大家明白了为什么名称要这样写了吧。表单建好了，需要创建一个窗口：这个窗口通过 items存放这个表单对象，同理最上

14、面的el:win 中的 win，也是需要在页面中定义的，即是这个窗口对象的渲染位置。创建窗口时建议采用closeAction:hide，这样窗口不会销毁，关闭时是隐藏。窗口及表单建好了，就可以通过show(),hide()等方法进行显示和隐藏了。界面对象中的表格和窗口表单介绍完了，可以进行显示了。要操作数据还需要编写相应的操作数据代码：newUser,editUser,saveUser,destroyUser，分别介绍如下：1、新建用户资料设置窗口的标题，然后清空表单内容，fs 并没有一个 url 属性，但可以在运行时动态添加上去，这就是JS的动态特性，所以说多了解一下JS是有帮助的。这样窗口

15、就会显示出来：名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 17 页 -2、修改用户资料需要检测用户资料是否已经选择，如果没选择就不处理，如果选择了就显示窗口，设置窗口标题，添加二个附加属性url,id，分别指示保存时使用那个URL及资料的 ID。最后设置各个表单的内容并显示出来：名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 17 页 -我们看到新增和修改共用一个窗口，这样可免去重复的代码。3、保存用户资料保存提交前进行表单验证，有效才进行提交。保存提交时需要指定URL，这就是为什么我们要在新增和修改时附加url属性的原因，这样的提交时就知道用那个URL 提

16、交了。对于修改需要增加一个id 作为提交参数，新增的保存这个参数无用。为保持代码的统一，这里就不用 IF 语句作判断了。也即提交时都要指定id作为参数，只是后台在处理中在新增时对id 忽略而已。保存提交成功时刷新列表数据，同时关闭窗口。4、删除用户资料名师资料总结-精品资料欢迎下载-名师精心整理-第 16 页，共 17 页 -这段代码也是很清楚的了，所不同的是使用了Ext.Ajax 对象进行请求，因为没有表单，所以要用这个提交，如果是表单直接用表单的submit 就行了。4 结论通过前面的介绍，相信大家对EXT 也不陌生了，实际上EXT 的规律和架构如果把握了就会觉得很容易，很多东西的编写就象在做配置一样。开发 EXT 应用记住一点，这是AJAX 的数据通讯，不同于以往的纯后台编写，所以在观念上要有CS 的思路，也可以看作是调用服务的思想。开发过程要分前台和后台，前台展示页面，后台提供数据服务，前台的数据通过 AJAX 请求后台的服务获得。关于更进一步的介绍后面有机会再作进一步的介绍。名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 17 页 -