基于ExtJs的区域性集成信息系统界面开发

1、吉林大学珠海学院毕业论文基于extjs的区域性集成信息系统界面开发integrated regional information system interface development based on extjs完成日期 2013 年 04 月 19 日吉林大学珠海学院本科毕业论文（设计）开题报告基于extjs的区域性集成信息系统界面开发摘要随着当今经济快速发展，世界经济一体化、全球化进程进一步加快，国际集装箱运输等航运业务的竞争也愈发激烈，作为企业提升企业核心竞争力、促进业务增长的重要手段，信息技术的应用已成为货柜航运企业在日常运作中十分重视的一部分。信息技术能正确、快速地处理和使用大量

2、的信息，某货柜航运公司深知信息技术在集装箱运输业中的重要作用，大胆创新，将公司所有的业务、客户航运及财务资料综合于一个系统上，以精简业务运作，更好地满足客户的需求。本文详细叙述了基于extjs技术在eclipse环境下开发区域性集成信息系统界面的过程。首先介绍了该系统根据自身情况运用的是b/s模式，对其中几个模块的需求进行分析，重点难点在于要显示数据的表格；接着分析该系统采用的是mvc框架进行开发，客户端界面采用extjs、css等技术，服务器采用weblogic；然后再介绍开发的过程，先实现前端界面，设计适用的表格，再跟后台交互，处理后台返回的数据并显示，最后，对界面进行优化，使其更简洁、美

3、观。本文所介绍的区域性集成信息系统界面已通过专业的测试，包括单元测试、集成测试，测试结果表明本文涉及的界面均已达到需求文档的要求。系统界面友好，方便用户使用，效果良好。关键词：航运；extjs；界面；表格integrated regional information system interface development based on extjsabstractwith the rapid economic development nowadays, the process of integration and globalization of the world economy fur

4、ther accelerate, international container transportation and shipping business become more competitive, as companies to enhance the core competitiveness, and as an important means of promoting business growth, the application of information technology has become an great important part of daily opera

5、tions in container shipping companies. information technology can handle and use a large amount of information correctly and quickly, one container shipping company realizes the important role in the container shipping industry, then brave innovation, making all the companys business, customers ship

6、ping and financial information integrate in a system, in order to streamline operations and satisfy the costomers needs better.in this thesis,the integrated regional information system interface based on extjs development process is described detailedly.firstly,b/s mode is used according to the syst

7、em itself,and analysis the requirment of several modules,the difficulty is the grid for displaying datas;then introduce that mvc structure is used for developing,extjs,css are used for client interface,and weblogic is for server;morever,introduce the development process,including the interface,the t

8、abele to display datas,and so on;finally,to make the interface more simple and beautiful.the interface of the system written in this thesis is tested by professional test,including unit test and integrated test.the test result shows that the interface in this article have reached the requirments.the

9、 interface is used friendly.key words：shipping；extjs；interface；grid目录1 绪论11.1 研究背景11.2开发环境简介11.2.1 操作系统（windows7 enterprise）21.2.2 eclipse3.7简介21.2.3 weblogic21.2.4 数据格式json21.2.5 extjs简介32 需求分析42.1 系统需求42.2 界面设计原则42.3需求分析42.3.1 条件搜索部分42.3.2 结果显示部分42.4 界面功能流程图42.5 性能需求53 总体设计63.1 界面结构图63.2 总体功能设计63.

10、2.1 monitor repo plan条件搜索部分 结果显示部分73.2.2 regional repo plan 条件搜索部分 结果显示部分83.2.3 inventory forecast 条件搜索部分 结果显示部分93.2.4 inventory summary条件搜索部分 结果显示部分103.3 数据解析104 设计思想与实现115 界面测试与运行126 结束语13参考文献14致谢151 绪论1.1 研究背景伴随着中国加入wto，全球经济一体化进程进一步加

