ExtJs想入门的请进-解读API

如果你对EXT有兴趣但不知道如何下手，如果你有了API但不知道如何看如何用，如果你够认真的话，那么就看下面的内容，我保证你看了就会用API了，但是你必须看完，另，如果你没有API的话，我提供一个2.0的API给你，在附件里下载。
================================开始===================================
有人这样提问：
我怎么判断当前节点是否选中呀
function onItemClick(checked){
var myItems =[];
var checkedNodes =tree.getChecked();

for(var i=0;i<checkedNodes.length;i++){
alert(checkedNodes[i].checked());
myItems.push(checkedNodes[i].id);
}
alert(myItems.join(','));
};
alert(checkedNodes[i].checked()); 这个不对呀

那么我就知道他不会用API，在瞎蒙。
很多人，特别是初学者，都这样在看了别人代码后，只是按自己想的去加点或修改点什么，结果呢，调试的时间付出了沉痛的代价，结果还是不知其所以然，面对这种现象，我很感慨，大家急切的心理我很理解，只是万事开头难，但是再难你也要把开头给做好。
API是学习EXT的最好手册，所以我这里就贴出原谈话（去掉了些许），大家看完了就知道之所以然了。

逆天 09:19:02
鸭梨姐姐呀 我怎么判断当前节点是否选中呀
function onItemClick(checked){
var myItems =[];
var checkedNodes =tree.getChecked();

for(var i=0;i<checkedNodes.length;i++){
alert(checkedNodes[i].checked());
myItems.push(checkedNodes[i].id);
}
alert(myItems.join(','));
};
逆天 09:19:10
alert(checkedNodes[i].checked()); 这个不对呀
丫梨^_^ 09:22:58
偶滴神那

丫梨^_^ 09:23:06
你会不会看api呀

逆天 09:23:21
嘿嘿 偶这里没有API呀 姐姐
丫梨^_^ 09:23:23
checked是node的属性，而不是方法

丫梨^_^ 09:23:45
哎，extjs的api下载个被

丫梨^_^ 09:24:03
最好的方法是运行你当前在用的版本的ext工程

逆天 09:24:27
恩 我试验过了呀 我选中节点后我弹出 alert(checkedNodes[i].checked); 报为null呀 姐姐
丫梨^_^ 09:24:32
要不然下载的api根你实际在用的版本不同

逆天 09:24:39
恩
丫梨^_^ 09:25:45
没有API你现在这样写代码是在瞎蒙

逆天 09:25:53
恩
丫梨^_^ 09:26:09
对了。关于树方面的你下载了我的源码了没

丫梨^_^ 09:26:17
你运行那个错了？

逆天 09:26:29

逆天 09:26:51
我是用扩展的树呀
丫梨^_^ 09:27:09
哎，这叫啥扩展啊

逆天 09:27:18
不知道呀
逆天 09:27:28
偶新手咩 鸭梨姐姐
逆天 09:27:41
文件“ExtJs_2API.CHM”(2.1MB)发送失败！由于对方QQ的“接收文件安全级”限制，您的文件传送请求被拒绝。
丫梨^_^ 09:27:46
偶也是新手啊

丫梨^_^ 09:28:02
给你个API好好揣摩去

逆天 09:28:06
在发下鸭梨姐姐
逆天 09:28:07
恩
丫梨^_^ 09:28:11
瞎蒙

丫梨^_^ 09:28:12
哈哈

逆天 09:29:26
鸭梨姐姐有中文的API米
丫梨^_^ 09:29:35
没的

逆天 09:29:37
文件“ExtJs_2API.rar”(2.1MB)已经发送完毕。
丫梨^_^ 09:29:42
中文不中文的不都一样吗

丫梨^_^ 09:30:03
你看看那些属性的名字和方法的名字不就能大概知道了

丫梨^_^ 09:31:08
api会看么

丫梨^_^ 09:31:30
你必须要会看

逆天 09:31:40
不会看 鸭梨姐姐
逆天 09:31:54

丫梨^_^ 09:32:09
Config Options
Public Properties
Public Methods
Public Events
基本上都由以上4部分组成

丫梨^_^ 09:33:05
Config Options下的内容为你在实例化一个对象时进行配置的，也就是比如new Panel({a:"xxx",b:"yyy"})，这里的a和b就是来自于Config Options


