Ext3.4-EXT之巢狀表格的實現

weixin_34391854發表於2014-03-25
巢狀

其中使用到的"RowExpander.js"為extjs官方示例中自帶的。

實現這個巢狀表格要注意兩點技巧：

1 提供給外層表格的dataStore的資料來源以巢狀陣列的形式表示細節區的資料,如下面的黑體所示。

  
  1. var testData=[
  2.    ["lugreen","男",26,[["數學",100],["語文",150]]]
  3.    ,["lisi","男",25,[["數學",100],["語文",150]]]
  4.    ,["zhangsan","男",27,[["數學",120],["語文",158]]]   
  5. ];

使用陣列集中record物件的json屬性來獲取以細節區資料

  var data=r.json[3];

2 在rowExpander的 expand事件中新增巢狀表格.

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="window.aspx.cs" Inherits="Ext.window" %>

<!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 href="ext-3.4.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-3.4.0/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="ext-3.4.0/ext-all.js" type="text/javascript"></script>
    <script src="ext-3.4.0/examples/ux/RowExpander.js" type="text/javascript"></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) {
                window.testEle = body;
                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 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>
</head>
<body>
    <div id="grid1">
    </div>
    <div id="grid2">
    </div>
</body>
</html>

　　

相關文章