11、快，集装箱运输业务拥有着广阔的发展前景，全球的航运业市场的竞争也日益加剧，航运企业传统的单一的海上运输服务已经无法适应现代航运业发展的需要。进入新世纪的全球航运界，正展现着前所未有的机遇与挑战，为抓住时代赋予的机遇，大部分深谋远虑的企业都为自己的日常运行添加了信息化建设这一策略。面对我国不断增长的外贸交易，航运在全球化的贸易运输的地位就尤为突出，而信息技术则为企业带来了很大的促进作用，使得企业的业务能够健康平稳发展，航运企业面向客户提供非常全面的综合物流服务。但是，航运物流的业务和处理环节不是千篇一律的，它们的变化多端，非常灵活，况且港口零散，要保证业务的顺畅和高效，就必须建立一个能管理全球区

12、域性集成信息的系统。东方海外货柜航运有限公司（即我的实习单位）对信息化技术非常重视，在全球共有五个信息技术开发中心，它们组合在一起，技术上相互促进，成为东方海外一个重要的it战略中心，通过分工合作对这个区域性集成信息系统（简称iris-4）的开发和支持。随着网络不断深入人心，internet技术也越来越得到人们的重视。东方海外的服务宗旨是以客为尊，开发此信息系统也要方便客户。通过建立在internet基础上的信息系统能方便用户使用，而且还能加强企业各个部门之间的协作，提高企业的整体运作水平。因此，此信息系统是建立于browser/server结构的。在信息系统的使用中，用户通过系统的界面与系统

13、进行友好的交互，因此，友好的用户界面能保障系统的正常操作。航运企业拥有零散的港口、码头、货主、货代，信息数据量巨大，简洁友好的用户界面能使用户快速得到想要的数据，以增强公司的竞争力。因此，此区域性集成信息管理系统的界面简洁美观、操作舒适。1.2开发环境简介随着网络技术的快速发展，b/s模式的系统也更加流行，web是随着internet的普及使用而发展起来的一门技术。传统的c/s模式开发和维护成本较高，客户的操作步骤多，不利于用户的友好操作，用户界面也不统一，根据所装的客户端决定。 web系统的一大优点就是与平台无关，无论你的系统平台是什么，你都可以通过internet访问www。因此，这省略了

14、用户在本机安装客户端的步骤，让用户随时随地通过浏览器来使用本系统。本区域性集成信息系统界面的开发平台是windows7 enterprise，开发工具是eclipse 3.7，服务器使用weblogic，开发技术是extjs，数据结构是json。1.2.1 操作系统（windows7 enterprise）windows7 企业版是面向企业市场的高级版本，满足企业数据共享、管理、安全等需求。对于有些企业级的功能，windows7企业版做了很多改善，并提供了很多增强功能，其中包括内置驱动器数据保护，同时，外置的也进行了相应的保护措施。有些非授权软件运行，windows7会给予锁定，从而增强了网络

15、缓存等等。windows7相比于以前的版本，使用户更容易使用，而且更加快速、简单、安全。1.2.2 eclipse3.7简介eclipse是一个开放源代码的可扩展的开发平台，可通过插件组件构建开发环境，便于大型项目的管理。对于不同的开发人员使用不同的开发语言，例如java、c/c+、php、javascript等，在eclipse上通过这些语言来实现编程，只需在eclipse上安装相应的插件。eclipse3.7于2011年6月22号发行，可以集成很多插件，例如apache、maven等等。eclipse的设计思想是：一切皆插件。它主要由eclipse项目、eclipse工具项目和eclips

16、e技术项目三个项目组成，具体包括四个部分组成eclipse platform、jdt、cdt和pde。在本次信息系统界面开发中，我们在eclipse上安装了spket ide。spket是一个写javascript代码的插件。1.2.3 weblogicweblogic是美商oracle的主要产品之一，是商业市场上主要的java应用服务器软件之一，是世界上第一个成功商业化的j2ee应用服务器。weblogic server是适用于云环境，也适用于传统环境，这类型的应用服务器是用来构建网站的必须要使用的软件，其中可以用来解析和发布网页等功能。weblogic server是运行在用户界面之后，对

17、用户是不可见的，用户不能在服务器上进行操作，只是为连接它上面的客户提供服务。weblogic server具有开发和部署web应用系统所需的特点，使web应用系统的实施更加简单，也更加可靠，其容错和安全性能已经在全球数以千计的关键人物环境中得以验证，是企业值得信赖的软件。1.2.4 数据格式jsonjson（javascript object notation）是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，易于人阅读和编写，同时也易于机器解析和生成。在javascript中，json是一种非常重要的数据格式，json数据的结构也很简单，数据结构为key:value,key:valu

