ExtJS4实战之Grid, Tree Gird 添加按钮列

引言

贴一个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点点击的动作就可以了。

贴一个完整的例子:

[html][/html]

view plaincopy

  1. Insert title here

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

[html][/html]

view plaincopy

  1. { text: ‘Actions’, xtype: ‘actioncolumn’,
  2.   items:[{
  3.       icon:’../resources/themes/images/access/grid/checked.gif’,handler:function(){alert(“hello”)}
  4.       },{
  5.       icon:’../resources/themes/images/access/grid/columns.gif’,handler:function(){alert(“hello”)}
  6.       }
  7.   ]
  8. }

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

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

旧的方法:

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

下面给出新的方法。

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

[html][/html]

view plaincopy

  1. getClass : Function
  2. A function which returns the CSS class to apply to the icon image.
  3. Available since: 3.4.0
  4. Parameters
  5.     v : Object
  6.     The value of the column’s configured field (if any).
  7.     metadata : Object
  8.     An object in which you may set the following attributes:
  9.         css : String
  10.         A CSS class name to add to the cell’s TD element.
  11.         attr : String
  12.         An HTML attribute definition string to apply to the data container element within the table cell (e.g. ‘style=”color:red;”‘).
  13.     r : Ext.data.Model
  14.     The Record providing the data.
  15.     rowIndex : Number
  16.     The row index.
  17.     colIndex : Number
  18.     The column index.
  19.     store : Ext.data.Store
  20.     The Store which is providing the data Model.

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

还是贴一个完整的例子:

[html][/html]

view plaincopy

  1. <!– add by oscar999 –>
  2. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  3. <html>
  4. <head>
  5. <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
  6. <title>Insert title here</title>
  7. <script type=”text/javascript” src=”../ext-all.js”></script>
  8. <link rel=”stylesheet” type=”text/css” href=”../resources/css/ext-all.css”/>
  9. <style type=”text/css”>
  10. .icon1{
  11.     background-image: url(“../resources/themes/images/access/grid/checked.gif”);
  12.     background-repeat: no-repeat;
  13. }
  14. .icon2{
  15.     background-image: url(“../resources/themes/images/access/grid/columns.gif”);
  16.     background-repeat: no-repeat;
  17. }
  18. </style>
  19. <script>
  20. Ext.onReady(function(){
  21.     Ext.create(‘Ext.data.Store’, {
  22.         storeId:’simpsonsStore’,
  23.         fields:[‘name’, ’email’, ‘phone’],
  24.         data:{‘items’:[
  25.             { ‘name’: ‘Lisa’,  “email”:”lisa@simpsons.com”,  “phone”:”555-111-1224″  },
  26.             { ‘name’: ‘Bart’,  “email”:”bart@simpsons.com”,  “phone”:”555-222-1234″ },
  27.             { ‘name’: ‘Homer’, “email”:”home@simpsons.com”,  “phone”:”555-222-1244″  },
  28.             { ‘name’: ‘Marge’, “email”:”marge@simpsons.com”, “phone”:”555-222-1254″  }
  29.         ]},
  30.         proxy: {
  31.             type: ‘memory’,
  32.             reader: {
  33.                 type: ‘json’,
  34.                 root: ‘items’
  35.             }
  36.         }
  37.     });
  38.     Ext.create(‘Ext.grid.Panel’, {
  39.         title: ‘Simpsons’,
  40.         store: Ext.data.StoreManager.lookup(‘simpsonsStore’),
  41.         columns: [
  42.             { text: ‘Name’,  dataIndex: ‘name’ },
  43.             { text: ‘Email’, dataIndex: ’email’, flex: 1 },
  44.             { text: ‘Phone’, dataIndex: ‘phone’ },
  45.             { text: ‘Actions’, xtype: ‘actioncolumn’,
  46.               getClass: function(v, meta, rec) {
  47.                   if(rec.get(“name”)==”Lisa”)
  48.                   {
  49.                       return ‘icon1’;
  50.                   }else{
  51.                       return ‘icon2’;
  52.                   }
  53.               }
  54.             }
  55.         ],
  56.         height: 200,
  57.         width: 400,
  58.         renderTo: Ext.getBody()
  59.     });
  60. });
  61. </script>
  62. </head>
  63. <body>
  64. </body>
  65. </html>

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

[html][/html]

view plaincopy

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

其他

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

标签