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，这种许可证是最合适的。
所有主流的 Web 浏览器都支持 Ext JS 框架，包括：
- Windows® Internet Explorer® 6 及更高版本。
- Mozilla Firefox 1.5 及更高版本（PC 和 Macintosh）。
- Apple Safari 2 及更高版本。
- Opera 9 及更高版本（PC 和 Mac）。
开发人员应该会喜欢 Ext JS 经过深思熟虑的设计和实现。它的面向对象设计模式反映了对象之间的关系和交互。据设计者说，开发 Ext JS 时使用的设计模式在很大程度上受到
Head First Design Patterns 这本书（Eric Freeman 等著，参见
参考资料）的影响。查看 Ext JS 源代码，就会发现创建模式（包括 singleton 设计模式）、结构模式（包括 flyweight 设计模式）和行为模式（包括 observer 模式）。
  |
|
Ext JS 提供大量用户界面元素，这是开发富因特网应用程序（RIA）所必需的。Ext JS 包含消息框、组合框、数据网格和工具栏等控件。另外，还可以通过布局管理器指定元素在页面上的显示方式。还有用于操作表单和窗口的其他特性。
如果使用其他框架，JavaScript 文件的包含次序是可以修改的。但是，Ext JS 通常按照
清单 1 那样包含在 Web 应用程序中（假设 Ext JS 安装在 Web 服务器上的 lib/ext 目录中）：
清单 1. 包含 Ext JS 框架
<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 框架的主体是大量用户界面元素。这些元素包括表单、对话框、选项卡、树和网格。
图 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 模态对话框和选项卡
清单 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 p_w_picpaths and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);
|
图 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 服务器。
清单 6. Ext JS 的 Ajax 实现
<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 站点和
交互式示例 开始！
转载于:https://blog.51cto.com/77857/177652
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
