UDN-企业互联网技术人气社区

板块导航

浏览  : 854
回复  : 8

[ExtJs] 用Ext JS构建Ajax应用程序:一种用于富因特网应用程序开发...

[复制链接]
饼干妹妹的头像 楼主
本帖最后由 饼干妹妹 于 2015-7-31 13:23 编辑

      简介:
     Ext JS 是一种强大的 JavaScript™ 库,它通过使用可重用的对象和部件简化了 Asynchronous JavaScript + XML(Ajax)开发。本文介绍 Ext JS,概述它背后的面向对象 JavaScript 设计概念,解释如何使用 Ext JS 框架开发富因特网应用程序的用户界面元素。

      当今有许许多多的 Web 开发框架,开发人员很难判断哪些框架值得花时间去学习。Ext JS 是一种 JavaScript 开发框架,这种强大的 JavaScript 库通过使用可重用的对象和部件简化了 Ajax 开发,Web 应用程序开发人员应该认真考虑使用这个工具。Ext JS 最初是 Jack Slocum 编写的一组 Yahoo! User Interface(YUI)Library 扩展。但是,随着 2.0 版的发布,它已经成为市场上最简单最强大的 JavaScript 库。

     Ext JS 概述
     Ext JS 项目最初的目的是扩展 YUI Library 提供的功能。YUI Library 的一个关键方面是跨浏览器 支持,这也可以在 Ext JS 中找到。这种支持使开发人员在构建 Web 应用程序时不需要考虑目标浏览器 。
     Ext JS 提供出色的性能。这个框架是完全面向对象且可扩展的。因为 Ext JS 是用 JavaScript 编写 的,所以只需下载并安装,就可以使用 Ext JS 的特性。

   许可协议
     在采用一个新框架之前,一定要了解框架基于哪种许可协议条款。Ext JS 提供几个许可协议选项:

     开放源码许可证:这采用 Open Source LGPL 3.0 许可证的条款。如果打算在另一个开放源码项目或 者个人、教育或非盈利项目中使用 Ext JS,这是最合适的许可证。

     商用许可证:如果希望在项目中使用 Ext JS 时避免开发源码许可证的某些限制,或者由于内部原因 必须拥有许可证,或者希望在商业上支持 Ext JS 的开发,这是最合适的许可证。参考资料 中提供了 Ext JS 站点的链接,这个站点提供关于商用许可证的详细信息。

     原始设备生产商(OEM)/转售商许可证:如果您打算对 Ext JS 进行重新打包,或者作为软件开发库 销售 Ext JS,这种许可证是最合适的。

     Ext JS 浏览器支持
     所有主流的 Web 浏览器都支持 Ext JS 框架,包括:
     Windows® Internet Explorer® 6 及更高版本。
     Mozilla Firefox 1.5 及更高版本(PC 和 Macintosh)。
     Apple Safari 2 及更高版本。
     Opera 9 及更高版本(PC 和 Mac)。

设计模式和 Ext JS
      开发人员应该会喜欢 Ext JS 经过深思熟虑的设计和实现。它的面向对象设计模式反映了对象之间的 关系和交互。据设计者说,开发 Ext JS 时使用的设计模式在很大程度上受到 Head First Design Patterns 这本书(Eric Freeman 等著,参见 参考资料)的影响。查看 Ext JS 源代码,就会发现创建 模式(包括 singleton 设计模式)、结构模式(包括 flyweight 设计模式)和行为模式(包括 observer 模式)。

     用 Ext JS 构建富因特网应用程序

     Ext JS 提供大量用户界面元素,这是开发富因特网应用程序(RIA)所必需的。Ext JS 包含消息框、 组合框、数据网格和工具栏等控件。另外,还可以通过布局管理器指定元素在页面上的显示方式。还有用 于操作表单和窗口的其他特性。

     如果使用其他框架,JavaScript 文件的包含次序是可以修改的。但是,Ext JS 通常按照 清单 1 那 样包含在 Web 应用程序中(假设 Ext JS 安装在 Web 服务器上的 lib/ext 目录中):

