RowExpander是Extjs中grid的一个插件,可以在一行下再展现数据。实现了非常方便的parent-detail的效果。
1.加入mousedown事件处理
if (Ext.ux.grid.RowExpander) {
Ext.apply(Ext.ux.grid.RowExpander.prototype, {
getDataFn : null,
onMouseDown : function(e, t) {
if (t.className == 'x-grid3-row-expander') {
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
var viewRow = row;
if (typeof viewRow == 'number') {
viewRow = this.grid.view.getRow(viewRow);
}
var record = this.grid.store
.getAt(viewRow.rowIndex);
if (!record.data.checkSignerInvoicess) {
var mark= new Ext.LoadMask(Ext.getBody(), {
msg : 'Loading data...',
removeMask : true
});
mk.show();
this.getDataFn (record, this,
function(expander) {
// 展开该行
expander.toggleRow(viewRow.rowIndex);
mark.hide();
});
return;
}
this.toggleRow(row);
}
}
});
}
2.制作获取数据函数
function GetInvoices(record, expander, callback) {
Ext.Ajax.request( {
url : 'getDetailInvoices.json',
params : {
'chkNo' : record.data.chkNo,
'vendorNo' : record.data.vendNo
},
success : function(response) {
var data = Ext.decode(response.responseText);
if (!data.success) {
showError(data.message, checkBooks);
return true;
}
// 设置模板中所需要的record数据,并展开该行
record.data.checkSignerInvoicess = data.records;
record.commit();
if (callback) {
callback(expander);// 一定要回调该函数,否则不能展开
}
},
failure : function() {
if (callback) {
callback(expander);
}
}
})
}
;
3.制作expander
var expander = new Ext.ux.grid.RowExpander(
{
tpl : new Ext.XTemplate(
'<div class="x-grid-group-title" style="margin-left:10%">',
'<table class="x-grid3-row-table" cellspacing="0" cellpadding="0" border="0" >',
'<thead>',
' <tr class="x-grid3-hd-row"><td class="x-grid3-hd x-grid3-cell x-grid3-td-11" >seqNo</td> <td class="x-grid3-hd x-grid3-cell x-grid3-td-11" >status</td> <td class="x-grid3-hd x-grid3-cell x-grid3-td-11" >amt</td> <td class="x-grid3-hd x-grid3-cell x-grid3-td-11" >discAmt</td> <td class="x-grid3-hd x-grid3-cell x-grid3-td-11" >payAmt</td> <td class="x-grid3-hd x-grid3-cell x-grid3-td-11" >vendNo</td> <td class="x-grid3-hd x-grid3-cell x-grid3-td-11" >cashAcctCurrCd</td> <td class="x-grid3-hd x-grid3-cell x-grid3-td-11" >altVendNo</td> </tr>',
'</thead>',
'<tpl for="checkSignerInvoicess">',
'<tr><td>{seqNo}</td> <td>{status}</td> <td>{amt}</td> <td>{discAmt}</td> <td>{payAmt}</td> <td>{vendNo}</td> <td>{cashAcctCurrCd}</td> <td>{altVendNo}</td></tr>',
'</tpl>', '</table>', '</div>'),
lazyRender : true,
getDataFn : GetInvoices
// 注册回调函数
});
4.使用expand
//column中
var columns = new Ext.grid.ColumnModel( [
new Ext.grid.RowNumberer(), sm, expander, {
//grid中
var grid = new Ext.grid.GridPanel( {
title : 'Payment Information',
renderTo : 'my-tabs',
store : initalStore,
cm : columns,
sm : sm,
plugins : expander,
5.效果
- 大小: 101.1 KB
分享到:
相关推荐
语言程序设计资料:ExtJs学习笔记-2积分.doc
extjs-theme-bootstrap-master.zip
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
在家研究了一下extjs异步树,-每个节点都异步加载-前后台代码都有-附整个工程-运行通过-前台代码请看doctree.js,后台代码请看TreeService.java,运行环境:Myeclipse6.5+tomcat7.0.27
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
ExtJS----HelloWorld程序源码
ExtJS快速入门--传智播客--蔡世友
Extjs4---combobox省市区三级联动+struts2
EXTJS4 类似于bootstrap的主题
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
Extjs4---grid的修改、删除功能---结合struts2、hibernate
extjs-7.0.0-gpl
Extjs4--Form登录功能,结合struts2
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等
Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个单一的公共平台。这样,数据和逻辑就能共享,从而帮助开发人员进一步去优化他们的应用程序...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
ExtJS-4.2.2-gpl.rar完整版,包含源码,示例,api,文档
extjs-developer-guide-zh,比较不错的文档