Extjs3 grid 嵌套

<%@ 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>
猜你喜欢