18、e,，这种数据结构在面向对象的语言中也十分相似，方便使用者理解和使用，key相对于面向对象中的对象属性，value则为面向对象中的属性值，json数据结构比起xml那种复杂的标签结构，因为代码量相比来讲更小，从而使得它更能理解。1.2.5 extjs简介extjs简称ext，它是一个用javascript编写的非常优秀的ajax框架，实现了与后台无关的，它开发的客户端应用会显得十分绚丽。ext之所以能吸引许多程序员的眼球，同时也能吸引众多客户，是因为它的功能十分强大，界面的效果炫丽，以致能使使用者达到开发的标准，它基于javascript、html和css开发而成，无需安装任何插件即可在浏览器

19、中创建出炫丽的页面效果。ext的功能十分丰富，拥有很多其他技术无法实现或极难实现的功能，其中，ext的表格控件当属一流。对于本区域性集成信息系统来说，重点难点在于用表格显示成百上千条数据的实现，表格能有效地将大量数据组织起来，让用户可以快速找到想要的数据，而且ext的表格让程序员开发相应的功能也得心应手，自动生成行号、添加或删除一行或多行、支持本地及远程分页等等，这些功能都在ext表格控件里实现了。extjs的使用与其他开发技术不太一样，首先要在ext官方网站下载，得到extjs的库文件，然后下面的3个文件是必须要导入的，包括ext-all.css、ext-base.js和ext-all.js

20、，并且这三个文件的引用也是有先后顺序的。在ext官方网站下载开发包后，解压会在它目录下找到examples目录，这个目录下收藏了ext很多的官方例子，要想深入应用ext，那么必须要认真仔细阅读学习该目录下的源代码，这些项目例子的代码质量非常高，是我们学习ext最好的例子，只有这样我们可以更加深刻了解javascript面向对象编程以及学到很多高级的js编程技巧及设计模式。在使用extjs进行编程的过程中，ext api 就是我们的无声老师，在api里可以查阅到很多信息，但是它的api页面是通过ajax方式获得的，用户不能直接在本地看，只有将解压了的目录发布到服务器上，只有通过浏览器来访问服务器

21、，才能在ext的api里进行查询和使用。在开发的过程中，我们用调试工具firebug作为辅助工具，它可以显示动态生成的dom，甚至可以直接对dom进行修改并反映到显示页面上。2 需求分析2.1 系统需求作为航运企业的核心系统，该区域性集成信息系统每天都要跟大量的数据打交道，处理的数据量也十分巨大。系统的要求主要要有优良的可视化操作界面，方便用户快速、准确找出想要的信息，以确保系统的可操作性和与用户的交互性能进一步提高，消除用户的操作疲惫感。2.2 界面设计原则该区域性集成信息系统信息系统的界面主要有三大原则：第一、界面简洁，便于用户使用，减少用户在使用过程中错误选择的可能性；第二、界面的结构清

22、晰一致，风格一样，在视觉效果上便于理解；第三、人性化，通过表格显示大量数据，表格简洁易懂。2.3需求分析界面主要分成两大部分：搜索条件部分和结果显示部分。2.3.1 条件搜索部分在这一部分按照指定布局放置各种组件让用户输入搜索条件，并为单个组件或者组件与组件之间设定搜索规则，符合规则就显示搜索结果，反之，用高亮标志提醒用户。当用户点击“reset”按钮，隐藏结果表格，搜索条件清空。2.3.2 结果显示部分这一部分主要是包括要显示搜索数据的表格，页面刚加载的时候这一部分是隐藏的，只有用户通过搜索条件规则，带有结果数据的表格就会自动显示出来。2.4 界面功能流程图下图是界面功能的流程图。yn输入条

23、件点击”search”满足规则？加载数据显示表格图2-1 界面功能流程图2.5 性能需求性能需求是指用户在系统响应时间、结果精度、运行时资源消耗量、界面友好、可重用性等方面的要求。该区域性集成信息系统采用mvc模式，它能降低系统的耦合性，实现视图层和业务层分离，将界面层的代码放在ui目录下，数据层代码放在datastore目录下，业务层的代码放在impl目录下，这样使得代码的结构更清晰，更容易维护和使用。3 总体设计3.1 界面结构图该区域性集成信息系统部分界面结构图如下。inventory forecast主界面monitor repo planinventory summaryregion

