EXTJS Grid 之ActionColumn

EXTJS Grid 之ActionColumn

分类： EXTJS4

在EXTJS的各个版本中，grid应该是我们最常用的组件之一，EXTJS的grid为我们提供了很强大的功能，相信，做过extjs的人都已经了解了该组件的强大之处。比如说：排序、过滤、编辑、等等。这节呢，咱们主要是对grid中的ActionColumn做一个说明。以便在大家用到的时候。便于查阅和参考。

 

EXTJS的Grid为我们提供了好多的列类型。比如说（ActionColumn、BooleanColumn、NumberColumn、DateColumn），在使用时，他们都大同小异。分别应用到不同的场景当中。

 

ActionColumn我们可以称呼他为动作列，顾名思义，也就是说，当我们该列需要出发一个动作时，我们就用到ActioColumn，比如说：我们需要点击某一列，连接到该记录的详细页面。当然，如果你用列的renderer函数也是可以实现的，但是。在扩展性和交互上就不太方便了。所以，我建议。如果，我们有类似的需求。我们还是用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名称。这样，我们就可以完成我们的需求了。