清单 1. 包含 Ext JS 框架
  1. <script type ="text/javascript" src="lib/ext/ext- base.js"></script>
  2. <script type ="text/javascript" src="lib/ext/ext- all.js"></script>
复制代码
     ext-all.js 包含整个 Ext JS 框架。可以按照上面的排列引用文件,也可以只包含应用程序中使用的 元素所需的文件。
      如果结合使用 Ext JS 框架和其他 JavaScript 库,请参考安装根目录中的 INCLUDE_ORDER.txt 文件 ,它说明了在应用程序中包含库的次序。
用户界面元素
     Ext JS 框架的主体是大量用户界面元素。这些元素包括表单、对话框、选项卡、树和网格。
表单
     Ext JS 提供一组用来创建交互式表单的工具。
图 1 给出一个表单示例。清单 2 给出相关的实现。
图 1. Ext JS 表单示例
13000MC0-0.jpg

清单 2. Ext JS 表单示例的源代码
  1. var top = new Ext.FormPanel({
  2.   labelAlign: 'top',
  3.   frame:true,
  4.   title: 'Multi Column, Nested Layouts and Anchoring',
  5.   bodyStyle:'padding:5px 5px 0',
  6.   width: 600,
  7.   items: [{
  8.     layout:'column',
  9.     items:[{
  10.       columnWidth:.5,
  11.       layout: 'form',
  12.       items: [{
  13.         xtype:'textfield',
  14.         fieldLabel: 'First Name',
  15.         name: 'first',
  16.         anchor:'95%'
  17.       }, {
  18.         xtype:'textfield',
  19.         fieldLabel: 'Company',
  20.         name: 'company',
  21.         anchor:'95%'
  22.       }]
  23.     },{
  24.       columnWidth:.5,
  25.       layout: 'form',
  26.       items: [{
  27.       xtype:'textfield',
  28.       fieldLabel: 'Last Name',
  29.       name: 'last',
  30.       anchor:'95%'
  31.     },{
  32.       xtype:'textfield',
  33.       fieldLabel: 'Email',
  34.       name: 'email',
  35.       vtype:'email',
  36.       anchor:'95%'
  37.     }]
  38.   }]
  39.   },{
  40.     xtype:'htmleditor',
  41.     id:'bio',
  42.     fieldLabel:'Biography',
  43.     height:200,
  44.     anchor:'98%'
  45.   }],
  46.     buttons: [{
  47.     text: 'Save'
  48.   },{
  49.     text: 'Cancel'
  50.   }]
  51. });
  52.   top.render(document.body);
复制代码
    对话框和选项卡
    如 图 2 所示,Ext JS 支持创建用于用户输入的模态对话框,还支持实现选项卡式用户界面,以便充 分利用屏幕空间。图 2 中对话框的源代码见 清单 3。
   图 2. Ext JS 模态对话框和选项卡
13000H208-1.jpg

清单 3. Ext JS 模态对话框的源代码
  1. var LayoutExample = function(){
  2. // everything in this space is private and only accessible in the HelloWorld block
  3. // define some private variables
  4. var dialog, showBtn;
  5. var toggleTheme = function(){
  6.   Ext.get(document.body, true).toggleClass('xtheme-gray');
  7. };
  8. // return a public interface
  9. return {
  10.   init : function(){
  11.   showBtn = Ext.get('show-dialog-btn');
  12.   // attach to click event
  13.   showBtn.on('click', this.showDialog, this);
  14. },
  15. showDialog : function(){
  16.   if(!dialog){ // lazy initialize the dialog and only create it once
  17.    dialog = new Ext.LayoutDialog("hello-dlg", {
  18.    modal:true,
  19.    width:600,
  20.    height:400,
  21.    shadow:true,
  22.    minWidth:300,
  23.    minHeight:300,
  24.    proxyDrag: true,
  25.    west: {
  26.     split:true,
  27.     initialSize: 150,
  28.     minSize: 100,
  29.     maxSize: 250,
  30.     titlebar: true,
  31.     collapsible: true,
  32.     animate: true
  33.    },
  34.    center: {
  35.     autoScroll:true,
  36.     tabPosition: 'top',
  37.     closeOnTab: true,
  38.     alwaysShowTabs: true
  39.    }
  40.  });
  41.  dialog.addKeyListener(27, dialog.hide, dialog);
  42.  dialog.addButton('Submit', dialog.hide, dialog);
  43.  dialog.addButton('Close', dialog.hide, dialog);
  44.  var layout = dialog.getLayout();
  45.  layout.beginUpdate();
  46.  layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
  47.  layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'}));
  48.  // generate some other tabs
  49.  layout.add('center', new Ext.ContentPanel(Ext.id(), {
  50.   autoCreate:true, title: 'Another Tab', background:true}));
  51.  layout.add('center', new Ext.ContentPanel(Ext.id(), {
  52.   autoCreate:true, title: 'Third Tab', closable:true, background:true}));
  53.  layout.endUpdate();
  54. }
  55. dialog.show(showBtn.dom);
  56. }
  57. };
  58. }();
  59. // using onDocumentReady instead of window.onload initializes the application
  60. // when the DOM is ready, without waiting for images and other resources to load
  61. Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);
