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特点、优缺点及注意事项的更多相关文章
- Redis 数据类型分析 字符串 哈希 列表 集合 有序集合 优缺点 分析 注意事项 存储结构
一.提高Redis使用性能秘诀 KEY尽量少的原则,能放在1个KEY的就放入1个KEY,KEY开销很大尽量减少与Redis发生的交互次数,能批量的就批量,能事务.管道的就事务.管道从业务架构分析确定使 ...
- Spring中声明式事务存在的优缺点以及注意事项!
事务管理在系统开发中是不可缺少的一部分,Spring提供了很好事务管理机制,主要分为编程式事务和声明式事务两种. 关于事务的基础知识,如什么是事务,数据库事务以及Spring事务的ACID.隔离级别. ...
- 使用svn控制系统的优缺点和注意事项
1.当无法连接到中央版本库的环境下,你无法提交代码,将代码加入版本控制.公司一般是局域网,所以使用环境问题不大. 2.svn的备份要备份所有代码数据以及所有更改的版本记录. 3.svn服务端运行方式: ...
- Java 判断字符串是否为空的四种方法、优缺点与注意事项
以下是Java 判断字符串是否为空的四种方法: 方法一: 最多人使用的一个方法, 直观, 方便, 但效率很低: if(s == null ||"".equals(s));方法二: ...
- ExtJS 开发总结
1. ExtJS的定位是RIA,和Prototype.jQuery等类库的定位不同.使用ExtJS做开发,就是意味着以客户端开发为主,不然就不叫RIA框架了,而Prototype.jQuery等只是辅 ...
- .NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- 转载:.NET Web开发技术简单整理
在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何使用该技术,如何更好的使用该技术解决问题,而没有去关注它的相关性.关注它的理论支持,这种学习技术的方式是短平快.其实工作中有时候也是这样,公 ...
- J1002.JavaFX简介
引言 2008年12月05日,SUN发布了JavaFX第一个正式版本,以期望Java在UI端能够更好地应用于开发富客户端的互联网应用(Rich Internet Cliet). 2011年发布的Jav ...
- Java程序员秋招面经大合集(BAT美团网易小米华为中兴等)
Cvte提前批 阿里内推 便利蜂内推 小米内推 金山wps内推 多益网络 拼多多学霸批 搜狗校招 涂鸦移动 中国电信it研发中心 中兴 华为 苏宁内推 美团内推 百度 腾讯 招商银行信用卡 招银网络科 ...
随机推荐
- Xshell中文乱码问题
1. 先查看当前使用的语言: echo $LANG 2. 查看系统的语言安装包: locale 3. 如果没有中文安装包(包含zh_CN字样),需要网络或者自己上传安装包,安装 4. 有了中文 ...
- 用CAKeyframeAnimation构建动画路径
复杂路径的动画,我们可以借助关键关键帧动画(CAKeyframeAnimation)来实现,给其的path属性设置相应的路径信息即可. 以下为一个红色的小球按照指定的路径运动的动画. 此动画关键在于如 ...
- 高吞吐量的分布式发布订阅消息系统Kafka--安装及测试
一.Kafka概述 Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者规模的网站中的所有动作流数据. 这种动作(网页浏览,搜索和其他用户的行动)是在现代网络上的许多社会功能的一个关键因 ...
- 安装vim中文帮助vimcdoc
1. 下载: 下载页面:http://vimcdoc.sourceforge.net/ 选择“Latest platform independent tarball, including an Lin ...
- Spark源码系列(七)Spark on yarn具体实现
本来不打算写的了,但是真的是闲来无事,整天看美剧也没啥意思.这一章打算讲一下Spark on yarn的实现,1.0.0里面已经是一个stable的版本了,可是1.0.1也出来了,离1.0.0发布才一 ...
- WPF自定义控件
一.ImageButton 1.继承ImageButtonButton,添加依赖属性 using System; using System.Windows; using System.Windows. ...
- Foundation框架基本数据类型
NSNubmer NSNumber是一个类,该类中存在多种处理数值的方法,可直接创建该类的实例变量 // 定义3个NSNumber类型的变量 NSNumber *myNumber, *floatNum ...
- RTImageAssets 自动生成 AppIcon 和 @2x @1x 比例图片
下载地址:https://github.com/rickytan/RTImageAssets 此插件用来生成 @3x 的图片资源对应的 @2x 和 @1x 版本,只要拖拽高清图到 @3x 的位置上,然 ...
- C#的回调被C++调用
__stdcall 要加这个 extern "C" __declspec(dllexport) 要用这样的东东 定义 extern "C" __declspec ...
- ES6转ES5:Gulp+Babel
目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使 ...