<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid嵌套.aspx.cs" Inherits="YZSoft_Forms_XForm_测试_Grid嵌套" %>

<!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 rel="stylesheet" type="text/css" href="Lib/ExtJs/2_2/resources/css/ext-all.css" />
<script type="text/javascript" src="Lib/ExtJs/2_2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Lib/ExtJs/2_2/ext-all-debug.js"></script>
<script type="text/javascript" src="Lib/ExtJs/2_2/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="Lib/ExtJs/plus/RowExpander.js"></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) {
            //查找 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>
</head>
<body>
<div id="grid1">
  
</div>
<div id="grid2">
  
</div>
</body>
</html>