复制代码
   创建树
   如 图 3 所示,Ext JS 还提供树控件,这种控件提供用户熟悉的与文件系统相似的视图。Ext JS 树 控件完全支持拖放功能。图 3 所示树控件的源代码见 清单 4。
图 3. Ext JS 树控件
13000K417-2.jpg

清单 4. Ext JS 树控件的源代码
  1. var TreeTest = function(){
  2. // shorthand
  3.  var Tree = Ext.tree;
  4.  return {
  5.   init : function(){
  6.    // yui-ext tree
  7.    var tree = new Tree.TreePanel({
  8.      el:'tree',
  9.      animate:true,
  10.      autoScroll:true,
  11.      loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}),
  12.      enableDD:true,
  13.      containerScroll: true,
  14.      dropConfig: {appendOnly:true}
  15.    });
  16.    // add a tree sorter in folder mode
  17.    new Tree.TreeSorter(tree, {folderSort:true});
  18.    // set the root node
  19.    var root = new Tree.AsyncTreeNode({
  20.     text: 'Ext JS',
  21.     draggable:false, // disable root node dragging
  22.     id:'source'
  23.    });
  24.    tree.setRootNode(root);
  25.    // render the tree
  26.    tree.render();
  27.    root.expand(false, /*no anim*/ false);
  28.    //-------------------------------------------------------------
  29.    // YUI tree
  30.    var tree2 = new Tree.TreePanel({
  31.      el:'tree2',
  32.      animate:true,
  33.      autoScroll:true,
  34.      loader: new Ext.tree.TreeLoader({
  35.       dataUrl:'get-nodes.php',
  36.       baseParams: {lib:'yui'} // custom http params
  37.      }),
  38.      containerScroll: true,
  39.      enableDD:true,
  40.      dropConfig: {appendOnly:true}
  41.    });
  42.    // add a tree sorter in folder mode
  43.    new Tree.TreeSorter(tree2, {folderSort:true});
  44.    // add the root node
  45.    var root2 = new Tree.AsyncTreeNode({
  46.      text: 'My Files',
  47.      draggable:false,
  48.      id:'yui'
  49.    });
  50.    tree2.setRootNode(root2);
  51.    tree2.render();
  52.    root2.expand(false, /*no anim*/ false);
  53.   }
  54.  };
  55. }();
  56. Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
复制代码
    网格
     最强大的 Ext JS 用户界面元素可能是网格控件。可以通过它显示来自后端数据源的数据和其他结构 化数据,比如 XML 和数组。如 图 4 所示,Ext JS 网格可以实现分页和列排序。这个示例接收来自 ExtJS.com 论坛的最新主题,强调了 Ext JS 框架的 Ajax 功能。图 4 所示网格的源代码见 清单 5。
图 4. Ext JS 网格控件
13000G5G-3.jpg