24、al repo plan条件搜索部分结果显示部分条件搜索部分条件搜索部分条件搜索部分结果显示部分结果显示部分结果显示部分图3-1 界面结构图3.2 总体功能设计3.2.1 monitor repo planmonitor repo plan是我实习接触的第一个项目，在这个界面上可以接受用户在上面输入查询条件，查询后将用户查询的数据通过表格显示，并提供按钮给用户下载数据。条件搜索部分条件搜索部分是给用户输入查询条件的，上面的控件排布必须清晰易懂，减轻用户的视觉负担。在monitor repo plan 的条件搜索部分上，主要有以下控件：东方海外自己创建的文本框、下拉框、日期选择项、

25、列表框、多选框、按钮等。里面的下拉框都设置了默认值，并且这些下拉框要设置属性triggeraction为all，否则用户再去选择下拉框里值的时候就只有默认值。单个控件或控件和控件之间都设置了搜索规则，例如，repo out一列中的opzone文本框和region文本框不能同时为空，也不能同时输入搜索条件，当其中一个不为空，另一个就处于不可编辑状态。下拉框week和日期选择项from eta也只能输入其中一项。repo in和repo out的规则一样。列表框eqp.size/type不能为空，但是可以多选。按钮search颜色要高亮，点击按钮后，如果符合搜索规则，就会连接后台请求数据，并且使表

26、格处于可见状态，显示搜索数据。 结果显示部分结果显示部分主要是用来放置显示结果数据的表格，这一部分在页面一开始处于隐藏状态，只有点击按钮search通过了搜索规则才会显示出来，点击按钮reset会再次被隐藏。表格里有一个按钮给用户用来下载数据，并有三列数据设有链接功能，通过点击链接可以跳转到另一界面。3.2.2 regional repo planregional repo plan同样秉承界面清晰易懂的原则，界面的结构跟monitor repo plan类似，分为上下结构，上面部分是条件搜索部分，下面是结果显示部分。 条件搜索部分regional repo pla

27、n的条件搜索部分相对来说搜索的条件较少，有东方海外自己创建的文本框、下拉框和两个按钮，功能跟monitor repo plan模块的条件搜索部分的功能一样，文本框opzone和文本框region只能输入一个作为搜索条件，实现的方法是为这两个控件添加监听事件listeners，在listeners添加changed方法，在方法中定义两个变量来获得两个控件的值并判断是否为空，例如文本框opzone不为空，则将文本框region的属性setdisabled设为true，此时，文本框region不可编辑。反之，将文本框opzone的属性setdisabled的值设为true。代码如下：var opzo

28、ne = ext.getcmp(opzone);var region = ext.getcmp(region);if(opzone != )region.setvalue();region.setdisabled(true);elseregion.setdisabled(false); 结果显示部分regional repo plan的结果显示部分有两个表，页面刚加载的时候也是处于隐藏状态，只有点击按钮search通过了搜索规则才会被显示。这两个表，一个是用来放repo in的数据，另一个是用来放repo out的数据，通过传不同的参数到后台，以致能正确得到后台传回来的数据。这两

29、个表的数据按照status来分有三种数据，分别是cod、plan和incoming，不同种类的数据所在行要设置不同的颜色，实现方法代码如下：view: new ext.grid.gridview(getrowclass:function(record,index,p,s)if(record.data.string = incoming)return “grid-incoming”else if(record.data.string = plan)return “grid-plan”;else if(record.data.string = cod)return ”grid-cod”;)颜色代码

30、是编辑在一个css文件里，通过颜色元素和页面控制分离更好地进行代码的管理和修改。颜色css文件代码如下：.grid-incomingbackground:white;.gird-planbackground:#dff1fd;grid-codbackground:#ffffcc;3.2.3 inventory forecastinventory forecast跟monitor repo plan和regional repo plan相比最大的不同就是表格部分，这次的表格更为复杂，不同之处有：第一、表格的数据可以按照指定条件分为三级，是一个分组表格；第二、表格可以根据某一列进行收缩与展开；第三、

