var d = new Ext.grid.RowExpander({
???????? tpl : new Ext.XTemplate(
???????? '<div class="detailData">',
???????? '1212',
???????? '</div>'
???????? )
???????? });
??? //这里是添加监听
??? d.on("expand",function(??? d,r,body,rowIndex){

?????? var f = r.data;
??? ?? alert(f);
??? ?? alert(f.sky.name);
??? ?? //查找 grid
??? ??? window.testEle=body;
??? ??? alert(r.json[3]);
??? ?? alert(body.id);
??? ?? if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){
??? ??? ? //alert("a");
??? ??? ? var data=r.json[3];
??? //测试使用内存数据，可以用url取远程数据或者ajax
??? ??? ? 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
??? ??? ?}
??? ?? );
??? ??
??? ?? }
??? });

?

?

//rowexpander.js

?

Ext.grid.RowExpander = function(config){
????? Ext.apply(this, config);

????? this.addEvents({
???????? beforeexpand : true,
???????? expand: true,
???????? beforecollapse: true,
???????? collapse: true
????? });

????? Ext.grid.RowExpander.superclass.constructor.call(this);

????? if(this.tpl){
???????? if(typeof this.tpl == 'string'){
??????????? this.tpl = new Ext.Template(this.tpl);
???????? }
???????? this.tpl.compile();
????? }

????? this.state = {};
????? this.bodyContent = {};
?? };

?? Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
????? header: "",
????? width: 20,
????? sortable: false,
????? fixed:true,
????? menuDisabled:true,
????? dataIndex: '',
????? id: 'expander',
????? lazyRender : true,
????? enableCaching: true,

????? getRowClass : function(record, rowIndex, p, ds){
???????? p.cols = p.cols-1;
???????? var content = this.bodyContent[record.id];
???????? if(!content && !this.lazyRender){
??????????? content = this.getBodyContent(record, rowIndex);
???????? }
???????? if(content){
??????????? p.body = content;
???????? }
???????? return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
????? },

????? init : function(grid){
???????? this.grid = grid;

???????? var view = grid.getView();
???????? view.getRowClass = this.getRowClass.createDelegate(this);

???????? view.enableRowBody = true;

???????? grid.on('render', function(){
??????????? view.mainBody.on('mousedown', this.onMouseDown, this);
???????? }, this);
????? },

????? getBodyContent : function(record, index){
???????? if(!this.enableCaching){
??????????? return this.tpl.apply(record.data);
???????? }
???????? var content = this.bodyContent[record.id];
???????? if(!content){
??????????? content = this.tpl.apply(record.data);
??????????? this.bodyContent[record.id] = content;
???????? }
???????? return content;
????? },

????? onMouseDown : function(e, t){
???????? if(t.className == 'x-grid3-row-expander'){
??????????? e.stopEvent();
??????????? var row = e.getTarget('.x-grid3-row');
??????????? this.toggleRow(row);
???????? }
????