ExtJs

 

ExtJs自学教程(1)：一切从API开始

分类： Extjs2009-02-27 11:38 138118人阅读 评论(53) 收藏 举报

extjs javascript api object html button

题 记

  该系列文章不侧重全方位的去介绍ExtJs的使用，只是侧重于解决ExtJs问题的思考方法。写的人不用长篇大论，学的人则可以自立更生。l
  学习的人只要有一些CSS的javascript的基础知识而且对于英文不至于很是蹩脚（以辅助词霸能看懂ExtJs的API为准），均可以参考本教程进行修行。

《一》 一切从API开始

  不少学ExtJs的朋友在初学ExtJs的时候以为ExtJs的很简单效果很好，几行代码就把效果搞定了。可是用得多了，抱怨就开始了：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，端口在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元素有很大的区别，千万别弄混了。

 

 

http://www.tiemadang.com