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组件系列图
图片 1

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

图片 2 View Code

<2>.以下是颇具的布局字符串和类的附和关系,所有的布局类均继续自
Ext.layout.ContainerLayout类 

图片 3

图片 4

字符串            类                           中文名称
-------------    ------------------           ------------------
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               垂直

图片 5

图片 6

<3>.以下是具有的’xtype’和类的照应关系 

图片 7

图片 8

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

图片 9

图片 10参考博客:
ExtJS
ExtJS
开发总计

Ext JS(1)Ext
JS简介

相关文章