清单 5. Ext JS 网格控件的源代码
  1. Ext.onReady(function(){
  2.  // create the Data Store
  3.  var store = new Ext.data.Store({
  4.  // load using script tags for cross domain, if the data in on the same domain as
  5.  // this page, an HttpProxy would be better
  6.  proxy: new Ext.data.ScriptTagProxy({
  7.   url: 'http://extjs.com/forum/topics-browse-remote.php'
  8.  }),
  9.  // create reader that reads the Topic records
  10.  reader: new Ext.data.JsonReader({
  11.   root: 'topics',
  12.   totalProperty: 'totalCount',
  13.   id: 'threadid',
  14.   fields: [
  15.    'title', 'forumtitle', 'forumid', 'author',
  16.    {name: 'replycount', type: 'int'},
  17.    {name: 'lastpost', mapping: 'lastpost', type: 'date',
  18.      dateFormat: 'timestamp'},
  19.    'lastposter', 'excerpt'
  20.   ]
  21.  }),
  22.  // turn on remote sorting
  23.  remoteSort: true
  24. });
  25. store.setDefaultSort('lastpost', 'desc');
  26. // pluggable renders
  27. function renderTopic(value, p, record){
  28.  return String.format(
  29.  '<b><a href="http://extjs.com/forum/showthread.php?t={2} "
  30.    target="_blank">{0}</a></b>
  31.    <a href="http://extjs.com/forum/forumdisplay.php?f={3}"
  32.    target="_blank">{1} Forum</a>',
  33.   value, record.data.forumtitle, record.id, record.data.forumid);
  34. }
  35. function renderLast(value, p, r){
  36. return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'),
  37.            r.data['lastposter']);
  38. }
  39. // the column model has information about grid columns
  40. // dataIndex maps the column to the specific data field in
  41. // the data store
  42. var cm = new Ext.grid.ColumnModel([{
  43.   id: 'topic',
  44.   header: "Topic",
  45.   dataIndex: 'title',
  46.   width: 420,
  47.   renderer: renderTopic
  48.  },{
  49.   header: "Author",
  50.   dataIndex: 'author',
  51.   width: 100,
  52.   hidden: true
  53.  },{
  54.   header: "Replies",
  55.   dataIndex: 'replycount',
  56.   width: 70,
  57.   align: 'right'
  58.  },{
  59.   id: 'last',
  60.   header: "Last Post",
  61.   dataIndex: 'lastpost',
  62.   width: 150,
  63.   renderer: renderLast
  64. }]);
  65. // by default columns are sortable
  66. cm.defaultSortable = true;
  67. var grid = new Ext.grid.GridPanel({
  68.   el:'topic-grid',
  69.   width:700,
  70.   height:500,
  71.   title:'ExtJS.com - Browse Forums',
  72.   store: store,
  73.   cm: cm,
  74.   trackMouseOver:false,
  75.   sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
  76.   loadMask: true,
  77.   viewConfig: {
  78.    forceFit:true,
  79.    enableRowBody:true,
  80.    showPreview:true,
  81.    getRowClass : function(record, rowIndex, p, store){
  82.     if(this.showPreview){
  83.     p.body = '<p>'+record.data.excerpt+'</p>';
  84.      return 'x-grid3-row-expanded';
  85.    }
  86.    return 'x-grid3-row-collapsed';
  87.   }
  88. },
  89. bbar: new Ext.PagingToolbar({
  90.  pageSize: 25,
  91.  store: store,
  92.  displayInfo: true,
  93.  displayMsg: 'Displaying topics {0} - {1} of {2}',
  94.  emptyMsg: "No topics to display",
  95.  items:[
  96.   '-', {
  97.   pressed: true,
  98.   enableToggle:true,
  99.   text: 'Show Preview',
  100.   cls: 'x-btn-text-icon details',
  101.   toggleHandler: toggleDetails
  102.  }]
  103. })
  104. });
  105. // render it
  106. grid.render();
  107. // trigger the data store load
  108. store.load({params:{start:0, limit:25}});
  109. function toggleDetails(btn, pressed) {
  110.   var view = grid.getView();
  111.   view.showPreview = pressed;
  112.   view.refresh();
  113. }
  114. });