丫梨^_^ 09:33:22
Config Options
Public Properties
Public Methods
Public Events
基本上每个类都由以上4部分组成


丫梨^_^ 09:34:01
你API打开了没

丫梨^_^ 09:34:08
我给你简单的说一下

逆天 09:34:10
开了

丫梨^_^ 09:34:40
咱就拿tree下的TreeNode来说一下


丫梨^_^ 09:35:17
看Config Options下的checked

丫梨^_^ 09:35:31
checked : Boolean
True to render a checked checkbox for this node, false to render an unchecked checkbox (defaults to undefined with no...
True to render a checked checkbox for this node, false to render an unchecked checkbox (defaults to undefined with no checkbox rendered)

丫梨^_^ 09:36:02
TreeNode是树节点的意思，是吧，那么肯定也就是一个节点

逆天 09:36:27
对
丫梨^_^ 09:36:30
而checked很明显我们就能猜出来是 是否选中 的意思

逆天 09:36:38
对
逆天 09:36:51
可是鸭梨姐姐我写上去了不行呀
丫梨^_^ 09:36:52
checked : Boolean 那么你就要考虑是否是真的你想的那样

丫梨^_^ 09:36:58
你先别看你的代码

丫梨^_^ 09:37:46
这个checked是在Confgi Options下的，是实例化的时候用的，注意这点，其他时候能否用你是不知道的

丫梨^_^ 09:38:31
而且这个配置选项的值必须只接受boolean类型的，也就是true或false

丫梨^_^ 09:38:57
比如 var root = new Ext.tree.TreeNode({checked:true});

丫梨^_^ 09:39:16
那其他的配置选项你你应该也知道怎么用了是吧

逆天 09:39:21
恩
丫梨^_^ 09:39:39
比如href : String 表示的配置选项href接受的类型是string的

丫梨^_^ 09:39:51
我再强调下

丫梨^_^ 09:40:37
这个所谓的配置选项，也就是Config Options下的内容，只有你在实例化的时候用的，也就是你在new 类名({...})时用的


丫梨^_^ 09:40:59
然后你再看 Public Properties 部分

逆天 09:41:14
Public Properties应该是方法吧
丫梨^_^ 09:41:26
属性，老大，not 方法

丫梨^_^ 09:41:58
你看这个childNodes ，public properties下的，看到了没

逆天 09:42:10
恩
丫梨^_^ 09:42:17
childNodes : Array 这样写的是吧？

逆天 09:42:30
对
丫梨^_^ 09:43:05
表示的是你从一个实例化对象里取得的属性，比如你刚才 var tn = new Ext.tree.treeNode({....});这样已经实例化了一个对象了是不？

丫梨^_^ 09:43:15
那么现在你可以取实例化对象的数据了。

丫梨^_^ 09:43:41
怎么取呢，可以取里面的什么东西呢，那么这里public properties里的列出的就是你能取的

丫梨^_^ 09:44:03
那么你要tn.childNodes就能获得一个Array类型的数据

丫梨^_^ 09:45:03
所以public properties下列出的就是一个实例化对象能取的信息，冒号后面的是你索取得的信息的返回类型


丫梨^_^ 09:45:21
Public Methods 再来看这个部分

丫梨^_^ 09:45:47
一般第一个都会是你实例化一个对象的构造方法

丫梨^_^ 09:46:03
TreeNode( Object/String attributes )

丫梨^_^ 09:46:34
表示的是这个构造方法可以接受两种类型的参数，一个是object类型的，一个是string类型的

丫梨^_^ 09:46:42
两者均可

丫梨^_^ 09:47:03
所谓的object类型的一般是这种模式{...}


丫梨^_^ 09:47:21
而所谓的string类型就是"..."


丫梨^_^ 09:47:43
我们再看appendChild( Node/Array node ) : Node 这个

丫梨^_^ 09:47:52
那你说说这个方法是什么意思

逆天 09:48:13
添加一个子节点吧
丫梨^_^ 09:48:23
什么样的子节点？

逆天 09:48:27
Node类型
丫梨^_^ 09:48:31
是么

丫梨^_^ 09:48:34
就这个？

逆天 09:48:51

丫梨^_^ 09:49:13
表示的是能接受的参数是Node类型或者Array类型的数据

丫梨^_^ 09:49:17
看来你还是没理解

逆天 09:49:37
啊奥 偶在看看
丫梨^_^ 09:49:35
注意看括号里面的

丫梨^_^ 09:49:55
括号里面的才是调用这个方法时需要传递进去的参数类型

逆天 09:50:06
2选1
丫梨^_^ 09:50:17
而冒号后面的那个Node的意思是你调用这个方法后返回的一个数据类型

丫梨^_^ 09:51:32
比如var n = tn.appendChild(new Ext.tree.TreeNode({....}));那么是能够得到这个n的值的，并且这个n的值肯定就是Node类型的


丫梨^_^ 09:52:14
接下来看Public Events部分

丫梨^_^ 09:53:00
这部分的内容表示的是你在使用TreeNode类的时候可能出现的事件

丫梨^_^ 09:53:24
比如你对一个树节点进行添加子节点的操作，那么append事件就会发生

逆天 09:53:49
参数怎么传
逆天 09:54:03
tr.on("append",)
丫梨^_^ 09:54:03
也就是在你var n = tn.appendChild(new Ext.tree.TreeNode({....}));运行这个代码的时候会发生append事件

逆天 09:54:18
恩
丫梨^_^ 09:54:21
你先听我说完

逆天 09:54:27
恩好
丫梨^_^ 09:54:31
这个on不on的没有什么的

丫梨^_^ 09:54:42
append : ( Tree tree, Node this, Node node, Number index )

丫梨^_^ 09:55:10
冒号后面的表示的是发生这个事件时会传递过来的数据

丫梨^_^ 09:55:17
你要记住和理解这点

丫梨^_^ 09:56:01
那么事件是这样发生的，但是你如何捕获事件呢

丫梨^_^ 09:56:07
就是通过两种方式


丫梨^_^ 09:56:21
一种是on，一种是listeners


丫梨^_^ 09:57:05
你可以在实例化一个类的时候为listeners配置选项赋值

丫梨^_^ 09:57:48
比如var tn = new Ext.tree.TreeNode({listeners:{"append":function(a,b,c,d){....}}})


丫梨^_^ 09:58:39
还有一种是你对这个实例进行on或addListener方法的调用


丫梨^_^ 09:58:52
Public Methods下面的on或addListener

丫梨^_^ 09:58:59
这个不是无缘无故出来的

逆天 09:59:47
on( String eventName, Function handler, [Object scope], [Object options] ) : void
丫梨^_^ 10:00:09
对，所以你要知道这个事件捕获接受哪些参数

丫梨^_^ 10:00:35
这里的[Object scope], [Object options]相对复杂些

丫梨^_^ 10:00:40
另外我先告诉你一下

丫梨^_^ 10:00:51
js跟java是不一样的

丫梨^_^ 10:01:12
java的方法你传递的参数个数必须根定义的一样，但是js的并不需要

丫梨^_^ 10:01:44
所以你在进行on方法的调用是可以传递不等同个数的参数

丫梨^_^ 10:02:13
那么这里on( String eventName, Function handler, [Object scope], [Object options] ) : void

丫梨^_^ 10:02:21
你可以只传递2个参数

丫梨^_^ 10:02:51
一般情况下，这个api告诉你的是，[]这样括起来的表示你可以不传递的参数

丫梨^_^ 10:03:04
其他的最好传递进来

丫梨^_^ 10:03:42
所以你可以这样调用了. tn.on("append",function(){...})

丫梨^_^ 10:04:35
或者
tn.on("append",hello);
function hello(a,b,c,d){...}

逆天 10:05:47
[Object scope], [Object options]这个要传什么
丫梨^_^ 10:05:55
这个是作用域

逆天 10:06:06
没有用到过呀
丫梨^_^ 10:06:07
一般就是传递this什么的

丫梨^_^ 10:06:23
有时候会用到，特别是当你遇到一些问题时

逆天 10:06:30
比如
丫梨^_^ 10:06:34
这个比如我就不说了

丫梨^_^ 10:06:46
你可以网上找一下作用域的问题

丫梨^_^ 10:07:48
这个on或addListener方法的调用跟public events下的事件是挂钩的

丫梨^_^ 10:08:30
事件append : ( Tree tree, Node this, Node node, Number index ) 冒号后面表示的是事件发生时自动得到的信息

丫梨^_^ 10:09:21
所以，当你在调用on方法时，on方法里handler参数就很关键了

丫梨^_^ 10:10:08
Function handler 这里定义的方法将被调用，别且会将
事件append : ( Tree tree, Node this, Node node, Number index ) 冒号后面表示的是事件发生时自动得到的信息
的参数传递给它

丫梨^_^ 10:10:45
所以你在定义这个handler的时候就可以定义成接受( Tree tree, Node this, Node node, Number index ) 这4个类型的参数

丫梨^_^ 10:11:05
他们的关系你弄明白了没？

逆天 10:14:02
问下tree.on("click",function(node,event)
逆天 10:14:12
我怎么知道function(node,event)有2个参数
丫梨^_^ 10:14:24
哎，你就没明白我说的意思了。

逆天 10:14:25
click : ( Node this, Ext.EventObject e )
丫梨^_^ 10:14:27
恩

丫梨^_^ 10:14:28
对

丫梨^_^ 10:14:33
看来慢慢理解了

逆天 10:14:46
多亏了姐姐帮忙
丫梨^_^ 10:15:20
tree.on("click",function(node,event) 这里的function(node,event)可以单独拿出来

丫梨^_^ 10:15:37
就是我之上举例的hello

丫梨^_^ 10:15:41
这样代码就规范些了

逆天 10:15:46
checkchange : ( Node this, Boolean checked ) 那这个没有event
逆天 10:16:12
tree.on("checkchange ",function(node,checked)
丫梨^_^ 10:16:25
event 就是事件，事件并不是作用在方法上，而是作用在对象上

丫梨^_^ 10:16:50
只是你在调用某些方法的时候触发了事件的发生

丫梨^_^ 10:17:39
比如你想右键一个树节点后去调用某个方法

逆天 10:17:53
dblclick : ( Node this, Ext.EventObject e ) ？

丫梨^_^ 10:18:25
那么，你就可以tn.on("contextmenu",function(node,e){...})

逆天 10:18:46
这回比刚才明白好多了姐姐
逆天 10:18:48
嘿嘿
丫梨^_^ 10:18:52
Public Events下面的东西只是定义了一些事件

丫梨^_^ 10:19:13
而真正使用事件是你进行捕获

丫梨^_^ 10:19:23
就是用on

丫梨^_^ 10:19:47
另外我告诉你,on是addListener的简写，两个方法是一样的

逆天 10:20:11
恩

丫梨^_^ 10:20:15
你觉得现在这个api你能看明白了么？

逆天 10:20:54
差不多就是英文的晕点 我英文不好
丫梨^_^ 10:21:00
根英文没有关系

丫梨^_^ 10:21:07
看API就是看结构


丫梨^_^ 10:21:31
我再告诉你一点知识

丫梨^_^ 10:22:23
你看API各个配置选项或属性或方法或事件的右边

逆天 10:22:43
恩看见了 有的是Node
丫梨^_^ 10:22:42
是不是有个叫Defined By

丫梨^_^ 10:23:18
列头 - Defined By

丫梨^_^ 10:23:22
看到了没？

逆天 10:23:29
恩

逆天 10:23:32
看到了


丫梨^_^ 10:23:41
每个部分的列头都有是不？

逆天 10:23:48
是
丫梨^_^ 10:24:11
他表示的是这些信息是由哪个类定义的

丫梨^_^ 10:24:28
因为你要知道ext中一个很重要的信息就是继承

丫梨^_^ 10:24:49
所以有些方法或配置选项或属性都是来自于他的父类或超类

丫梨^_^ 10:25:13
那么这个Defined By 就告诉了你是来自具体的哪个父类或超类

丫梨^_^ 10:25:23
这样在你看源码的时候就非常清晰

丫梨^_^ 10:26:23
然后Defined By 如果字体是黑色的表示这个配置选项或属性或方法或事件是他本身这个类定义的

丫梨^_^ 10:27:12
所以你一般去看一个类的特性的时候，你只需要去关注这个黑色文本的那些配置选项或属性或方法或事件


丫梨^_^ 10:27:54
然后我们再看看最上面的部分

丫梨^_^ 10:28:00
Class Ext.tree.TreeNodePackage: Ext.tree
Defined In: TreeNode.js
Class: TreeNode
Subclasses: AsyncTreeNode
Extends: Node


丫梨^_^ 10:28:49
这里有Subclasses和Extends

逆天 10:28:57
恩
丫梨^_^ 10:29:02
知道是啥意思么

逆天 10:29:10
继承
丫梨^_^ 10:29:20
前面那个呢

逆天 10:29:22
不知道

丫梨^_^ 10:30:05
Subclasses表示这个类有哪些子类，Extends表示这个类继承自哪个类

丫梨^_^ 10:31:03
我之所以要跟你说这点，是因为要告诉你 事件应用的限制

丫梨^_^ 10:32:05
只有那些继承了Observable类的类，也就是这个类是Observable的子类或子孙类，那么这个类才拥有事件处理机制，也就是才会有Public Events部分

丫梨^_^ 10:33:03
所以，你如果你自己扩展一个类，想拥有事件处理和响应机制，那么你这个类就必须是这个Observable类的子类或子孙类

丫梨^_^ 10:33:46
你可以一直点Extends后面的进去，最后肯定会出来我说的这个Observable类

评论

18 楼 java小小疯 2012-09-22  

好东西啊

17 楼 kinglyhum 2010-08-09  

额滴神啊。。。。头大了

16 楼 zengqun89 2010-01-08  

丫梨老师的教学视频地址在哪里?呵呵

15 楼 longxiaoyan 2009-12-25  

良师益友.

14 楼 hexawing 2009-11-26  

内牛满面，写得真是太好了，很适合我这种初学者……
本来是想到处拷贝代码自己猜一猜就能融会贯通了，结果发现还是要学习基础知识。
学习过程中问高手，高手都会说：去看API，但没有这么一篇API的讲解，我抱着API猛啃也不得其门而入……
再次感谢楼主！

13 楼 santapipi 2009-05-27  

嗯。。。太有耐心了。。。

12 楼 peter2009 2009-03-31  

Ext.onReady(
      function(){
      
      
       var root = new Ext.tree.AsyncTreeNode(
   {
  text:"菜单根节点",
  expanded:true,
  id:'root'
   });
   var tree = new Ext.tree.TreePanel({
    loader:new Ext.tree.TreeLoader({
     baseAttrs:{
     cust:'client'
     },
     dataUrl:'datatest.jsp'
    }),
    listeners : {
'click' : function(node, event) {
if (node.id == 'aa') {
getcount();
}

tree.getNodeById("aa").select();
},
'load':function(node, event) {
    var a = tree.getNodeById("aa");
if (a!=null) {
a.select();
//alert('11111222654789');
}
}
},
   title:'Tree示例',
   width:200,
   height:500,
   autoHeight:true,
  
   applyTo:'tree-div',
   root:root
 
  });
    tree.on('load', function(node, event)
    {
       var a = tree.getNodeById("aa");
   if (a!=null) {
a.select();
//alert('qqqqqqqqqqq');
  }
   }); 
 
       });

如何在加载的时候选中 默认选中aa 节点呀

11 楼 tokay 2009-03-18  

写的真不错。

10 楼 picora 2008-11-26  

yahaitt 写道

picora 写道
丫梨就是浪曦讲解ExtJS课程的那位么？

看过你的ExtJS Grid部分，很不错哦~

9 楼 yahaitt 2008-11-26  

picora 写道

丫梨就是浪曦讲解ExtJS课程的那位么？

8 楼 picora 2008-11-25  

丫梨就是浪曦讲解ExtJS课程的那位么？

7 楼 chunyou128 2008-11-20  

6 楼 xt95 2008-08-28  

非常感谢！正在学extjs，正不知道该如何下手。对java script不熟悉，以前一直用asp.net，很少接触js脚本。不过，感觉js脚本与c#很像，有信心学好！

5 楼 weidewei 2008-08-07  

引用

丫梨^_^ 10:00:51
js跟java是不一样的

丫梨^_^ 10:01:12
java的方法你传递的参数个数必须根定义的一样，但是js的并不需要

丫梨^_^ 10:01:44
所以你在进行on方法的调用是可以传递不等同个数的参数

这个在java5里面对参数没限制这么死了啊.java5泛型.

4 楼 weidewei 2008-08-07  

我刚开始学,看到了.哈哈

3 楼 magicsa 2008-08-06  

还好,我不算迟到很久...

2 楼 gaoyide 2008-07-31  

我是不是迟到了很久 很久.

1 楼 zzz698912 2008-07-30  

这篇文章这么好怎么没人做沙发