ExtJs自学教程(1):从一切API开始
本系列文章是不是引进全套焦点ExtJs使用,您只需专注于解决ExtJs思考问题。人们不写长篇大论。别人能学会自立。l
有些人只要学会CSS的javascript对于英文不至于很蹩脚(以辅助词霸能看懂ExtJs的API为准),都可以參考本教程进行修行。
非常多学ExtJs的朋友在初学ExtJs的时候认为ExtJs的非常easy效果非常好,几行代码就把效果搞定了。可是用得多了。抱怨就開始了:ExtJs的布局怎么这么麻烦啊。那些參数哪里来的呀?我想弄个效果怎么就弄不出来啦,然后风风火火的在论坛发一大堆帖子。发现没几个人睬,就得出结论了:ExtJs不好用。可是可以非常顺利的用ExtJs解决这个问题的人却大有人在,所以,不要抱怨酸葡萄了,想提高。还是得安安心心坐下来看帖子:)
在学习前。首先得明确一个道理:所谓开发高手,解决这个问题自然比一般的常人要快。除了经验以外,当中能力最大的一方面,就是查找资料比一般常人要迅速。好比一本武林秘籍。落到常人手里一般是没多大用处的。得“高人”点拨,先学点“内功心法”。
对于ExtJs来说,“武林秘籍“就是ExtJs的API文档。所以,学习ExtJs,首先得学会如何去看API。
因此。第一步,就是学习如何看ExtJs的API文档
下载ExtJs 2.0.2(ExtJs的最后一个免费版本号)的开发包,解压缩后,可以看到有下面几个文件夹:
adapter Extjs和其他JS开发包之间兼容使用的适配器,jquery,prototype和yui,还一个是ExtJs自己的
air 和adobe air整合用的
build jsBuild出来的文件夹
docs 武林秘籍就这本了
examples 养眼的一些ExtJs官方样例,可供依葫芦画些瓢
source JSBuild用的源,里面有个jsb项目文件,能够build出自己的Ext-all.js
resources ExtJs执行须要的资源文件,包含图标和CSS这些
假设你下载的ExtJs有这些非空文件夹,恭喜你。至少有80%可能证明你下载的这个ExtJs不是山寨版或阉割版。
能够进一步学习了 ExtJs API的查看须要HTTP环境,这里推荐LiteServe。绿色软件个头小,功能也足。当然你也能够用apache或IIS。然后把WEB根文件夹指向ExtJs的解压文件夹,比如:d:/ext-2.0.2。port在80执行。然后在server敲入地址:http://localhost/docs/,loading完成后你就能够看到ExtJs API的界面例如以下
左边的树点击后,右边的标签页能加入该类的标签,并在页内显示该类的信息。以panel为比例如以下:
如图你能够看到ExtJs的包。原始定义文件(build的src里相应的那个文件) 。相关类,继承的子类,父类以及一颗直观的继承树。
然后接下来的区域“panel is..”是该类的说明,该区域非常重要,通常类的该区域可能给了该类的使用演示样例以及须要注意的地方。
接下来是配置,属性,方法和事件4部分。从上面图片能够看到,具体信息顶部给了到这4部分的链接:"Properties" "Methods" "Events" "Config Options"。
滚动鼠标便能够依次浏览该4部分:
首先出场的是Config Options,这些參数是创建类时构造方法的參数。例如以下:
你能够看到内容分3列:
第一列是一个小三角箭头。能够折叠和展开该參数说明。
第二列是參数说明,假设说明区域还有内容未显示完,内容末尾会显示成“...”。
如上图animCollapse 的部分,点第一列的箭头能够展开。activeItem參数那行就是展开后的效果。
展开后显示该參数的说明。注意Config Options里有非常多參数都是有default属性的。也就是说。在new的时候的參数Objects不传入该參数。该參数默认就是使用default的值,这样能够大大降低了使用时构造參数的数量。比如new一个panel,除了指定渲染的对象外,能够仅配置html的属性。比如:new Ext.Panel({renderTo:'panelDiv',html:'内容'});
有一点特别要注意,就是传入config对象时,千万不要多了或漏了逗号。IE的对象定义格式要求非常严格。对象最后一个成员不能以逗号结尾。否则JS加载时就出错了。比如:new Ext.Panel({renderTo:'panelDiv',html:'内容',}); 在FireFox3下能够通过,可是在IE6下会导致一个无法编译的错误。
第三列是定义类。因为javascript也是OO的语法,因此子类也继承了父类的属性和方法。前面带有一个向上箭头的是继承的属性或方法,通常假设看某个类的特有功能(比如Panel类的折叠collapse相关的方法),就须要找Difined By为当前类的说明行,这样就非常方便。
对于Config Options的使用,另一个比較方便的地方,就是当指定Config Options的xtype后,在ExtJs生成容器的子对象时。能够不用去new一个对象,而仅仅须要传入配置对象,在对象里指定xtype就可以。
有些容器的items有默认xtype,比如Ext.Panel的items传入配置对象默认的xtype就是'panel',Ext.Panel的buttons传入的配置对象默认的xtype就是button。
比如,下面3种写法是等效的:
new Ext.Panel({
renderTo: 'panelDiv',
items:[{
html: '内容1'
},{
html: '内容2'
}],
buttons:[{
text: '測试button'
}]
}); 你也能够写成
new Ext.Panel({
renderTo: 'panelDiv',
items:[{
xtype: 'panel',
html: '内容1'
},{
xtype: 'panel',
html: '内容2'
}],
buttons:[{
xtype: 'button',
text: '測试button'
}]
}); 或者用new的方式
new Ext.Panel({
renderTo: 'panelDiv',
items:[
new Ext.Panel({
html: '内容1'
}),
new Ext.Panel({
html: '内容2'
})
],
buttons: [new Ext.Button({
text: '測试button'
})]
});
显然,第一种写法比其他两种都要来得简单
接下来是Public Properties,该部分定义了对象的成员变量。能够直接通过点号来訪问的,通常该部分都是仅仅读的属性。例如以下:
该部分没什么好说的,对比着看说明就是了。唯一一个注意的就是initialConfig属性。说明上是这种
initialConfig : Object
This Component's initial configuration specification. Read-only.
该属性能够直接訪问你的初始化对象,这样能够节约了一些var变量,假设是传入config的对象,比如ToolBar之类。能够直接从initialConfig属性里得到。
再接下来是Public Methods,也就是公开的对象方法。
该部分定义了对象的能够被訪问的方法。
该部分顺便说说方法的參数。对于javascript。其使用是比較“任意”的,没有对overload的支持,使得在编写时传入參数极其easy弄错。因此就须要注意看參数类型,对于能够使用不同參数类型。之间是用/号间隔开的。
比如上图的add方法。展开后能够看到各參数的具体用法,比如展开后里面有这样来说明Object參数:
A Component config object may be passed in order to avoid the overhead of constructing a real Component object
那么就是说。能够直接把一个config对象传进去而不是一个Ext.Component对象。这样你就能够理解了。採用相似add({xtype:'button',text:'按钮'})这种写法也是能够的了。
所以说,ExtJs的API是说明最全的ExtJs教程。比不论什么教程练习什么的都要强。
当然。也有更深层次学习的部分。那就是得看ExtJs源代码。看ExtJs源代码能够实现一些比API更强的功能。比如,把formLayout里的Ext.form.Radio进行横排。
这就得看源代码。
再接下来的部分也非常重要。假设要添加ExtJs对象的行为,除了扩展对象以外。
最常见的就是加入侦听了。
你经常会看到网上一些人编写Listener。而不知道那些參数是如何使用的,这里就是你最值得学习的地方了。也就是接下来的:
Public Events
比如,第一行active:(Ext.Panel p)。那么就是说。在这个对象的listeners里。你能够监听active这种方法。这种方法有一个參数p,传入的对象是Ext.Panel,通常,假设传入的參数名称为当前类或其父类时,就是指对象本身。比如第2个Event的命名就非常清楚:Ext.Container this。只是你就不要在使用时,也命名变量叫this了,为啥?非常easy,javascriptkeyword呗。
再接下来一行是该事件的发生条件:Fires after the Panel has been visually activated
这就说明该对象变成可视并活动时,将触发该事件。
看过API文档后,如今是否清楚了Event的使用了呢?假设不清楚那就看代码吧:
new Ext.Panel({
renderTo: 'panelDiv',
title: '标题',
items:[{
xtype: 'button',
text: 'button'
}],
listeners:{
afterlayout: function(panel, layout){
alert(panel.getXType());
}
}
});
因为active是非直接调用的事件,因此改用afterlayout事件做演示样例,你能够尝试在afterlayout后的方法里用panel訪问你new出来的这个对象的方法。你会发现ExtJs给的自由发挥的空间事实上是很强大!
ExtJs的事件监听,除了直接在对象创建时指定listeners外,还能够在对象创建后用on方法来实现动态的加入。API如是说:
on( String eventName, Function handler, [Object scope], [Object options] )
不想监听了,还能够用un移除掉:
un( String eventName, Function handler, [Object scope] )
另一点,也是很值得注意的。就是尽管ExtJs的Component对象尽管都带有dom元素,也有dom元素支持的那些方法比如click,resize。可是ExtJs的事件是扩展的。
也就是。可能加入了ExtJs自己支持的一些特殊方法。并且行为,也可能与直接dom来电有一定的差异。例如resize方法:
resize : ( Ext.Component this, Number adjWidth, Number adjHeight, Number rawWidth, Number rawHeight )
第一元件是一个ExtJs对象,清晰html的dom元素非常不同,不要混淆。
ExtJs自学教程(1):从一切API开始的更多相关文章
- ExtJs自学教程(1):一切从API開始
题 记 该系列文章不側重全方位的去介绍ExtJs的使用,仅仅是側重于解决ExtJs问题的思考方法.写的人不用长篇大论,学的人则可以自立更生.l 学习的人仅仅要有一些CSS的javascript的基础 ...
- ExtJs自学教程(1):一切从API开始
题 记 该系列文章不侧重全方位的去介绍ExtJs的使用,只是侧重于解决ExtJs问题的思考方法.写的人不用长篇大论,学的人则能够自立更生.l 学习的人只要有一些CSS的javascript的基础知识 ...
- ExtJs自学教程(2):从DOM看EXTJS
<二> 从DOM看EXTJS 看标题可能有人会问,为啥好好的例子不看,得从DOM看起呢?答案是目标只为了一个:自运行结果把EXTJS看得更清楚点 首先,要看得靠点工具,带点放大镜什么吧?对 ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 随笔分类 - 无废话ExtJs系列教程
随笔分类 - 无废话ExtJs系列教程 摘自:http://www.cnblogs.com/iamlilinfeng/category/385121.html ExtJs 入门教程 摘要: extjs ...
- Django自学教程PDF高清电子书百度云网盘免费领取
点击获取提取码:x3di 你一定可以学会,Django 很简单! <Django自学教程>的作者学习了全部的 Django英文的官方文档,觉得国内比较好的Django学习资源不多,所以决定 ...
- 无废话ExtJs 入门教程二十一[继承:Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互:AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程十七[列表:GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
随机推荐
- Qt调用Delphi编写的COM组件
这个问题捣鼓了两天,现在终于解决了,做个笔记分享给大家,以免走弯路 起初,我的想法是在DLL中写一个interface并从函数中导出这个interface,像这样的代码 ICom1 = interfa ...
- oracle系统包——dbms_random用法及order by 小结(转)
dbms_random是一个可以生成随机数值或者字符串的程序包. 这个包有initialize().seed().terminate().value().normal().random().strin ...
- hdu 5183(hash)
传送门:Negative and Positive (NP) 题意:给定一个数组(a0,a1,a2,⋯an−1)和一个整数K, 请来判断一下是否存在二元组(i,j)(0≤i≤j<n)使得 NP− ...
- Cocos2dx-Android 之Makefile通用高级写法
不废话,直接贴.节约时间.须要改进的地方请各位指出.共同学习. LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LOCAL_MODULE := c ...
- ADO异步查询显示进度条
一般,ADO都是以同步的方式来处理数据.这就是说,当ADO开始处理数据后,应用程序必须等到ADO处理完毕之后才可以继续执行.但是除了同步执行方式之外,ADO也提供了异步执行的方式,允许当ADO处理时, ...
- easy_install MySQL-python
python - Why can't easy_install find MySQLdb? - Stack Overflow easy_install MySQL-python
- java垃圾回收那点事(二)不同gc策略的heap分配
在前面的文章中曾提到了在java虚拟机启动的时候会对G1,CMS, SerialGC定义不同的heap的类,并且定义不同的policy. CollectorPolicy CollectorPolicy ...
- (step5.1.2)hdu 1305(Immediate Decodability——字典树)
题目大意:输入一系列的字符串,判断这些字符串中是否存在其中的一个字符串是另外一个字符串的前缀.. 如果是,输出Set .. is not immediately decodable 否则输出Set . ...
- 18.如何自我Struts2它Struts2标签和综合汇总文章有点早
18.如何自我Struts2它Struts2标签和综合汇总文章有点早[视频] 之前写了一篇"打算做一个视频教程探讨怎样自学计算机相关的技术",优酷上传不了.仅仅好传到百度云上: h ...
- 齐博软件(地方门户系统) 文件加密破解工具
原文:齐博软件(地方门户系统) 文件加密破解工具 本程序为针对"齐博软件地方门户系统5.0官方原版"的破解工具,一个垃圾系统居然弄出这么恶心的加密方式,有个鸟用!以后见一个破一个! ...