引言

贴一个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 : 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 。  这样岂不就就可以解决问题了：

还是贴一个完整的例子：

<!-- 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 的值

[Ext JS 4] 实战之Grid, Tree Gird 添加按钮列的更多相关文章

  1. [Ext JS 4] 实战之Grid, Tree Gird编辑Cell

    前言 本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onRead ...

  2. Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法

    Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...

  3. [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)

    前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件  ==> “2. 每年的周数从(1-52), 如果超过52 周 ...

  4. [Ext JS 4] 实战之 Picker 和 Picker Field

    前言 所谓的picker , 就是弹出一个选择框,让你选择一些信息.比如选择日期, 选择颜色等: 选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框. 在Ext ...

  5. [Ext JS 4] 实战之 带week(星期)的日期选择控件

    前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...

  6. [Ext JS 4] 实战之多选下拉单 (带checkbox)

    前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...

  7. [Ext JS 4] 实战Chart 协调控制（单一的坐标，两个坐标）

    前言

  8. 24. [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏

    转自:https://blog.csdn.net/oscar999/article/details/27176791

  9. Ext JS 6学习文档-第5章-表格组件(grid)

    Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...

随机推荐

  1. 「Poetize5」Vani和Cl2捉迷藏

    描述 Description 这片树林里有N座房子,M条有向道路,组成了一张有向无环图.树林里的树非常茂密,足以遮挡视线,但是沿着道路望去,却是视野开阔.如果从房子A沿着路走下去能够到达B,那么在A和 ...

  2. ♫【jQuery】detach

    Jquery empty() remove() detach() 方法的区别 <!DOCTYPE html> <html> <head> <meta char ...

  3. jquery 学习第一课之start

    1.$选取符 ( $ == jQuery ) (1) $("div").addClass("special");选取本页面中的所有<div>元素,然 ...

  4. weblogic jsp 不生效解决方法

    1. 检查weblogic.xml配置文件,其中如果有: <jsp-descriptor> <jsp-param> <param-name>pageCheckSec ...

  5. 【转】处理新版Chrome书签、菜单字体不清晰

    原文网址:http://www.nmgwddj.com/share/311.html 昨晚打开Chrome浏览器,忽然感觉有些什么东西变了,仔细看了半天忽然发现,书签中的字体和网页中右键的字体全部都变 ...

  6. 黄源河《左偏树的应用》——数字序列（Baltic 2004）

    这道题哪里都找不到. [问题描述] 给定一个整数序列a1, a2, … , an,求一个不下降序列b1 ≤ b2 ≤ … ≤ bn,使得数列{ai}和{bi}的各项之差的绝对值之和 |a1 - b1| ...

  7. 【模拟】NCPC 2014 K Train passengers

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1797 题目大意: 有N个车站,火车一共可以坐M个人,每个车站下车Ai,上车Bi个人,在 ...

  8. openStack CentOS虚拟桌面iptables初始化配置

  9. inux常用命令大全

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  10. Hibernate五 HQL查询

    HQL查询一 介绍1.HQL:Hibernate Query Language,是一种完全面向对象的查询语言.使用Hibernate有多重查询方式可供选择:hibernate的HQL查询,也可以使用条 ...