[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点点击的动作就可以了。
贴一个完整的例子：
<!-- 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 添加按钮列的更多相关文章
- [Ext JS 4] 实战之Grid, Tree Gird编辑Cell
前言 本篇这里以稍微复杂一点的Tree Grid 来介绍. 在写编辑grid 之, 先来看一下 grid 的 selType 的配置. 先给一个简单的Tree grid 的例子: Ext.onRead ...
- Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法
Ext JS treegrid 发生的在tree上增加itemclick 与在其它列上增加actioncolumn 发生事件冲突(event conflict)的解决办法 最近在适用Ext JS4开发 ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> “2. 每年的周数从(1-52), 如果超过52 周 ...
- [Ext JS 4] 实战之 Picker 和 Picker Field
前言 所谓的picker , 就是弹出一个选择框,让你选择一些信息.比如选择日期, 选择颜色等: 选择的结果总是要放在一个地方的,Picker Field 就是用来放置选择结果的一个文本框. 在Ext ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件
前言 Ext JS 3 和 Ext JS 4中都有提供日期选择的组件(当然早期版本也有). 但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周. 遗憾的是Ext js 并没有提供 ...
- [Ext JS 4] 实战之多选下拉单 (带checkbox)
前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...
- [Ext JS 4] 实战Chart 协调控制（单一的坐标，两个坐标）
前言
- 24. [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
转自:https://blog.csdn.net/oscar999/article/details/27176791
- Ext JS 6学习文档-第5章-表格组件(grid)
Ext JS 6学习文档-第5章-表格组件(grid) 使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 ...
随机推荐
- 【HDOJ】3459 Rubik 2×2×2
模拟+DFS. /* 3459 */ #include <cstdio> #include <cstring> #include <cstdlib> #define ...
- JavaScript中的加号
JavaScript中的加号“+”可以作为数学运算符的加,也可以作为字符串拼接,也可以作为一元运算符,表示正数. 1+2 "2"+"3" 3+"2&q ...
- [Locked] Generalized Abbreviation
Write a function to generate the generalized abbreviations of a word. Example:Given word = "wor ...
- 《A First Course in Probability》-chaper6-随机变量的联合分布-独立性
在探讨联合分布的时候,多个随机变量之间可以是互相独立的.那么利用独立性这个性质我们就能够找到一些那些非独立随机变量没有的求解概率的方法. 对于离散型随机变量的独立联合分布: 离散型随机变量X.Y独立, ...
- poj1664 （递归）
放苹果 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 31295 Accepted: 19742 Description ...
- 简单约瑟夫环的循环单链表实现(C++)
刚刚接触C++以及数据结构,今天做了第一次尝试用C++和数据结构解决问题,问题是基于约瑟夫环问题的简单版. 先来看看约瑟夫环问题的介绍: 约瑟夫环是一个数学的应用问题:已知n个人(以编号1,2,3.. ...
- pl sql developer登陆界面找不到oracle数据库选项
window 64位的操作系统 装的数据库win64_11gR2的数据库,PL SQL是PLSQL Developer 7.1.5最后是下载了一个instantclient_11_2包将你数据库安装路 ...
- HTTP协议之状态码详解
转自:http://www.cnblogs.com/TankXiao/ 什么是HTTP状态码 HTTP状态码的作用是:Web服务器用来告诉客户端,发生了什么事. 状态码位于HTTP Response ...
- JavaScript交换两个变量值的七种解决方案
前言 这篇文章总结了七种办法来交换a和b的变量值 1 2 var a = 123; var b = 456; 交换变量值方案一 最最最简单的办法就是使用一个临时变量了,不过使用临时变量的方法实在是太l ...
- Nginx报错：Sorry, the page you are looking for is currently unavailable. Please try again later.
查看了进程, nginx, php-fpm都在运行, 排除程序错误, 那么就是配置的问题了. 一个可能的错误, 是由于配置中的 fastcgi_pass 配置错了 错误的配置如下 server { l ...