<!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" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/RowExpander.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';</script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<style>
.x-grid2-row {
cursor: pointer;
border: 10px solid;
width:100%;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
var expander = new Ext.grid.RowExpander({
lazyRender: false,
getBodyContent: function () {
return '';
},
getRowClass: function () {
var cls = Ext.grid.RowExpander.prototype.getRowClass.apply(this, arguments);
return 'main-row ' + cls;
},
listeners: {
expand: function (expander, r, body, rowIndex) {
console.log(r.get('grade'));
if (!r.grid) {
r.grid = new Ext.grid.GridPanel({
store: new Ext.data.SimpleStore({
fields: ["class", "degrade"],
data: r.get('grade')
}),
columns: [{
header: "Major",
dataindex: 'class',
width: 130,
hideable: false,
sortable: false,
resizable: true
},
{
header: "Note",
dataIndex: 'degrade',
width: 130,
hideable: false,
sortable: false,
resizable: true
}],
renderTo: body,
autoHeight: true
});
}
}
}
});
var grid2 = new Ext.grid.GridPanel({
id: 'testgrid',
store: new Ext.data.SimpleStore({
fields: ["name", "sex", "age", "grade"],
data: [
["lugreen", "M", 26, [
["Math", 100]
]],
["lisi", "M", 25, [
["Math", 100],
["CH", 150]
]],
["zhangsan", "M", 27, [
["Math", 120],
["CH", 158]
]]
]
}),
columns: [
expander, {
header: "Nom",
dataIndex: 'name',
width: 50,
hideable: false,
sortable: false
},
{
header: "Sex",
dataIndex: 'sex',
width: 130,
hideable: false,
sortable: false,
resizable: true
},
{
header: "Age",
dataIndex: 'age',
width: 130,
hideable: false,
sortable: false,
resizable: true
}],
renderTo: "grid1",
width: 780,
height: 300,
plugins: [expander],
viewConfig: {
forceFit: true,
rowSelector: 'div.main-row',
rowSelectorDepth: 20
}
});
})
</script>
</head>
<body>
<div id="grid1">
</div>
</body>
</html> |
發表於 2010-6-12 16:14
| 
發表於 2010-6-14 21:54
|