如何学习Coolite并学会查ExtJSAPI

写在前面：Coolite的官方例子需要看并实践，ExtJS的API必不可少。学会使用查找ExtJS的API，相应的控件到相应的API可以查看，有属性、方法、事件。ExtJS的强大，几乎涵盖了所有的东西，有很多方法都是可以尝试使用的，了解方法的参数和返回的值。事件中特别需要注意其参数，每一个参数都有特定的作用。以下举例怎么查API。

例子一：

现在我们有一个GridPanel，展示的列表数据，现在我们想点击其中一行获得选中行的ID。首先，我们想到的就是在GridPanel中添加一个监听事件

<Listeners><RowClick Fn="SelectFn" /></Listeners>，

在JS的函数SelectFn中就需要写代码了。点击了一行就是选中了这行，然后我们就利用ExtJS的API，找到GridPanel部分，我们去找方法，是否有可以获得选中行的数据的类似方法。结果我们可以发现有以下这一种方法：

35.getSelectionModel() : SelectionModel

Returns the grid's selection model configured by the selModel configuration option. If no selection model was config...

参数:None

返回：SelectionModel

继续查找，在ExtJS的grid目录下面我们发现有19.RowSelectionModel，我们查看下这个类下面会有什么方法，结果我们找到了方法：

12.getSelections() : Array

Returns the selected records

参数:None

返回：Array of select records

很明显这就是我们要找的方法，该方法返回了选中的数据的数组。

获取到了records数据。这时候JS函数SelectFn可以这么写：

function SelectFn() {

    //获取选中行的所有记录

var records = GridPanelEmployeeInfo.getSelectionModel().getSelections();

}

然后试着调试程序，我们将发现

最后我们就找到了自己想要的ID了

//选择行时

function SelectFn() {

    //获取选中行的ID

    var records = GridPanelEmployeeInfo.getSelectionModel().getSelections();

    var employeeID = records[0].data.ID;

}

 

晕：上面的解法太TM复杂了，明显可以直接这样,查看GridPanel的的ExtJS的监听点击事件发现如下：

40.rowselect: ( SelectionModel this, Number rowIndex, Ext.data.Record r )

Fires when a row is selected.

参数分别就是this，行号，还有record

所以JS我们可以直接这样写：

//选择行时，按钮亮起

function SelectFn(selectionModel, rowIndex, record) {

    //获取选中行的ID

    employeeID = record.data.ID;

}

 

一步到位，方便简洁。

也可以先找到Store然后用Store里的根据行号获得record的方法

//获取选中行的数据

 var records = GridPanelEmployeeInfo.getStore().getAt(rowIndex);

 employeeID = record.data.ID;

 

例子二：

现在有一棵树，我们要在点击树节点的时候获取点击的ID，首先我们查找ExtJS的API，在TreePanel的事件中，我们发现了以下事件：

102. click: ( Node node, Ext.EventObject e )

Fires when a node is clicked,Listeners will be called with the following arguments:

node：Node：The node

e：Ext.EventObject

我们可以发现该事件的参数有两个，第一个就是点击的节点！

然后我们查看TreeNode的API，发现有属性id。因此代码也就出来了，先在前台的TreePanel中添加监听点击事件

<Listeners>Click Fn="clickNode" /></Listeners>

然后在JS中的方法如下：

//点击树节点

function clickNode(node, e) {

    var departmentid = node.id;  //点击节点的ID

}

 

总结：学会查API至关重要