ExtJs表格点击超链接获取行的值Word格式.docx
《ExtJs表格点击超链接获取行的值Word格式.docx》由会员分享，可在线阅读，更多相关《ExtJs表格点击超链接获取行的值Word格式.docx（10页珍藏版）》请在冰豆网上搜索。
选择方式如下
varcell=grid.getSelectionNode（）.getSelectedCell（）;
得到的cell记录了当前选择的行（cell[0]）以及列（cell[1]）.可以通过一下语句得到该单元格数据
varcolname=grid.getColumnModel（）.getDataIndex（cell[1]）;
//获取列名
varcelldata=grid.getStore（）.getAt（cell[0]）.get（colname）;
//获取数据
//获取列名
//获取数据
getStore（）:
获取表格的数据集
getAt（）:
获取该数据集cell[0]行
get（）:
获取该行colname的数据
2）为表格增加链接
有时我们需要为表格中的某一列添加一个链接。
可以利用renderer配置属性为该列添加html
如下：
{id:
'
3'
header:
名称'
dataIndex:
name'
renderer:
DomUrl},
定义DomUrl方法
functionDomUrl（value）{
return"
<
ahref=>
"
+value+"
/a>
;
}
functionDomUrl（value）{
如果表格内的数据是一个链接如：
这样写法自然没有问题，但是大多数时候我们在表格中不会直接写一个链接，如果又需要根据单元格内容动态为链接添加几个参数。
那这种写法就几乎没有什么用了。
因为这个属性是在表格初始化的时候定义好的，而且表格初始化之后这个属性无法改变，也就是只读属性。
处理方法如下：
定义一个全局变量，初始值为0；
DomUrl函数如下
varrow=grid.getSelectionModel（）.selectRow（startrow）;
//选中当前行
varrownum=grid.getSelectionModel（）.getSelected（）;
//获取当前行
startrow++;
varstrurl="
abc.jsp?
id="
+rownum.get（'
id'
）;
//获取当前选中行的值，并组织链接字符串
ahref='
+strurl+"
>
//选中当前行
//获取当前行
//获取当前选中行的值，并组织链接字符串
不过不要忘记在下次提交的时候将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（StringeventName,Functionhandler,[Objectscope]）
eventName:
添加监听的名称
handler:
事件处理函数
scope:
事件响应的作用域,包括scope,delay,single,buffer。
----------------------------
%@pagelanguage="
java"
import="
java.util.*"
pageEncoding="
UTF-8"
%>
%
Stringpath=request.getContextPath（）;
StringbasePath=request.getScheme（）+"
:
//"
+request.getServerName（）+"
+request.getServerPort（）+path+"
/"
!
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
html>
<
head>
basehref="
%=basePath%>
title>
MyJSP'
MyJsp.jsp'
startingpage<
/title>
metahttp-equiv="
pragma"
content="
no-cache"
cache-control"
expires"
0"
scripttype="
text/javascript"
src="
%=path%>
/js/ext-base.js"
/script>
/js/ext-all.js"
linkrel="
stylesheet"
type="
text/css"
href="
/resources/css/ext-all.css"
Ext.onReady（function（）{
Ext.QuickTips.init（）;
Ext.state.Manager.setProvider（newExt.state.CookieProvider（））;
varmyData=[
['
3mCo'
71.72,0.02,0.03,'
9/112:
00am'
],
AlcoaInc'
29.01,0.42,1.47,'
AltriaGroupInc'
83.81,0.28,0.34,'
AmericanExpressCompany'
52.55,0.01,0.02,'
AmericanInternationalGroup,Inc.'
64.13,0.31,0.49,'
]
];
functionchange（val）{
if（val>
0）{
return'
spanstyle="
color:
green;
+val+'
/span>
}elseif（val<
red;
}
returnval;
functionpctChange（val）{
%<
varstore=newExt.data.ArrayStore（{
fields:
[
{name:
'
company'
renderer:
getHideValue},
price'
type:
float'
},
change'
pctChange'
lastChange'
date'
dateFormat:
n/jh:
ia'
]
}）;
store.loadData（myData）;
functiongetHideValue（value）
{
return"
ahref=javascript:
show>
vargrid=newExt.grid.GridPanel（{
store:
store,
columns:
id:
header:
Company'
width:
160,
sortable:
true,
dataIndex:
},
p'
Price'
75,
renderer:
usMoney'
Change'
change,
%Change'
pctChange,
LastUpdated'
85,
Ext.util.Format.dateRenderer（'
m/d/Y'
）,
xtype:
actioncolumn'
width:
50,
items:
[{
icon:
resources/delete.gif'
//UseaURLintheiconconfig
tooltip:
Sellstock'
handler:
function（grid,rowIndex,colIndex）{
varrowcount=grid.getSelectionNode（）.getSelections（）;
varrec=store.getAt（rowIndex）;
alert（"
Sell"
+rec.get（'
））;
}]
],
stripeRows:
true,
autoExpandColumn:
height:
350,
600,
title:
ArrayGrid'
stateful:
stateId:
grid'
grid.render（'
grid-example'
functionshow（value）
jj"
/head>
body>
divid='
align="
center"
/div>
/body>
/html>
升级会员 