flex中 使用ExtJs开发MIS系统基于ExtJs的MIS构架设计.docVIP

使用ExtJs开发MIS系统（1）：基于ExtJs的MIS构架设计 1，引言 本系列文章的目标是讲述ExtJs开发MIS的一些设计思路和技巧，本 文假定你已经了解ExtJs，熟悉ExtJs中的主要类且有较强的Js编程能力，缺乏的仅仅是应用的技巧。关于ExtJs的基本内容，请参阅ExtJs官 方网站、Google和园里的相关文章。文中中一些技巧和方法不限于ExtJs，在很多基于富客户端框架——例如SilverLight、Flex等的系 统设计中，都可以使用。 本系列主要包括以下内容： 基于ExtJs的MIS构架设计。 Js的动态加载。 使用数据库保存客户端状态。 轮询。 使用Action抽象客户端操作。 客户端MVC。 最后，如果还有精力的话，再写一些ExtJs性能方面的心得。 本文中的例子、代码等来源于真实的的项目，所以恕不能提供完整的代码下载，但会尽量详细的阐述设计思路，并给出关键的代码片段。 欢迎大家交流和指教。 2，客户端的“致富”之路 在SilverLight、Flex等富客户端框架出现以前，系统中通常由服务器负责Html、Css等的生成，也就是负责显示逻辑，客户端与服务器端的交互是按下图的样子： 富客户端将显示逻辑从服务器端转移到客户端。这样服务器端仅仅负责业务逻辑的处理和运算，把处理的结果以纯数据的形式发送给客户端，然后客户端负责具体的显示和交互，这个过程可以通过下面这个图直观的看出来： 以下对图进行一些说明： 1， 图中ExtJs即为客户端框架，当然也可以采用SilverLight等充当。 2， 服务器给出的响应Response，也可以使用JSON等格式，Google就有自己的数据串行化格式：Protocol Buffers。 3， 服务器端关注的仅仅是业务逻辑，而不是数据的表现形式。所以服务器端的响应通常是和客户端无关的，客户端也可以采用WinForm、SilverLight甚至是其他服务等处理端。 4， 理论上讲，我们可以仅仅和ExtJs打交道，而不需要关心具体Html、Css、JavaScript等，然而实际上是不可能的，复杂操作的时候仍免不了 和DOM打交道，而ExtJs在这个时候也能开发提供很大便利。如果使用的SilverLight等其它的、基于浏览器端插件的框架，情况会好一些，但仍 然无法避免和DOM打交道。客户端框架任重而道远…… 3，两个世界的对话 服务器和客户端通过Http协议进行交谈，对于一个典型的登录操作来说，客户端发送的Http请求如下（忽略Http头）： POST /User.asmx/Login HTTP/1.1…… loginId=yuandongpassword=mypassword 而服务器端给出的响应是： HTTP/1.1 200 OK…… ?xml version=1.0 encoding=utf-8?LoginResult??? StateWrongPassword/State/LoginResult 对于列表类型的数据，服务器给出类似以下的响应： HTTP/1.1 200 OK…… ?xml version=1.0 encoding=utf-8?Announcemnts??? Announcement??????? Content为方便专家使用……/Content??????? DateTime2008/11/05/DateTime??????? ID3/IDStateTop/State??????? Title关于新系统密码获取问题/Title??????? UserName袁冬/UserName??? /Announcement??? Announcement??????? Content为适应三校区办公……/Content??????? DateTime2008/10/16/DateTime??????? ID1/IDStateTop/StateTitle关于启用新版的说明/Title??????? UserName用户A/UserName??? /Announcement/Announcemnts 就像上一节提到的，以上请求和响应，完全是基于数据的，与显示方式无关。另一方面，以上类型的响应可以很容易的使用ExtJs的相关Reader类读取。当然使用JSON等方式传输数据也是可以的，ExtJs也提供了相关的读取类。 4，不是WebService的WebService 从服务器和客户端的通讯方式来看，只要服务器端能够在接收到请求后，给出符合格式的响应，就算OK。我们使用ASP.Net WebService的方式来组织服务器端代码，但不使用SOAP协议，所以叫“不是WebService的We