ExtJs特点、优缺点及注意事项

摘自:ExtJs特点、优缺点及注意事项

1.什么是ExtJs?
ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端Ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJS的前身来自于YUI,经过不断发展与改进,现在已经成为最完整与成熟的一套构建RIA Web应用的JavaScript基础库。利用ExtJS构建的RIA Web应用具有与桌面程序一样的标准用户界面与操作方式,并且能够横跨不同的浏览器平台。ExtJS已经成为开发具有完满用户体验的Web应用完美选择。
ExtJs最开始基于YUI技术,其UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者,并为开发者屏蔽了大量跨浏览器方面的处理。相对来说,EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

2.ExtJs的特点
(1).纯Html/CSS+JS技术,重新定义表示层的耦合;
(2).基于纯Html/CSS+JS技术,提供丰富的跨浏览器UI组件,灵活采用JSON/XML数据源开发,使得服务端表示层的负荷真正减轻,从而达到客户端的MVC应用;
(3).集成多种JS底层库, 满足开发者不同需求;
(4).Ext初期仅是对YUI的对话框扩展,后来逐渐有了自己的特色,深受网友的喜爱。发展至今,Ext除YUI外还支持Jquery Prototype等的JS库,让大家自由地选择;
(5).多浏览器支持、支持多平台下的主流浏览器。

3.ExtJs的优缺点
(1).ExtJs的优点
<1>.UI组件丰富,外观漂亮。
Ext JS库有着丰富且漂亮的UI组件,大大缩短了我们的开发周期,而且组件拥有漂亮的布局,经过简单的调用与配置就可以实现不错的界面布局。ExtJS提供的各种组件可以用更加标准的方式展示数据降低了开发难度。
<2>.浏览器兼容性好。
使用ExtJS对浏览器没有任何要求。可以说是一种绿色的富客户端实现方式,ExtJs基本可以运行于现在主流的浏览器。
<3>.有很多动画效果做得很不错,提高了用户的感知度。
<4>.和后台代码无关。
不管后台用什么语言开发的都不会受影响,不管你是用C#也好 JAVA也好 还是PHP都和它没关系。
<5>.将Web程序向桌面系统转化。
ExtJS最大的优势在于它将Web应用程序的操作方式向传统桌面应用程序的操作方式进行转化甚至消除了这种差异,从根本上提高了用户的使用体验,这是ExtJS应用前景广阔的主要原因。
<6>.相对丰富的文档和示例。
毫无疑问,刚刚接触到ExtJS的人多数都是被它附带的例子和开发文档吸引过去的,它的文档做的确实不错。

(2).ExtJs的缺点
<1>.体积较大,速度稍慢。
由于使用了大量的UI组件,所以体积较大,导致页面加载速度比较慢。 
<2>.收费,好像不免费。
因为它太优秀了,所以从Ext JS 2.0以后的版本都是收费的。也许这一点不能算是它的缺点,但这确实阻碍了它的推广与应用。
<3>.没有合适的开发利器。
毫无疑问,一个好的开发工具可以大大的提高编码的速度,但是对于ExtJS,始终没有一个完美的开发工具,可以推荐的有Aptana Studio, Spket IDE,和Spket 提供的提示文件,但是都是各有优缺点,都不完美,只能一边看SDK一边写代码。
<4>.没有界面设计工具。
虽然有人提供了一个在线的界面设计工具,但是和Visual Studio提供的ASP.Net设计工具来说,真的可以说是天壤之别。因此,只能一边预览,一边写代码。
<5>.文档不全。
虽然ExtJS提供的文档很丰富,但是还是跟不上源代码的更新速度,所以,经常要通过看源代码,调试才能真正解决问题。
<6>.不能编译。
这一点可以说是JavaScript的缺点(如果能编译,就不叫JavaScript了),在实际的开发中,经常会敲错一些代码,比如大小写错误等,不能通过编译得到反馈,只能在运行时排错,导致开发的效率比较低下。

