其中使用到的"RowExpander.js"为extjs官方示例中自带的。
实现这个嵌套表格要注意两点技巧：
1 提供给外层表格的dataStore的数据源以嵌套数组的形式表示细节区的数据,如下面的黑体所示。
- var testData=[
- ["lugreen","男",26,[["数学",100],["语文",150]]]
- ,["lisi","男",25,[["数学",100],["语文",150]]]
- ,["zhangsan","男",27,[["数学",120],["语文",158]]]
- ];
使用数组集中record对象的json属性来获取以细节区数据
var data=r.json[3];
2 在rowExpander的 expand事件中添加嵌套表格.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="window.aspx.cs" Inherits="Ext.window" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
</script>
<link href="ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="ext-3.4.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.4.0/ext-all.js" type="text/javascript"></script>
<script src="ext-3.4.0/examples/ux/RowExpander.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var testData = [["lugreen", "男", 26, [["数学", 100], ["语文", 150]]],
["lisi", "男", 25, [["数学", 100], ["语文", 150]]],
["zhangsan", "男", 27, [["数学", 120], ["语文", 158]]]];
storeTest = new Ext.data.SimpleStore({
fields: ["name", "sex", "age", "grade"],
data: testData
});
var expander = new Ext.grid.RowExpander({ tpl: new Ext.XTemplate('<div class="detailData">', '', '</div>') });
expander.on("expand", function (expander, r, body, rowIndex) {
window.testEle = body;
if (Ext.DomQuery.select("div.x-panel-bwrap", body).length == 0) {
//alert("a");
var data = r.json[3];
var store = new Ext.data.SimpleStore({
fields: ["class", "degrade"],
data: data
});
var cm = new Ext.grid.ColumnModel([{
header: "科目",
dataIndex: 'class',
130,
hideable: false,
sortable: false,
resizable: true
},
{
header: "成绩",
dataIndex: 'degrade',
130,
hideable: false,
sortable: false,
resizable: true
}]);
Ext.DomQuery.select("div.detailData")[0];
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
renderTo: Ext.DomQuery.select("div.detailData", body)[0],
autoWidth: true,
autoHeight: true
});
}
});
var cm = new Ext.grid.ColumnModel([expander,
{ header: "姓名", dataIndex: 'name', 50, hideable: false, sortable: false },
{ header: "性别", dataIndex: 'sex', 130, hideable: false, sortable: false, resizable: true },
{ header: "年龄", dataIndex: 'age', 130, hideable: false, sortable: false, resizable: true }
]);
var grid = new Ext.grid.GridPanel({
id: 'testgrid',
store: storeTest,
cm: cm,
renderTo: "grid1",
780,
autoHeight: false,
height: 300,
listeners: {},
plugins: [expander]
});
});
</script>
</head>
<body>
<div id="grid1">
</div>
<div id="grid2">
</div>
</body>
</html>