[Ext JS 4] 实战之Grid, Tree Gird 添加按钮列

来源：互联网发布：淘宝如何编辑宝贝分类编辑：程序博客网时间：2024/06/05 07:38

引言

贴一个grid 的例子先：

有这样一个需求：

1. 给 Grid(or Tree Grid)添加一列，这一列显示是Button. 点击之后可以对这一行进行一些操作

2. 这一列每一行对应的按钮不尽相同，根据每一行的数据不同，显示的按钮不同，对应的点击操作也不同。

解法

针对以上需求1 , 很容易就可以解决。

Ext JS 的Grid 有提供 Ext.grid.column.ActionView xtype: actioncolumn 这样的列。

只需要在grid panel 的columns 配置一栏的xtype为actioncolumn；配置icon 为显示的按钮图；配置handler点点击的动作就可以了。

贴一个完整的例子：

<!-- add by oscar999 --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/><script>Ext.onReady(function(){Ext.create('Ext.data.Store', {    storeId:'simpsonsStore',    fields:['name', 'email', 'phone'],    data:{'items':[        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }    ]},    proxy: {        type: 'memory',        reader: {            type: 'json',            root: 'items'        }    }});Ext.create('Ext.grid.Panel', {    title: 'Simpsons',    store: Ext.data.StoreManager.lookup('simpsonsStore'),    columns: [        { text: 'Name',  dataIndex: 'name' },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone' },        { text: 'Actions', xtype: 'actioncolumn',icon:'../resources/themes/images/access/grid/checked.gif',handler:function(){alert("hello")}}    ],    height: 200,    width: 400,    renderTo: Ext.getBody()});});</script></head><body></body></html>

如果要添加多个图标按钮也很简单

        { text: 'Actions', xtype: 'actioncolumn',          items:[{          icon:'../resources/themes/images/access/grid/checked.gif',handler:function(){alert("hello")}          },{          icon:'../resources/themes/images/access/grid/columns.gif',handler:function(){alert("hello")}          }                          ]        }

现在的问题就是，如何根据这一行其他栏的值显示不同的图标按钮？

在早期使用Ext js 3 的时候，有使用过这种方法来解决这个问题：（不确定Ext js 3 是否支持下面提到的新的方法）

旧的方法：

把图标组成 <img src="" onclick/> 这样的字串，当成值放入这一列。这种传输和控制上来说都不是很好。

下面给出新的方法。

新的 Ext.grid.column.ActionView 组件有提供 getClass 这样的配置项，
关于这个配置项的解释是：

getClass : FunctionA function which returns the CSS class to apply to the icon image.Available since: 3.4.0Parameters    v : Object    The value of the column's configured field (if any).    metadata : Object    An object in which you may set the following attributes:        css : String        A CSS class name to add to the cell's TD element.        attr : String        An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').    r : Ext.data.Model    The Record providing the data.    rowIndex : Number    The row index.    colIndex : Number    The column index.    store : Ext.data.Store    The Store which is providing the data Model.

一句话来说，就是这个配置可以根据当前行的其他栏位的值返回按钮行不同的 iconClass 。这样岂不就就可以解决问题了：

还是贴一个完整的例子：

<!-- add by oscar999 --><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/><style type="text/css">.icon1{background-image: url("../resources/themes/images/access/grid/checked.gif"); background-repeat: no-repeat;}.icon2{background-image: url("../resources/themes/images/access/grid/columns.gif"); background-repeat: no-repeat;}</style><script>Ext.onReady(function(){Ext.create('Ext.data.Store', {    storeId:'simpsonsStore',    fields:['name', 'email', 'phone'],    data:{'items':[        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }    ]},    proxy: {        type: 'memory',        reader: {            type: 'json',            root: 'items'        }    }});Ext.create('Ext.grid.Panel', {    title: 'Simpsons',    store: Ext.data.StoreManager.lookup('simpsonsStore'),    columns: [        { text: 'Name',  dataIndex: 'name' },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone' },        { text: 'Actions', xtype: 'actioncolumn',              getClass: function(v, meta, rec) {              if(rec.get("name")=="Lisa")              {              return 'icon1';              }else{              return 'icon2';              }              }    }              ],    height: 200,    width: 400,    renderTo: Ext.getBody()});});</script></head><body></body></html>

当然， handler 也可以借助类似的方式

      handler: function(grid, rowIndex, colIndex) {                        var rec = grid.getStore().getAt(rowIndex),       }

其他

以上第一个例子是直接指定 icon 的位置，也可以指定 iconCls 的值