grid双击事件，并得到单元格的值，以上我试了下好像不行，最终我这样写了
grid.addListener('rowdblclick',
function (sm, rowIndex, e) {
var selectionModel =
grid.getSelectionModel();
var record = selectionModel.getSelected();
alert(record.data['UserName']);
});menuDisabled:true表示单列不可排序
enableHenu:true所有列不可排序
renderer:function(v)
{
return v.link(v);
}
ExtJs表格
2009年11月09日 星期一 00:48
行
选择模式：
Js代码
var rowcount =
grid.getSelectionNode().getSelections();
var rowcount =
grid.getSelectionNode().getSelections();
可以获取全部选中的记录，得到的rowcount将是一个
Array，比如想获取***列的数据，语句如下
Js代码
var str*** =
rowcount[i].get(‘***’);
var str*** = rowcount[i].get(‘***’);
单
元格选择模式
如果在GridPanel的配置属性增加sm属性如下
Js代码
sm:new
Ext.grid.CellSelectionModel();
sm:new
Ext.grid.CellSelectionModel();
则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格，而不是默
认的选择某一行。选择方式如下
Js代码
var cell =
grid.getSelectionNode().getSelectedCell();
var cell =
grid.getSelectionNode().getSelectedCell();
得到的cell记录了当前选择的行(cell[0])以
及列(cell[1]).可以通过一下语句得到该单元格数据
Js代码
var colname =
grid.getColumnModel().getDataIndex(cell[1]); //获取列名
var celldata =
grid.getStore().getAt(cell[0]).get(colname); //获取数据
var colname =
grid.getColumnModel().getDataIndex(cell[1]); //获取列名
var celldata =
grid.getStore().getAt(cell[0]).get(colname); //获取数据
getStore():获取表格的数
据集
getAt():获取该数据集cell[0]行
get():获取该行colname的数据
2）
为表格增加链接
有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html
如
下：{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},
定义DomUrl方法
Js
代码
function DomUrl(value){
return "<a
href=>"+value+"</a>";
}
function DomUrl(value){
return
"<a href=>"+value+"</a>";
}
如果表格内的数据是一个链接
如：www.sina.com这样写法自然没有问题，但是大多数时候我们在表格中不会直接写一个链接，如果又需要根据单元格内容动态为链接添加几个参数。
那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的，而且表格初始化之后这个属性无法改变，也就是只读属性。
处
理方法如下：
定义一个全局变量，初始值为0；DomUrl函数如下
Js代码
function
DomUrl(value){
var row =
grid.getSelectionModel().selectRow(startrow);//选中当前行
var rownum =
grid.getSelectionModel().getSelected();//获取当前行
startrow ++;
var
strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值，并组织链接字符串
return
"<a href='"+strurl+"'>"+value+"</a>";
}
function
DomUrl(value){
var row =
grid.getSelectionModel().selectRow(startrow);//选中当前行
var rownum =
grid.getSelectionModel().getSelected();//获取当前行
startrow ++;
var
strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值，并组织链接字符串
return
"<a href='"+strurl+"'>"+value+"</a>";
}
不过不要忘记在下次提交的时
候将startrow赋值为0。
3） 表格的属性
表格的属性分为配置属性（在操作表格时无法修改），以
及其他可读写属性，方法，以及事件。如下：
配置属性
a)
activeItem：渲染布局时激活的子元素。
b) applyTo：指定渲染对象。
c)
autoDestroy：当容器的子元素从容器中移除时是否自动销毁。
d)
autoExpandColumn：指定自动填充表格剩余区域的列id
e) autoExpandMax：可自动扩张的最大宽度。
f)
autoExpandMin：可自动扩张的最小宽度
g) autoHeight:自动扩充高度
h) autoShow：是否自动显示
i)
autoWidth：自动扩充宽度
j) bbar/tbar：底部/顶部状态栏
k) bufferResize：容器再布局的缓冲频率
l)
colModel/cm:列模式
m) cls：组件的额外css格式。
n) collapsible:是否显示快捷隐藏按钮
o)
defaults：指定默认配置。
p) disableSelection：是否禁止选择表格行或列
q)
enableDragDrop：是否允许表格列的拖放操作。
r) enableHdMenu：是否显示表格列的菜单。
s)
frame：边框是否显示
t) loadMask: 是否显示加载动画
u) selModel/sm：表格选择模式
v)
store:表格数据集
w) stripeRows：是否显示分隔线。
x) title：表格标题
方法
a)
getColumnModel()：得到表格列模型
b) getGridEl():得到表格下的元素
c)
getPosition():得到组件的当前位置，返回一个数组
d) getSelectionModel():得到选中模型
e)
getSize():得到组件大小
f) getStore():得到组件的数据集
g)
getView():得到表格的GridView对象。
h) hide():隐藏当前组件
i)
isVisible():判断当前组件是否显示
j) setDisabled( Boolean):设置组件的可用性
k)
un():解除组件的监听
l) on()：为组件添加监听
on ( String eventName, Function
handler, [Object scope] )
eventName:添加监听的名称
handler:事件处理函数
scope:
事件响应的作用域,包括scope,delay,single,buffer。
----------------------------
<%@
page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String
path = request.getContextPath();
String basePath =
request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta
http-equiv="cache-control" content="no-cache">
<meta
http-equiv="expires" content="0">
<script
type="text/javascript"
src="<%=path%>/js/ext-base.js"></script>
<script type="text/javascript"
src="<%=path%>/js/ext-all.js"></script>
<link
rel="stylesheet" type="text/css"
href="<%=path%>/resources/css/ext-all.css">
<script
type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new
Ext.state.CookieProvider());
var myData = [
['3m
Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1
12:00am'],
['Altria Group Inc', 83.81,
0.28, 0.34, '9/1 12:00am'],
['American Express
Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1
12:00am']
];
function change(val) {
if (val
> 0) {
return '<span style="color:green;">' +
val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
function pctChange(val) {
if (val > 0) {
return '<span
style="color:green;">' + val + '%</span>';
} else if
(val < 0) {
return '<span style="color:red;">' +
val + '%</span>';
}
return val;
}
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company', renderer:getHideValue},
{name:
'price', type: 'float'},
{name: 'change', type:
'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);
function
getHideValue(value)
{
return "<a
href=javascript:show></a>"
}
var grid =
new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header :
'Company',
width : 160,
sortable : true,
dataIndex: 'company'
},
{
id :'p',
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer :
Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex:
'lastChange'
},
{
xtype: 'actioncolumn',
width: 50,
items: [{
icon : 'resources/delete.gif', //
Use a URL in the icon config
tooltip: 'Sell
stock',
handler: function(grid, rowIndex,
colIndex) {
var rowcount =
grid.getSelectionNode().getSelections();
var
rec = store.getAt(rowIndex);
alert("Sell " +
rec.get('company'));
}
}]
}
],
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width:
600,
title: 'Array Grid',
stateful: true,
stateId: 'grid'
});
grid.render('grid-example');
});
function show(value)
{
alert("jj");
}
</script>
</head>
<body>
<div
id='grid-example' align="center"></div>
</body>
</html> |
免费注册
发表于 2011-12-22 08:54