<%@ 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 嵌套
最新推荐文章于 2023-05-30 22:39:29 发布