4.ExtJs注意事项
(1).尽量使用ExtJS的方言。
ExtJS提供了很多有用的方法,解决客户端JavaScript常见的开发任务,常见的有查询HTMLDom,创建HTML元素,为HTML元素注册事件响应函数等,这些大可以全部使用ExtJS提供的方法,使自己代码构建与ExtJS之上,举几个例子:
查询ID为container的DIV下所有的checkbox,可以使用:Ext.fly(‘container’).select(‘input[type=checkbox]’);
在ID为container的DIV内创建一个按钮,可以使用:Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
为ID为container的DIV的click事件注册处理函数,使用:Ext.fly(‘container’).on(‘click’, handlerFn, scope);
(2).自定义事件比较好。
ExtJS的自定义事件很好用,可以实现一对多的通知,而且任何自定义事件都可以中途停止,只要有一个处理函数返回false。
(3).Store合并为一个文件。
用ExtJS显示数据,自然就需要用到Ext.data.Store及其派生出来的类,可以考虑所有的Store合并到一个文件,这样对重用有很大的帮助。
(4).脚本文件管理。
尽可能的每个模块做成一个类,一个类一个文件,类似与Java或C# 的文件处理方法,每个文件注明其作用,依赖的文件等,如果太多的话可以考虑写一个配置文件,通过读配置文件来输出脚本到客户端。
(5).调试和部署注意。
调试和部署分别加载Debug和Release版本的脚本 ExtJS附带的例子中没有使用完整Debug版本的例子,所以很多人找不到完整的Debug版本的引用顺序,通过对Source文件夹下的ext.jsb文件进行分析,就可以得到正确的加载顺序,如下:
Debug
/ext-path/source/core/ext.js
/ext-path/source/adapter/ext-base.js
/ext-path/ext-all-debug.js
Release
/ext-path/adapter/ext/ext-base.js
/ext-path/ext-all.js
(6).对Script进行压缩。
对项目中有大量的JavaScript的话,对其进行压缩是很有必要的,这里我推荐的是ExtJS的论坛提供的JS Builder,可以通过配置文件来对Script和CSS进行压缩,据说ExtJS就是用这个工具进行压缩的,不过有一个缺点,就是不支持UTF-8编码。

5.ExtJS组件体系图

6.Ext JS API接口文档
<1>.以下是所有工具栏可用按钮名称字符串

 

<2>.以下是所有的布局字符串和类的对应关系,所有的布局类均继承自 Ext.layout.ContainerLayout类

字符串            类                           中文名称
-------------    ------------------           ------------------
absolute         Ext.layout.absolute           绝对定位
accordion        Ext.layout.Accordion          手风琴式
anchor           Ext.layout.AnchorLayout       锚定
(新)auto         Ext.layout.auto               自动
border           Ext.layout.BorderLayout       边界式
card             Ext.layout.CardLayout         卡片式
column           Ext.layout.ColumnLayout       列式
fit              Ext.layout.FitLayout          自适应
form             Ext.layout.FormLayout         表单式
(新)hbox         Ext.layout.hbox               水平
(新)menu         Ext.layout.menu               菜单式
table            Ext.layout.TableLayout        表格式
(新)toolbar      Ext.layout.toolbar            工具条式
(新)vbox         Ext.layout.vbox               垂直

<3>.以下是所有的‘xtype‘和类的对应关系

xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
buttongroup      Ext.ButtonGroup
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
flash            Ext.FlashComponent
grid             Ext.grid.GridPanel
listview         Ext.ListView
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
spacer           Ext.Spacer
splitbutton      Ext.SplitButton
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.ViewPort
window           Ext.Window

Toolbar components
---------------------------------------
paging           Ext.PagingToolbar
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button        (过时的;使用 button)
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton   (过时的;使用 splitbutton)
tbtext           Ext.Toolbar.TextItem

Menu components
---------------------------------------
menu             Ext.menu.Menu
colormenu        Ext.menu.ColorMenu
datemenu         Ext.menu.DateMenu
menubaseitem     Ext.menu.BaseItem
menucheckitem    Ext.menu.CheckItem
menuitem         Ext.menu.Item
menuseparator    Ext.menu.Separator
menutextitem     Ext.menu.TextItem

Form components
---------------------------------------
form             Ext.form.FormPanel
checkbox         Ext.form.Checkbox
checkboxgroup    Ext.form.CheckboxGroup
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
displayfield     Ext.form.DisplayField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
radiogroup       Ext.form.RadioGroup
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField

Chart components
---------------------------------------
chart            Ext.chart.Chart
barchart         Ext.chart.BarChart
cartesianchart   Ext.chart.CartesianChart
columnchart      Ext.chart.ColumnChart
linechart        Ext.chart.LineChart
piechart         Ext.chart.PieChart

Store xtypes
---------------------------------------
arraystore       Ext.data.ArrayStore
directstore      Ext.data.DirectStore
groupingstore    Ext.data.GroupingStore
jsonstore        Ext.data.JsonStore
simplestore      Ext.data.SimpleStore      (过时的;使用 arraystore)
store            Ext.data.Store
xmlstore         Ext.data.XmlStore

参考博客:
ExtJS
ExtJS 开发总结
Ext JS(1)Ext JS简介

时间: 2024-10-05 05:07:33

ExtJs特点、优缺点及注意事项的相关文章

10-03视图的优缺点及注意事项

使用视图的优点: 视图着重于特点数据. 简化数据的操作,易维护. 使用视图的缺点: 操作视图会比直接操作基础表要慢. 修改限制. 使用视图的注意的事项: 视图定义下的SELECT语句不能包括一下内容: ORDER BY 语句,除非SELECT选择列表中也有一个TOP子句. INTO关键字. 引用临时表或表变量.