31、动态表头，表头的值根据后台传回来的值而改变。 条件搜索部分inventory forecast的条件搜索部分里三个文本框之间有指定规则，即某一个不为空时，另外两个处于不可编辑状态。 结果显示部分inventory forecast这一模块的重点难点就在于表格的实现，一共有两个表格，都是分组表格。表格刚加载的时候默认只显示end balance行和weekly列，其他的行和列都隐藏，当用户需要的时候再显示。按指定元素进行分组，主要是在数据存储器store里添加groupfield属性。例如第二个grid，是按照sizetype,opzone和facility进行分组，

32、因此要将groupfield设置为groupfield:sizetype,opzone,facility。表头为双层表头，而且顶层表头为动态表头，随后台传回的值而变化，主要是通过setcollaspeheadertext方法设置。3.2.4 inventory summaryinventory summary的特别之处就在于它的搜索条件部分多了地图检索功能，地图用的是open street map，嵌入到界面中。条件搜索部分由于多了open street map的加入，inventory summary的条件搜索部分多了很多控件，而且控件之间的搜索规则也变得复杂了。首先是一个下拉

33、框，通过设置它的属性store来指定它的值，之后就是两个东方海外自己创建的组件，这两个组件的规则是只能输入一个。然后是两个滑动条，滑动条的值的范围是0-5，精度是0.1，它们之间的规则是当一个滑动条旁边的复选框被选上时，则另一个滑动条和复选框就处于不可编辑状态。列表框里最后两个值imbalance和bs ratio要始终处于被选择状态，通过添加listeners监听器里的change方法，change方法代码如下：change:function(bs,v)var value = imbalance,bsratio,+v;ext.getcmp(displayinventory).setvalue

34、(value); 结果显示部分inventory summary的结果显示部分的表格仍然是分组表格，不过只是按照变量opzone来分组，此时groupfield:opzone，当opzone收缩了的时候，end balance行也应该显示出来。当变量status为imbalance或者bs ratio，所在行的颜色要设为黄色，代码如下：if(record.data.status = imbalance | record.data.status = bsratio)return “gridrowimb-bs-highlight”；gridrowimb-bs-highlight保存在

35、一个css文件里，该文件代码如下：.gridrowimb-bs-highlightbackground:#ffffcc;3.3 数据解析在用户输入搜索条件并点击按钮search后，前端会把搜索部分里的值作为参数传回后台请求数据。ext是通过ext.data.store来进行数据交换和数据交互的，都是通过它实现数据读取、类型转换等操作的，store里有一个ext.data.record数组，所有数据都存放在这些record实例中，为后面的读取等操作做准备。项目用的是store是ext.data.groupingstore，通过http来获取数据，所以proxy类型选择ext.data.httpp

36、roxy，proxy里有个url属性，通过设置url属性的值来连接后台获得列表的信息，返回的信息中有两个参数，分别是totalproperty和root，这两个参数会将后台的数据显示在页面的grid中。后台返回的是json格式的数据，因此这里使用ext.data.jsonreader进行数据解析，主要是通过name和mapping两个属性进行数据的匹配。将grid中每列显示的数据通过创建ext.grid.columnmodel与store中的数据相对应。4 设计思想与实现本文所研究的内容均是东方海外iris-4项目的模块，实现方法和思想自然也要向东方海外的编程要求靠拢。每个模块的目录分为三部分

37、，分别是界面布局的ui、数据获取与解析的datastore和动作控制的impl，充分体现了mvc框架的设计思想。在界面布局的ui中，分为界面总布局master.ui、条件搜索部分srchcri.ui和结果显示部分resultgrid.ui。在实际的设计中，先实现条件搜索部分和结果显示部分，再通过接口把这两部分跟其它布局整合到master.ui里。mvc框架的精髓在于视图层跟业务层分离，目录imlp就是用来控制对ui的动作操作的，目录ui下的每一个文件，都在impl里被对应的文件继承，因此impl里都有master、resultgrid和srchcri，并在impl里实现事件的方法。datastore是用来跟后台连接来获取数据并进行解析的，一般来说，一个表格对应一个datastore文件，每个store至少都会有proxy和reader两个属性