First look at the effect:
The code is as follows:
- <! 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", "Male", 26,[["mathematics", 100],["Chinese", 150]]
- , ["Lisi", "male", 25,[["mathematics", 100],["Chinese", 150]]
- , ["Zhangsan", "Male", 27,[["mathematics", 120],["Chinese", 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) {
- Find 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: "Account", Dataindex: ' Class ', width:130,hideable:false,sortable:false,resizable:true}
- , {header: "Score", 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: "name", Dataindex: ' Name ', width:50,hideable:false,sortable:false}
- , {header: "Gender", Dataindex: ' Sex ', width:130,hideable:false,sortable:false,resizable:true}
- , {header: "Age", Dataindex: ' Ages ', 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>
The "rowexpander.js" used in the ExtJS is included in the official example.
Two tips to implement this nested table:
1 The data source that is provided to the datastore of the outer table represents the data of the detail area in the form of nested arrays, as shown in the following bold.
- var testdata=[
- ["Lugreen", "Male", "a", [["Mathematics", 100],["Chinese", [[] ]]
- , ["Lisi", "male", [["Mathematics", 100],["Chinese", [] ]]
- , ["Zhangsan", "male", [["Mathematics", 120],["Chinese", 158] ]
- ];
Use the JSON property of the Record object in the array set to get the detail area data
var data=r.json[3];
2 Add a nested table to the expand event in Rowexpander.