Redis 数据类型分析 字符串 哈希 列表 集合 有序集合 优缺点 分析 注意事项 存储结构

一.提高Redis使用性能秘诀 KEY尽量少的原则,能放在1个KEY的就放入1个KEY,KEY开销很大尽量减少与Redis发生的交互次数,能批量的就批量,能事务.管道的就事务.管道从业务架构分析确定使用哪种数据类型,从全局出发,如果类型选错了再改变就很不容易使用每一个Redis命令注意是O(1),还是O(N),切记滥用,认准每个命令的特性再使用也不迟使用PHP Redis的C语言扩展,性能远远高于PHP脚本编写的文件时刻清醒你往Redis里存储了什么,频繁交互.相对静态的小数据存储至Redis是

使用svn控制系统的优缺点和注意事项

1.当无法连接到中央版本库的环境下,你无法提交代码,将代码加入版本控制.公司一般是局域网,所以使用环境问题不大. 2.svn的备份要备份所有代码数据以及所有更改的版本记录. 3.svn服务端运行方式:(1)独立服务器访问.访问地址如:svn://svn.etiantian.org/sadoc; (2)借助apache等http服务:a.单独安装apache+svn.     b.CSVN(apache+svn)是一个单独的整合的软件,带web界面管理的svn软件. (3)本地直接访问 4.svn

Java 判断字符串是否为空的四种方法、优缺点与注意事项

以下是Java 判断字符串是否为空的四种方法: 方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: if(s == null ||"".equals(s));方法二: 比较字符串长度, 效率高, 是我知道的最好一个方法: if(s == null || s.length() <= 0);方法三: JavaSE 6.0 才开始提供的方法, 效率和方法二几乎相等, 但出于兼容性考虑, 推荐使用方法二. if(s == null || s.isEmpty()); 方法四:

有效的移动应用推广策略

如何制定推广策略是App运营推广人员最头疼的事情,网上有很多推广策略,却不知道到底哪些是有效的推广策略.下面,就随ASOtop1一起来看看有哪些移动应用推广策略,比价一下各自的优缺点和注意事项,在选择的时候做到心中有数! 应用商店推广 做法:在国内有很多应用商店,利用这些应用商店的资源来推广我们的产品: 优点:用户集中.质量高.数量大: 缺点:展示机会少,竞争激烈: 注意: 1.主要适合国内市场推广,包括AppStore.360.豌豆荚.小米商店--各类型的应用商店: 2.免费合作最主要的方式是

application详解

Application对象是HttpApplicationState类的一个实例,Application状态是整个应用程序全局的.本文主要详细介绍Application对象的用法. 一.全局应用程序类 从Application这个单词上大致可以看出Application状态是整个应用程序全局的.在ASP时代我们通常会在Application中存储一些公共数据,而ASP.NET中Application的基本意义没有变:在服务器内存中存储数量较少又独立于用户请求的数据.由于它的访问速度非常快而且只要

Application对象、ViewState对象、分页展示--2017年1月4日

Application对象 存储 Application 变量  Application["application名称"] = "application的值"; 取回 Application 变量 string str = Application["application名称"]; 常用的属性和方法 All 返回全部的Application对象变量到一个对象数组   AllKeys 返回全部的Application对象变量到一个字符串数组   C

【转】网络编程常见问题总结

网络编程常见问题总结 这里对在网络程序中遇到的一些问题进行了总结, 这里主要针对的是我们常用的TCP socket相关的总结, 可能会存在错误, 有任何问题欢迎大家提出. 对于网络编程的更多详细说明建议参考下面的书籍 <UNIX网络编程> <TCP/IP 详解> <Unix环境高级编程> < div> 网络编程常见问题总结 相关说明 非阻塞IO和阻塞IO 基本概念 设置 区别: 读: 写: 超时控制: 长连接和短连接的各种可能的问题及相应的处理 短连接: 长

为什么建立了索引可以提高效率

谈到sql优化,大家会异口同声的说建立索引,那么为什么建立了索引可以够提高效率?体现在哪?所有的查询都可以吗?什么样的查询才会提高效率?又有哪些注意事项呢?等等这一系列问题,下面让我们来一探究竟: 一.为什么建立了索引可以够提高效率?体现在哪? 先让我们看下 (一)SQLS如何访问没有建立索引的数据表 Heap译成汉语叫做“堆”,其本义暗含杂乱无章.无序的意思,前面提到数据值被写进数据页时,由于每一行记录之间并没有特定的排列顺序,所以行与行的顺序就是随机无序的,当然表中的数据页也就是无序的了,而