ExtJs表格点击超链接获取行的值.docx

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">

">

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"）;

}