<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.tpri.tpri_dmp.config.SystemConfig" %>
<%@ page import="com.tpri.common.util.MenuHelper" %>
<html>
<meta charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<head>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/res/js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/res/js/ext/RowExpander.js"></script>
<%=MenuHelper.getCss()%>
<script type="text/javascript">
var _root = "<%=request.getContextPath()%>";
Ext.QuickTips.init();
var _readonlystyle="background-color:#dfe8f6;background-image: none;";
var _canreadstyle="background-color:#fff;";
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){
//查找 grid
window.testEle=body;
//alert(body.id);
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',width: 130,hideable:false,sortable:false,resizable:true}
,{header: "成绩",dataIndex: 'degrade',width: 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 sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true});
var cm = new Ext.grid.ColumnModel([
expander
,{header: "姓名",dataIndex: 'name',width: 50,hideable:false,sortable:false}
,{header: "性别",dataIndex: 'sex',width: 130,hideable:false,sortable:false,resizable:true}
,{header: "年龄",dataIndex: 'age',width: 130,hideable:false,sortable:false,resizable:true}
]);
var grid = new Ext.grid.GridPanel(
{
id:'testgrid',
store:storeTest,
cm:cm,
renderTo:"grid1",
width:780,
autoHeight:false,
height:300,
listeners:{},
plugins:[expander]
}
);
});
</script>
<style type="text/css">
#div2 h2 {
font-weight:200;
font-size:12px;
}
.c1 h2 {
font-weight:200;
}
</style>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/res/css/tpri_Css_Ext4.css"/>
</head>
<body>
<div id="grid1"></div>
<div id="grid2"></div>
</body>
</html>
Extjs3 grid 嵌套
猜你喜欢
转载自blog.csdn.net/ashou706/article/details/50462355
今日推荐
周排行