2018正版葡京赌侠诗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组件体系图
2018正版葡京赌侠诗 1

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

2018正版葡京赌侠诗 2 View Code

<2>.以下是兼备的布局字符串和好像的照应关系,所有的布局类都延续自
Ext.layout.ContainerLayout类 

2018正版葡京赌侠诗 3

2018正版葡京赌侠诗 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               垂直

2018正版葡京赌侠诗 5

2018正版葡京赌侠诗 6

<3>.以下是所有的’xtype’和接近的对应关系 

2018正版葡京赌侠诗 7

2018正版葡京赌侠诗 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

2018正版葡京赌侠诗 9

2018正版葡京赌侠诗 10参考博客:
《ExtJS》
《ExtJS
开发总结》
《Ext JS(1)Ext
JS简介》

发表评论

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