(较难)行扩展列

<ext:Grid ID="Grid1" runat="server" EnableColumnLines="true" Title="委托单明细" ShowBorder="true"

DataKeyNames="AID,FlowType,FlowNode,SnID,ClientAID" BoxConfigAlign="Stretch" BoxFlex="1" EnableTextSelection="true"
OnSort="Grid1_Sort" AllowSorting="true" OnRowCommand="Grid1_RowCommand" SortField="CreateTime" SortDirection="DESC" EnableMultiSelect="true"DataIDField="AID"

AllowPaging="true" PageSize="20" IsDatabasePaging="true" ClearSelectedRowsAfterPaging="false" OnPageIndexChange="Grid1_PageIndexChange" >

<Columns>
<ext:RowNumberField EnablePagingNumber="true" Width="40" HeaderText="序号"/>
<ext:BoundField runat="server" HtmlEncode="false" Width="100" SortField="FlowName" DataField="FlowName" HeaderText="当前状态" />
<ext:TemplateField ColumnID="expander" RenderAsRowExpander="true" HeaderText="明细">

<ItemTemplate>
</ItemTemplate>
</ext:TemplateField>

 </Columns>

</ext:Grid>

F.ready(function () {
var grid1Cmp = F(grid1);

// 展开行扩展列事件
grid1Cmp.view.on('expandbody', function (rowNode, record, expandRow) {

var tplEl = Ext.get(expandRow).query('.f-grid-tpl')[0];
if (!Ext.String.trim(tplEl.innerHTML)) {

var store = Ext.create('Ext.data.Store', {
fields: ['GYKSnID', 'YSJLSnID', 'ReportSnID', 'GID', 'YID', 'RID'],
proxy: {
type: 'ajax',
url: './SqlDataJsonHandler.ashx?AID=' + record.getId(),
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
},
autoLoad: true,
listeners: {
load: function () {
rowExpandersDoLayout();
}
}
});

var store = Ext.create('Ext.data.Store', {
fields: ['GYKSnID', 'YSJLSnID', 'ReportSnID', 'GID', 'YID', 'RID'],
proxy: {
type: 'ajax',
url: './SqlDataJsonHandler.ashx?AID=' + record.getId(),
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
},
autoLoad: true,
listeners: {
load: function () {
rowExpandersDoLayout();
}
}
});

Ext.create('Ext.grid.Panel', {
renderTo: tplEl,
header: false,
border: true,
draggable: false,
enableDragDrop: false,
enableColumnResize: true,
cls: 'gridinrowexpander',
store: store,
columns: [
{
text: '工艺卡', dataIndex: 'GYKSnID', sortable: false, menuDisabled: true, 300, renderer: function (value, meta, record) {
var link = "<span style='margin-right:10px'><a href=javascript:GetGYKUrl(";
link = link + record.get('GID') + ")>" + record.get('GYKSnID') + "</a></span>";
return link;
}

}, {
text: '原始记录', dataIndex: 'YSJLSnID', sortable: false, menuDisabled: true, 300, renderer: function (value, meta, record) {
return "<span style='margin-right:10px'><a href='#''>" + record.get('YSJLSnID') + "</a></span>";
}
}, {
text: '报告', dataIndex: 'ReportSnID', sortable: false, menuDisabled: true, 300, renderer: function (value, meta, record) {
return "<span style='margin-right:10px'><a href='#''>" + record.get('ReportSnID') + "</a></span>";
}
}]
});
} else {
rowExpandersDoLayout();
}
});

// 折叠行扩展列事件
grid1Cmp.view.on('collapsebody', function (rowNode, record, expandRow) {
rowExpandersDoLayout();
});

});

// 重新布局表格和行扩展列中的表格（解决出现纵向滚动条时的布局问题）
function rowExpandersDoLayout() {
var grid1Cmp = F(grid1);

grid1Cmp.doLayout();

$('.x-grid-item:not(.x-grid-item-collapsed) .gridinrowexpander').each(function () {
var gridInside = F($(this).attr('id'));
gridInside.doLayout();
});
};

function DomUrl(value) {
return "<a href=>" + value + "</a>";
};

function GetGYKUrl(AID) {

F('<%= Window1.ClientID %>').f_show("BGXT_02GYK_ModifyFlow.aspx?AID=" + AID);

};

function GetYSJLUrl(AID) {

F('<%= Window1.ClientID %>').f_show("BGXT_02GYK_ModifyFlow.aspx?AID=" + AID);

};

function GetReportUrl(AID) {

F('<%= Window1.ClientID %>').f_show("BGXT_02GYK_ModifyFlow.aspx?AID=" + AID);

};

<%@ WebHandler Language="C#" Class="SqlDataJsonHandler" %>

using System;
using System.Web;
using Govaze;
using System.Data;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.Serialization.Json;
using System.Text;
using System.Web;
using System.Web.Script.Serialization;
using System.Xml.Linq;

public class SqlDataJsonHandler : IHttpHandler {

public void ProcessRequest(HttpContext context)
{
　　context.Response.ContentType = "text/plain";

　　string AID = context.Request["AID"] != null ? context.Request["AID"].Trim().ToString().Trim().ToString() : null;
　　string outPutMsg = string.Empty;
　　outPutMsg = LoadData(AID);

　　context.Response.Write(outPutMsg);//将处理后的Json数据传出
　　context.Response.End();



}

private string LoadData(string AID)
{
　　XElement xl = new XElement("root", new XElement("Type", "Documents")
　　, new XElement("AID", AID));

　　DataTable dt = Govaze.SQLServerDAL.Factory.getDataXmlDAL().ProcDataTable(xl.ToString(), "DataXmlApplication");
　　string ss = Govaze.SQLServerDAL.Factory.getDataXmlDAL().ToJson(dt);

　　datatable转换为json

　　return ("{data:" + ss + "}");
}

private void Exec(string TypeString, string sp)
{

　　Govaze.SQLServerDAL.Factory.getDataXmlDAL().ExecProc(TypeString, sp);

}

public bool IsReusable
{
　　get
　　{
　　　　return false;
　　}
}
/// <summary>
/// Json反序列化操作
/// 注意：根据前面提供的数据需要小小的字符串处理
/// </summary>
/// <param name="json"></param>
/// <returns></returns>
private List<Documents> JsonDeserialize(string json)
{

　　List<Documents> docu = new List<Documents>();
　　if (!string.IsNullOrEmpty(json))
　　{
　　　　json = json.Replace("'", """);//字符串处理
　　　　DataContractJsonSerializer jsonDeserializer = new DataContractJsonSerializer(typeof(List<Documents>));
　　　　MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(json));
　　　　docu = (List<Documents>)jsonDeserializer.ReadObject(ms);
　　　　}
　　　　return docu;
}

/// <summary>
/// 委托单子表数据
/// </summary>
public class Documents
{

　　public string GYKSnID;
　　public int GID;
　　public string YSJLSnID;
　　public int YID;
　　public string ReportSnID;
　　public int RID;

}

}