- 浏览: 9299 次
- 性别:
- 来自: 上海
最新评论
一种用于富因特网应用程序开发的 JavaScript 框架(转载) |
Ext JS 是一种强大的 JavaScript™ 库,它通过使用可重用的对象和部件简化了 Asynchronous JavaScript + XML(Ajax)开发。本文介绍 Ext JS,概述它背后的面向对象 JavaScript 设计概念,解释如何使用 Ext JS 框架开发富因特网应用程序的用户界面元素。 <!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->当今有许许多多的 Web 开发框架,开发人员很难判断哪些框架值得花时间去学习。Ext JS 是一种 JavaScript 开发框架,这种强大的 JavaScript 库通过使用可重用的对象和部件简化了 Ajax 开发,Web 应用程序开发人员应该认真考虑使用这个工具。Ext JS 最初是 Jack Slocum 编写的一组 Yahoo! User Interface(YUI)Library 扩展。但是,随着 2.0 版的发布,它已经成为市场上最简单最强大的 JavaScript 库。
Ext JS 项目最初的目的是扩展 YUI Library 提供的功能。YUI Library 的一个关键方面是跨浏览器支持,这也可以在 Ext JS 中找到。这种支持使开发人员在构建 Web 应用程序时不需要考虑目标浏览器。 Ext JS 提供出色的性能。这个框架是完全面向对象且可扩展的。因为 Ext JS 是用 JavaScript 编写的,所以只需下载并安装,就可以使用 Ext JS 的特性。 在采用一个新框架之前,一定要了解框架基于哪种许可协议条款。Ext JS 提供几个许可协议选项:
所有主流的 Web 浏览器都支持 Ext JS 框架,包括:
开发人员应该会喜欢 Ext JS 经过深思熟虑的设计和实现。它的面向对象设计模式反映了对象之间的关系和交互。据设计者说,开发 Ext JS 时使用的设计模式在很大程度上受到 Head First Design Patterns 这本书(Eric Freeman 等著,参见 参考资料)的影响。查看 Ext JS 源代码,就会发现创建模式(包括 singleton 设计模式)、结构模式(包括 flyweight 设计模式)和行为模式(包括 observer 模式)。 |
||||
|
<script type ="text/javascript" src="lib/ext/ext-base.js"></script> <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 表单示例
清单 2. Ext JS 表单示例的源代码
var top = new Ext.FormPanel({ labelAlign: 'top', frame:true, title: 'Multi Column, Nested Layouts and Anchoring', bodyStyle:'padding:5px 5px 0', width: 600, items: [{ layout:'column', items:[{ columnWidth:.5, layout: 'form', items: [{ xtype:'textfield', fieldLabel: 'First Name', name: 'first', anchor:'95%' }, { xtype:'textfield', fieldLabel: 'Company', name: 'company', anchor:'95%' }] },{ columnWidth:.5, layout: 'form', items: [{ xtype:'textfield', fieldLabel: 'Last Name', name: 'last', anchor:'95%' },{ xtype:'textfield', fieldLabel: 'Email', name: 'email', vtype:'email', anchor:'95%' }] }] },{ xtype:'htmleditor', id:'bio', fieldLabel:'Biography', height:200, anchor:'98%' }], buttons: [{ text: 'Save' },{ text: 'Cancel' }] }); top.render(document.body); |
如 图 2 所示,Ext JS 支持创建用于用户输入的模态对话框,还支持实现选项卡式用户界面,以便充分利用屏幕空间。图 2 中对话框的源代码见 清单 3。
图 2. Ext JS 模态对话框和选项卡
清单 3. Ext JS 模态对话框的源代码
var LayoutExample = function(){ // everything in this space is private and only accessible in the HelloWorld block // define some private variables var dialog, showBtn; var toggleTheme = function(){ Ext.get(document.body, true).toggleClass('xtheme-gray'); }; // return a public interface return { init : function(){ showBtn = Ext.get('show-dialog-btn'); // attach to click event showBtn.on('click', this.showDialog, this); }, showDialog : function(){ if(!dialog){ // lazy initialize the dialog and only create it once dialog = new Ext.LayoutDialog("hello-dlg", { modal:true, width:600, height:400, shadow:true, minWidth:300, minHeight:300, proxyDrag: true, west: { split:true, initialSize: 150, minSize: 100, maxSize: 250, titlebar: true, collapsible: true, animate: true }, center: { autoScroll:true, tabPosition: 'top', closeOnTab: true, alwaysShowTabs: true } }); dialog.addKeyListener(27, dialog.hide, dialog); dialog.addButton('Submit', dialog.hide, dialog); dialog.addButton('Close', dialog.hide, dialog); var layout = dialog.getLayout(); layout.beginUpdate(); layout.add('west', new Ext.ContentPanel('west', {title: 'West'})); layout.add('center', new Ext.ContentPanel('center', {title: 'The First Tab'})); // generate some other tabs layout.add('center', new Ext.ContentPanel(Ext.id(), { autoCreate:true, title: 'Another Tab', background:true})); layout.add('center', new Ext.ContentPanel(Ext.id(), { autoCreate:true, title: 'Third Tab', closable:true, background:true})); layout.endUpdate(); } dialog.show(showBtn.dom); } }; }(); // using onDocumentReady instead of window.onload initializes the application // when the DOM is ready, without waiting for images and other resources to load Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true); |
如 图 3 所示,Ext JS 还提供树控件,这种控件提供用户熟悉的与文件系统相似的视图。Ext JS 树控件完全支持拖放功能。图 3 所示树控件的源代码见 清单 4。
图 3. Ext JS 树控件
清单 4. Ext JS 树控件的源代码
var TreeTest = function(){ // shorthand var Tree = Ext.tree; return { init : function(){ // yui-ext tree var tree = new Tree.TreePanel({ el:'tree', animate:true, autoScroll:true, loader: new Tree.TreeLoader({dataUrl:'get-nodes.php'}), enableDD:true, containerScroll: true, dropConfig: {appendOnly:true} }); // add a tree sorter in folder mode new Tree.TreeSorter(tree, {folderSort:true}); // set the root node var root = new Tree.AsyncTreeNode({ text: 'Ext JS', draggable:false, // disable root node dragging id:'source' }); tree.setRootNode(root); // render the tree tree.render(); root.expand(false, /*no anim*/ false); //------------------------------------------------------------- // YUI tree var tree2 = new Tree.TreePanel({ el:'tree2', animate:true, autoScroll:true, loader: new Ext.tree.TreeLoader({ dataUrl:'get-nodes.php', baseParams: {lib:'yui'} // custom http params }), containerScroll: true, enableDD:true, dropConfig: {appendOnly:true} }); // add a tree sorter in folder mode new Tree.TreeSorter(tree2, {folderSort:true}); // add the root node var root2 = new Tree.AsyncTreeNode({ text: 'My Files', draggable:false, id:'yui' }); tree2.setRootNode(root2); tree2.render(); root2.expand(false, /*no anim*/ false); } }; }(); Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true); |
最强大的 Ext JS 用户界面元素可能是网格控件。可以通过它显示来自后端数据源的数据和其他结构化数据,比如 XML 和数组。如 图 4 所示,Ext JS 网格可以实现分页和列排序。这个示例接收来自 ExtJS.com 论坛的最新主题,强调了 Ext JS 框架的 Ajax 功能。图 4 所示网格的源代码见 清单 5。
图 4. Ext JS 网格控件
清单 5. Ext JS 网格控件的源代码
Ext.onReady(function(){ // create the Data Store var store = new Ext.data.Store({ // load using script tags for cross domain, if the data in on the same domain as // this page, an HttpProxy would be better proxy: new Ext.data.ScriptTagProxy({ url: 'http://extjs.com/forum/topics-browse-remote.php' }), // create reader that reads the Topic records reader: new Ext.data.JsonReader({ root: 'topics', totalProperty: 'totalCount', id: 'threadid', fields: [ 'title', 'forumtitle', 'forumid', 'author', {name: 'replycount', type: 'int'}, {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'}, 'lastposter', 'excerpt' ] }), // turn on remote sorting remoteSort: true }); store.setDefaultSort('lastpost', 'desc'); // pluggable renders function renderTopic(value, p, record){ return String.format( '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b> <a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>', value, record.data.forumtitle, record.id, record.data.forumid); } function renderLast(value, p, r){ return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']); } // the column model has information about grid columns // dataIndex maps the column to the specific data field in // the data store var cm = new Ext.grid.ColumnModel([{ id: 'topic', header: "Topic", dataIndex: 'title', width: 420, renderer: renderTopic },{ header: "Author", dataIndex: 'author', width: 100, hidden: true },{ header: "Replies", dataIndex: 'replycount', width: 70, align: 'right' },{ id: 'last', header: "Last Post", dataIndex: 'lastpost', width: 150, renderer: renderLast }]); // by default columns are sortable cm.defaultSortable = true; var grid = new Ext.grid.GridPanel({ el:'topic-grid', width:700, height:500, title:'ExtJS.com - Browse Forums', store: store, cm: cm, trackMouseOver:false, sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}), loadMask: true, viewConfig: { forceFit:true, enableRowBody:true, showPreview:true, getRowClass : function(record, rowIndex, p, store){ if(this.showPreview){ p.body = '<p>'+record.data.excerpt+'</p>'; return 'x-grid3-row-expanded'; } return 'x-grid3-row-collapsed'; } }, bbar: new Ext.PagingToolbar({ pageSize: 25, store: store, displayInfo: true, displayMsg: 'Displaying topics {0} - {1} of {2}', emptyMsg: "No topics to display", items:[ '-', { pressed: true, enableToggle:true, text: 'Show Preview', cls: 'x-btn-text-icon details', toggleHandler: toggleDetails }] }) }); // render it grid.render(); // trigger the data store load store.load({params:{start:0, limit:25}}); function toggleDetails(btn, pressed) { var view = grid.getView(); view.showPreview = pressed; view.refresh(); } }); |
Ext JS 框架支持 Ajax 实现。通常,Ajax 应用程序的一个共有特性是应用程序可以异步地响应用户输入,它会更新部分用户界面,而不需要重新显示整个 Web 页面。清单 6 给出一个典型的 Ext JS Ajax 实现:当单击按钮时,HTML 文本框和按钮元素把文本框中的数据发送给 Web 服务器。
<script type =”text/javascript”> Ext.onReady(function(){ Ext.get('okButton').on('click', function(){ var msg = Ext.get("msg"); msg.load({ url: [server url], // <-- replace with your url params: "name=" + Ext.get('name').dom.value, text: "Updating..." }); msg.show(); }); }); </script> <div id="msg" style="visibility: hidden"></div> Name: <input type="text" id="name" /><br /> <input type="button" id="okButton" value="OK" /> |
当用户单击 OK 时,使用 Ext JS UpdateManage
类发出 Ajax 调用,这比传统的 Ajax HttpRequest
调用简单多了。
可以把 Ext JS 与其他常用的服务器端 Web 开发框架一起使用,包括 PHP、Java 语言、Microsoft .NET、Ruby on Rails 和 ColdFusion。关于与这些框架集成的详细信息,参见 参考资料。
可以在几种流行的集成开发环境(IDE)中进行 Ext JS 开发,包括 Eclipse、Aptana 和 Komodo。关于 IDE 对 Ext JS 开发的支持的信息,参见 参考资料。
Web 开发框架常常承诺简化和加快应用程序开发,但是许多框架都没有实现这个目标。Ext JS 通过一个易用的开发模型实现了它的承诺。最新的 Ext JS 版本(2.0)表明,它正在快速进步,可以成为 RIA 开发的基础。
本文只是粗略地介绍 Ext JS 框架的主要特性,Ext JS 的特性远不止这些。现在,如果要进行更深入的探索,请从 ExtJS.com Web 站点和 交互式示例 开始!
相关推荐
EXT程序规划入门 16 事前准备 16 需要些什么? 16 applayout.html 16 applayout.js 17 公开Public、私有Private、特权的Privileged? 19 重写公共变量 21 重写(Overriding)公共函数 21 DomQuery基础 22 DomQuery...
85 Element:Ext的核心 86 获取多个DOM的节点 87 响应事件 87 使用Widgets 88 編輯 使用Ajax 91 TabPanel基础 94 Step 1: 创建 HTML 骨架 94 Step 2: Ext结构的构建 96 Step 3: 创建Tab...
EXT程序规划入门 16 事前准备 16 需要些什么? 16 applayout.html 16 applayout.js 17 公开Public、私有Private、特权的Privileged? 19 重写公共变量 21 重写(Overriding)公共函数 21 DomQuery基础 22 DomQuery...
RIA Web应用程序开发的爱好者从中也可以找到前进的阶梯。本书可以作为Web开发的自学参考书,也可以作为RIAWeb程序开发的培训教材。.. ExtJS的前身是YUI(Yahoo User Interface),经过不断发展与改进,现在已经成为...
RIA Web应用程序开发的爱好者从中也可以找到前进的阶梯。本书可以作为Web开发的自学参考书,也可以作为RIAWeb程序开发的培训教材。.. ExtJS的前身是YUI(Yahoo User Interface),经过不断发展与改进,现在已经成为...
85 Element:Ext的核心 86 获取多个DOM的节点 87 响应事件 87 使用Widgets 88 編輯 使用Ajax 91 TabPanel基础 94 Step 1: 创建 HTML 骨架 94 Step 2: Ext结构的构建 96 Step 3: 创建Tab...
包含 extjs2.3版本;...Ext JS是一个流行的JavaScript框架,它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS基本上用于创建桌面应用程序它支持所有现代浏览器,如IE6 +,FF,Chrome,safari 6+ 等。
ExtJS 是为 web 开发人员提供的基于 JavaScript 和 web 标准快速构建可以跨浏览器平台运行的强大的 web 应用程序开发框架。它提供了丰富的用户界面组件和完善的文档资源,并且还有一个最重要的优势就是组件的设计...
沿途停靠的站点包括:JavaScript基础、JavaScript语法、JavaSctipt编程、页面交互信息的实现、Ajax客户端技术、jQuery框架、Ext JS框架和JavaScript调试的利器Firebug,以及使用iQuery实现在线留言板系统和一些门户...
目标是创建没有ViewState,没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源...
使用WebBuilder可开发ERP、OA、CRM、HR、MIS以及电信、银行、政府、企业等各行业的行业应用系统,帮助信息化管理系统的快速构建。 WebBuilder帮助提高应用系统的开发效率,并降低成本。完善的基础架构,具有应用...
-成熟的用户和角色管理-基于AJAX的易于使用的管理界面(使用Ext JS)-专为国际化而构建-XSLT 2.0 / XPath 2.0 Pulse灵活的模板设计充分考虑了品牌网站的外观,在演示中绝对具有灵活性核心要求。
使用WebBuilder可开发ERP、OA、CRM、HR、MIS以及电信、银行、政府、企业等各行业的行业应用系统,帮助信息化管理系统的快速构建。 WebBuilder帮助提高应用系统的开发效率,并降低成本。完善的基础架构,具有应用...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
1. jQuery – Javascript Framework jQuery 是最流行的 JavaScript 框架,它简化了HTML 文档遍历...官方介绍说是最先进的JavaScript框架,用于构建下一代跨平台的Web应用程序。 4. Prototype javascript Framwork Pr
配置平台:节点框架:快递模板引擎:玉CSS框架:引导程序CSS预处理器:CSS JavaScript框架: 构建工具:无单元测试:无数据库:mongodb 部署:无如何执行这个专案: 1.设置猫鼬或使用mlab将用户保存到数据库。 2....
[如何使用] 下载程序,解压上传到你的服务器路径下,data目录设置777权限。访问体验超便捷的服务吧! (data目录没有写权限会导致配置修改不能保存、不能新建用户等) [关于上传问题] 程序没有做任何限制,如果需要...