复制代码
  Ext JS 和 Ajax
    Ext JS 框架支持 Ajax 实现。通常,Ajax 应用程序的一个共有特性是应用程序可以异步地响应用户 输入,它会更新部分用户界面,而不需要重新显示整个 Web 页面。清单 6 给出一个典型的 Ext JS Ajax 实现:当单击按钮时,HTML 文本框和按钮元素把文本框中的数据发送给 Web 服务器。

清单 6. Ext JS 的 Ajax 实现
  1. <script type =”text/javascript”>
  2. Ext.onReady(function(){
  3.  Ext.get('okButton').on('click', function(){
  4.   var msg = Ext.get("msg");
  5.   msg.load({
  6.    url: [server url], // <-- replace with your url
  7.     params: "name=" + Ext.get('name').dom.value,
  8.     text: "Updating..."
  9.   });
  10.   msg.show();
  11.  });
  12. });
  13. </script>

  14. <div id="msg" style="visibility: hidden"></div>
  15. Name: <input type="text" id="name" /><br />
  16. <input type="button" id="okButton" value="OK" /<span style="line-height: 1.5; background-color: rgb(255, 255, 255);">></span>
复制代码
    当用户单击 OK 时,使用 Ext JS UpdateManage 类发出 Ajax 调用,这比传统的 Ajax HttpRequest 调用简单多了。
     Ext JS 与其他 Web 服务器框架的集成
     可以把 Ext JS 与其他常用的服务器端 Web 开发框架一起使用,包括 PHP、Java 语言、Microsoft .NET、Ruby on Rails 和 ColdFusion。关于与这些框架集成的详细信息,参见 参考资料。
     Ext JS 开发工具
     可以在几种流行的集成开发环境(IDE)中进行 Ext JS 开发,包括 Eclipse、Aptana 和 Komodo。关 于 IDE 对 Ext JS 开发的支持的信息,参见 参考资料。

结束语

     Web 开发框架常常承诺简化和加快应用程序开发,但是许多框架都没有实现这个目标。Ext JS 通过一 个易用的开发模型实现了它的承诺。最新的 Ext JS 版本(2.0)表明,它正在快速进步,可以成为 RIA 开发的基础。
     本文只是粗略地介绍 Ext JS 框架的主要特性,Ext JS 的特性远不止这些。现在,如果要进行更深入 的探索,请从 ExtJS.com Web 站点和 交互式示例 开始!
















相关帖子

发表于 2015-8-12 12:33:39 | 显示全部楼层
占坑编辑ing
使用道具 举报

回复

发表于 2015-8-13 20:50:01 | 显示全部楼层
路过 帮顶 嘿嘿不错的帖子,支持下
使用道具 举报

回复

发表于 2015-8-14 08:39:42 | 显示全部楼层
占坑编辑ing
点评 ( 1 ) 收起 / 展开点评

静静的小婊妹 2015年08月23日 13:47 详情 回复

楼主辛苦了哦

使用道具 举报

回复

发表于 2015-8-23 13:47:47 | 显示全部楼层
楼主辛苦了哦
点评 ( 1 ) 收起 / 展开点评

张同学爱英语 2015年08月23日 15:08 详情 回复

好帖子 感谢分享

使用道具 举报

回复

发表于 2015-8-23 15:08:29 | 显示全部楼层
好帖子 感谢分享
点评 ( 1 ) 收起 / 展开点评

我爱画画 2015年08月23日 15:15 详情 回复

叫我雷锋 我是专门来支持楼主的

使用道具 举报

回复

发表于 2015-8-23 15:15:06 | 显示全部楼层
叫我雷锋 我是专门来支持楼主的
点评 ( 1 ) 收起 / 展开点评

武大娘 2015年08月23日 15:26 详情 回复

好帖子 感谢楼主分享

使用道具 举报

回复

发表于 2015-8-23 15:26:55 | 显示全部楼层
好帖子 感谢楼主分享
使用道具 举报

回复

发表于 2017-8-29 11:19:24 | 显示全部楼层
楼主分享得很棒棒,学习到了
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部