Coolite开发过程中的学习笔记（一）

如何学习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...Returns the grid's selection model configured by the selModel configuration option. If no selection model was configured, this will create and return a RowSelectionModel.

参数: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至关重要

 

2009-12-27

转载于:https://www.cnblogs.com/meiqunfeng/archive/2009/12/27/1633389.html