ExtJs表格点击超链接获取行的值.docx
《ExtJs表格点击超链接获取行的值.docx》由会员分享，可在线阅读，更多相关《ExtJs表格点击超链接获取行的值.docx（10页珍藏版）》请在冰豆网上搜索。
ExtJs表格点击超链接获取行的值
ExtJs表格点击超链接获取行的值
grid双击事件，并取得单元格的值，以上我试了下恍如不行，最终我如此写了
grid.addListener（'rowdblclick',function（sm,rowIndex,e）{
varselectionModel=grid.getSelectionModel（）;
varrecord=selectionModel.getSelected（）;
alert（record.data['UserName']）;
}）;
menuDisabled:
true表示单列不可排序
enableHenu:
true所有列不可排序
renderer:
function（v）
{
returnv.link（v）;
}
ExtJs表格
2009年11月09日星期一00:
48
行选择模式：
Js代码
varrowcount=grid.getSelectionNode（）.getSelections（）;
varrowcount=grid.getSelectionNode（）.getSelections（）;
可以获取全部选中的记录，得到的rowcount将是一个Array，比如想获取sex列的数据，语句如下
Js代码
varstrsex=rowcount[i].get（‘sex’）;
varstrsex=rowcount[i].get（‘sex’）;
单元格选择模式
如果在GridPanel的配置属性增加sm属性如下
Js代码
sm:
newExt.grid.CellSelectionModel（）;
sm:
newExt.grid.CellSelectionModel（）;
则表格的选择模式为单元格选择模式。
当单击时将选中对应的某一个单元格，而不是默认的选择某一行。
选择方式如下
Js代码
varcell=grid.getSelectionNode（）.getSelectedCell（）;
varcell=grid.getSelectionNode（）.getSelectedCell（）;
得到的cell记录了当前选择的行（cell[0]）以及列（cell[1]）.可以通过一下语句得到该单元格数据
Js代码
varcolname=grid.getColumnModel（）.getDataIndex（cell[1]）;//获取列名
varcelldata=grid.getStore（）.getAt（cell[0]）.get（colname）;//获取数据
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方法
Js代码
functionDomUrl（value）{
return""+value+"";
}
functionDomUrl（value）{
return""+value+"";
}
如果表格内的数据是一个链接如：
这样写法自然没有问题，但是大多数时候我们在表格中不会直接写一个链接，如果又需要根据单元格内容动态为链接添加几个参数。
那这种写法就几乎没有什么用了。
因为这个属性是在表格初始化的时候定义好的，而且表格初始化之后这个属性无法改变，也就是只读属性。
处理方法如下：
定义一个全局变量，初始值为0；DomUrl函数如下
Js代码
functionDomUrl（value）{
varrow=grid.getSelectionModel（）.selectRow（startrow）;//选中当前行
varrownum=grid.getSelectionModel（）.getSelected（）;//获取当前行
startrow++;
varstrurl="abc.jsp?
id="+rownum.get（'id'）;//获取当前选中行的值，并组织链接字符串
return""+value+"";
}
functionDomUrl（value）{
varrow=grid.getSelectionModel（）.selectRow（startrow）;//选中当前行
varrownum=grid.getSelectionModel（）.getSelected（）;//获取当前行
startrow++;
varstrurl="abc.jsp?
id="+rownum.get（'id'）;//获取当前选中行的值，并组织链接字符串
return""+value+"";
}
不过不要忘记在下次提交的时候将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">
">
MyJSP'MyJsp.jsp'startingpage
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,'9/112:
00am'],
['AltriaGroupInc',83.81,0.28,0.34,'9/112:
00am'],
['AmericanExpressCompany',52.55,0.01,0.02,'9/112:
00am'],
['AmericanInternationalGroup,Inc.',64.13,0.31,0.49,'9/112:
00am']
];
functionchange（val）{
if（val>0）{
return'green;">'+val+'';
}elseif（val<0）{
return'red;">'+val+'';
}
returnval;
}
functionpctChange（val）{
if（val>0）{
return'green;">'+val+'%';
}elseif（val<0）{
return'red;">'+val+'%';
}
returnval;
}
varstore=newExt.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/jh:
ia'}
]
}）;
store.loadData（myData）;
functiongetHideValue（value）
{
return"show>"
}
vargrid=newExt.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:
'LastUpdated',
width:
85,
sortable:
true,
renderer:
Ext.util.Format.dateRenderer（'m/d/Y'）,
dataIndex:
'lastChange'
},
{
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（'company'））;
}
}]
}
],
stripeRows:
true,
autoExpandColumn:
'company',
height:
350,
width:
600,
title:
'ArrayGrid',
stateful:
true,
stateId:
'grid'
}）;
grid.render（'grid-example'）;
}）;
functionshow（value）
{
alert（"jj"）;
}
升级会员 