ExtJs自学教程(一)

(一)从API开始

下载ExtJs 2.0.2(ExtJs的最后一个免费版本)的开发包，解压缩之后. 就可以进一步学习了 ExtJs API的查看需要HTTP环境，这里推荐LiteServe。绿色软件个头小，功能也足。当然你也可以用apache或IIS，然后把WEB根目录指向ExtJs的解压目录，例如：d:/ext-2.0.2，端口在80运行。然后在服务器敲入地址：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: '测试按钮'
}]
});

你也可以写成
new Ext.Panel({
renderTo: 'panelDiv',
items:[{
    xtype: 'panel',
    html: '内容1'
},{
    xtype: 'panel',
    html: '内容2'
}],
buttons:[{
    xtype: 'button',
    text: '测试按钮'
}]
});

或者用new的方式
new Ext.Panel({
renderTo: 'panelDiv',
items:[
    new Ext.Panel({
      html: '内容1'
    }),
    new Ext.Panel({
      html: '内容2'
    })
],
buttons: [new Ext.Button({
    text: '测试按钮'
})]
});
显然，第一种写法比其它两种都要来得简单

接下来是Public Properties，如下：

该部分定义了对象的成员变量。可以直接通过点号来访问的，通常该部分都是只读的属性：

该部分没什么好说的，对照着看说明就是了。唯一一个注意的就是initialConfig属性。说明上是这样的

initialConfig : Object
This Component's initial configuration specification. Read-only.

该属性可以直接访问你的初始化对象，这样可以节约了一些var变量，如果是传入config的对象，例如ToolBar之类。可以直接从initialConfig属性里得到。

再接下来是Public Methods，也就是公开的对象方法。该部分定义了对象的能够被访问的方法：

该部分顺便说说方法的参数。对于javascript，其使用是比较“随意”的，没有对overload的支持，使得在编写时传入参数极其容易弄错。因此就需要注意看参数类型，对于可以使用不同参数类型，之间是用/号间隔开的。例如上图的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了，为啥？很简单，javascript关键字呗。

再接下来一行是该事件的发生条件：Fires after the Panel has been visually activated
这就说明该对象变成可视并活动时，将触发该事件。

看过API文档后，现在是否清楚了Event的使用了呢？如果不清楚那就看代码吧：

new Ext.Panel({
renderTo: 'panelDiv',
title: '标题',
items:[{
    xtype: 'button',
    text: '按钮'
}],
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自学教程(一)相关推荐

ExtJs自学教程(1)：一切从API開始
题记该系列文章不側重全方位的去介绍ExtJs的使用,仅仅是側重于解决ExtJs问题的思考方法.写的人不用长篇大论,学的人则可以自立更生.l 学习的人仅仅要有一些CSS的javascript的基 ...
ExtJs自学教程(2)：从DOM看EXTJS
<二> 从DOM看EXTJS 看标题可能有人会问,为啥好好的例子不看,得从DOM看起呢?答案是目标只为了一个:自运行结果把EXTJS看得更清楚点首先,要看得靠点工具,带点放大镜什么吧?对 ...
python语言自学教程-3D图示Python标准自学教程入门篇
内容简介: Python入门篇教程从最基础的计算机发展史.Python的来源与发展历史开始讲起: 依次讲解python变量与表达式.数据类型.运算符.流程控制语句等,末尾通过课堂练习.课后作业以及微型 ...
有什么好的Java自学教程视频，适合初学者
动力节点Java培训最新上线Java实验班,等你来测试自己适不适合学习Java编程哦! 随着互联网的发展,视频教程充斥着网络,很多人为了能够在视频教程中捞取一桶金,纷纷投入视频售卖的大军之中,其中不乏 ...
计算机考试视频教程江西,江西计算机二级自学教程推荐：公共基础知识（2018年版）...
&nbsp&nbsp[导读]: 江西计算机二级自学教程推荐:公共基础知识(2018年版),更多计算机等级考试用书.考试内容和考试模拟试题,请访问易考吧计算机等级网江西计算机二级自学教 ...
python商城源码_自学Python才几天，就成功编写出俄罗斯方块游戏，附自学教程
人们常说,python不适合做游戏,但我偏爱玩游戏,做不了大的,做个小的也行啊. 于是,我在自己毫无基础的条件下,用两天时间学python基础理论,再用已有的俄罗斯方块游戏源码和源文件,在我的不懈努力 ...
江苏计算机一级怎么自学,江苏计算机一级自学教程推荐：计算机基础及MS Office应用上机指导(2018年版)...
&nbsp&nbsp[导读]: 江苏计算机一级自学教程推荐:计算机基础及MS Office应用上机指导(2018年版),更多计算机等级考试用书.考试内容和考试模拟试题,请访问易考吧计算 ...
安徽省计算机二级考试教程,安徽省计算机二级自学教程推荐：Office高级应用上机指导(2018年版)...
&nbsp&nbsp[导读]: 安徽省计算机二级自学教程推荐:Office高级应用上机指导(2018年版),更多计算机等级考试用书.考试内容和考试模拟试题,请访问易考吧计算机等级网(h ...
python自学教程-3D图示Python标准自学教程入门篇
内容简介: Python入门篇教程从最基础的计算机发展史.Python的来源与发展历史开始讲起: 依次讲解python变量与表达式.数据类型.运算符.流程控制语句等,末尾通过课堂练习.课后作业以及微型 ...

ExtJs自学教程(一)

ExtJs自学教程(一)相关推荐

最新文章

热门文章