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

 

1.什么是ExtJs?
ExtJS能够用来支付OdysseyIA也即富客户端的AJAX应用,是叁个用javascript写的,首要用来创造前端用户界面,是二个与后台技术非亲非故的前端Ajax框架。因而,能够把ExtJS用在.Net、Java、Php等各类费用语言开发的应用中。
ExtJS的前身来自于YUI,经过持续进化与创新,未来已经济体制改善成最完全与成熟的一套营造CRUISERIA
Web应用的JavaScript基础库。利用ExtJS创设的凯雷德IA
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>.没有界面设计工具。
即便有人提供了3个在线的界面设计工具,可是和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内创制1个按钮,能够接纳: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合并到2个文件,那样对重用有十分的大的鼎力相助。
(4).脚本文件管理。
尽量的各种模块做成三个类,1个类四个文书,类似与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简介

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图