在EXTJS的各个版本中,grid应该是我们最常用的组件之一,EXTJS的grid为我们提供了很强大的功能,相信,做过extjs的人都已经了解了该组件的强大之处。比如说:排序、过滤、编辑、等等。这节呢,咱们主要是对grid中的ActionColumn做一个说明。以便在大家用到的时候。便于查阅和参考。
EXTJS的Grid为我们提供了好多的列类型。比如说(ActionColumn、BooleanColumn、NumberColumn、DateColumn),在使用时,他们都大同小异。分别应用到不同的场景当中。
ActionColumn我们可以称呼他为动作列,顾名思义,也就是说,当我们该列需要出发一个动作时,我们就用到ActioColumn,比如说:我们需要点击某一列,连接到该记录的详细页面。当然,如果你用列的renderer函数也是可以实现的,但是。在扩展性和交互上就不太方便了。所以,我建议。如果,我们有类似的需求。我们还是用ActionColumn。下面是ActionColumn的一些效果图。
如图所示:“运行历史”列和“下载”列,就是我们的ActionColumn。下面我们来看一下。ActionColumn的具体使用步骤。
众所周知,在使用EXTJS的Grid时,必须必备的就是ColumnModel和Store、当然在EXTJS4中就是Model和Store、所以第一步我们首先要创建这两个对象,本文我们用EXTJS3.x来说明使用ActionColumn。着重演示一下ColumnModel的代码示例:
//创建列模型
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({
renderer:function(value,metadata,record,rowIndex){
return curth.startnum + 1 + rowIndex;
}
}),
{header:"ID",dataIndex:"ID",hidden:true},
{header:"文件名",dataIndex:"FileName"},
{header:"运行时间",dataIndex:"RunTime"},
{header:"运行状态",dataIndex:"RunState"},
{xtype:"actioncolumn",header:"下载",items:[
{icon:'Image/download.png',tooltip:"下载",handler:function(grid,rindex,cindex){
var record=grid.getStore().getAt(rindex);
var id=record.get("ID");
download(id);
}}
]}
]);
如上代码,我们创建了一个列模型对象。其中红色字体部分就是我们所说的ActionColumn。首先。创建一个ActionColumn对象,然后为其添加了一个元素。(我们可以把这个元素理解成为带有背景图片的按钮)。元素中icon指定了图片的路径,tooltip指定的工具提示信息,handler为元素的点击事件。事件可以传递三个参数,grid为grid本身对象,rindex为当前航索引,cindex为当前列索引。这样,我们在运行时。就会出现如上图中的效果了。
另外,我们可能还会根据某一列的值,来动态修改我们的图标。比如说:我们根据销售额,大于3000的我们用对号表示,小于的用错号表示。这个需求,ActionColumn也是能做到的。我们把上边的代码稍作改动,就可以实现
//创建列模型
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({
renderer:function(value,metadata,record,rowIndex){
return curth.startnum + 1 + rowIndex;
}
}),
{header:"ID",dataIndex:"ID",hidden:true},
{header:"文件名",dataIndex:"FileName"},
{header:"运行时间",dataIndex:"RunTime"},
{header:"运行状态",dataIndex:"RunState"},
{xtype:"actioncolumn",header:"下载",items:[
{
getClass: function(v, meta, record) {
if (record.get('sellcount') < 3000) {
this.items[0].tooltip = 'Do not buy!';
return 'yes';
} else {
this.items[0].tooltip = 'Buy stock';
return 'no';
}
},
handler: function(grid, rowIndex, colIndex) {
}
}
]}
]);
与第一段代码不同的是,这次我们使用了getClass这个函数,这个函数,可以根据我们的逻辑返回相应的css名称。这样,我们就可以完成我们的需求了。