[Ext JS 4] 实战之Grid, Tree Gird 添加按钮列| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

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

## [Ext JS 4] 实战之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点点击的动作就可以了。
贴一个完整的例子：
```javascript
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="../ext-all.js">script>
<linkrel="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>
```

如果要添加多个图标按钮也很简单
```javascript
	        { 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 是否支持下面提到的新的方法）
旧的方法：
把图标组成 这样的字串，当成值放入这一列。 这种传输和控制上来说都不是很好。
下面给出新的方法。
新的 Ext.grid.column.ActionView 组件有提供 getClass 这样的配置项，
关于这个配置项的解释是：
getClass : Function
A function which returns the CSS class to apply to the icon image.
Available since: 3.4.0
Parameters
```
    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 。  这样岂不就就可以解决问题了：
还是贴一个完整的例子：
```
htmlPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title heretitle>
<scripttype="text/javascript"src="../ext-all.js">script>
<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
<styletype="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 的值

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

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

网站导航