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，比如想獲取***列的數(shù)據(jù)，語句如下
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]).可以通過一下語句得到該單元格數(shù)據(jù)
Js代碼
var colname =
grid.getColumnModel().getDataIndex(cell[1]); //獲取列名
var celldata =
grid.getStore().getAt(cell[0]).get(colname); //獲取數(shù)據(jù)
var colname =
grid.getColumnModel().getDataIndex(cell[1]); //獲取列名
var celldata =
grid.getStore().getAt(cell[0]).get(colname); //獲取數(shù)據(jù)
getStore():獲取表格的數(shù)
據(jù)集
getAt():獲取該數(shù)據(jù)集cell[0]行
get():獲取該行colname的數(shù)據(jù)
2）
為表格增加鏈接
有時我們需要為表格中的某一列添加一個鏈接�？梢岳胷enderer配置屬性為該列添加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>";
}
如果表格內(nèi)的數(shù)據(jù)是一個鏈接
如：www.sina.com這樣寫法自然沒有問題，但是大多數(shù)時候我們在表格中不會直接寫一個鏈接，如果又需要根據(jù)單元格內(nèi)容動態(tài)為鏈接添加幾個參數(shù)。
那這種寫法就幾乎沒有什么用了。因為這個屬性是在表格初始化的時候定義好的，而且表格初始化之后這個屬性無法改變，也就是只讀屬性。
處
理方法如下：
定義一個全局變量，初始值為0；DomUrl函數(shù)如下
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>";
}
不過不要忘記在下次提交的時
候?qū)tartrow賦值為0。
3） 表格的屬性
表格的屬性分為配置屬性（在操作表格時無法修改），以
及其他可讀寫屬性，方法，以及事件。如下：
配置屬性
a)
activeItem：渲染布局時激活的子元素。
b) applyTo：指定渲染對象。
c)
autoDestroy：當容器的子元素從容器中移除時是否自動銷毀。
d)
autoExpandColumn：指定自動填充表格剩余區(qū)域的列id
e) autoExpandMax：可自動擴張的最大寬度。
f)
autoExpandMin：可自動擴張的最小寬度
g) autoHeight:自動擴充高度
h) autoShow：是否自動顯示
i)
autoWidth：自動擴充寬度
j) bbar/tbar：底部/頂部狀態(tài)欄
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:表格數(shù)據(jù)集
w) stripeRows：是否顯示分隔線。
x) title：表格標題
方法
a)
getColumnModel()：得到表格列模型
b) getGridEl():得到表格下的元素
c)
getPosition():得到組件的當前位置，返回一個數(shù)組
d) getSelectionModel():得到選中模型
e)
getSize():得到組件大小
f) getStore():得到組件的數(shù)據(jù)集
g)
getView():得到表格的GridView對象。
h) hide():隱藏當前組件
i)
isVisible():判斷當前組件是否顯示
j) setDisabled( Boolean):設(shè)置組件的可用性
k)
un():解除組件的監(jiān)聽
l) on()：為組件添加監(jiān)聽
on ( String eventName, Function
handler, [Object scope] )
eventName:添加監(jiān)聽的名稱
handler:事件處理函數(shù)
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> |
免費注冊
發(fā)表于 2011-12-22 08:54