今天突然想在Gridpanel的某列上插入超鏈接，實現點擊功能。但是找遍網上的資料，都沒發現合適的。於是就嘗試了很多方法，最終成功了，這里和大家分享下我的成果！原來，有很多技巧其實都需要不斷的創新和發現。
這邊我和大家展示的是部分代碼，Gridpanel中的列，注意加粗紅色的部分。
<ext:GridPanel ID="FileRegGrid" runat="server" Title=">>收文登記列表" StripeRows="true" Height="400"
StoreID="FileInfoStore" AutoExpandColum="list" Margins="10 20 0 20" TrackMouseOver="true">
<ColumnModel ID="ColumnModel" runat="server">
<Columns>
<ext:Column Header="收文編號" width="80" DataIndex="ID" />
<ext:Column Header="檔案題名" width="130" DataIndex="TitleName" />
<ext:Column Header="檔案編號" width="80" DataIndex="TitleID" />
<ext:Column Header="鏈接" Width="80" DataIndex="TitleID">
<Renderer Fn="details"/>
</ext:Column>
<ext:Column Header="檔案狀態" width="130" DataIndex="FilesStatus" />
<ext:Column Header="收文日期" width="80" DataIndex="SystemDateTime">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d H:i:s')" />
</ext:Column>
<ext:Column Header="成文日期" width="80" DataIndex="OnFileDateTime">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d')" />
</ext:Column>
<ext:Column Header="密級" width="80" DataIndex="SecretsLevelName" />
<ext:Column Header="保管期限" width="80" DataIndex="TimeLimit" />
<ext:CommandColumn Width="60" Header="操作" GroupName="Operate">
<Commands>
<ext:GridCommand Icon="Pencil" CommandName="Edit">
<ToolTip Text="編輯" />
</ext:GridCommand>
<ext:GridCommand Icon="Delete" CommandName="Delete">
<ToolTip Text="刪除" />
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
renderer一般用於Grid中對列模型的渲染上 其詳細信息記錄在 Ext.grid.ColumnModel 中的 setRenderer( Number col, Function fn ) 方法里。
renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){}
含有的參數的介紹：
1.value是當前單元格的值。
2.cellmeta里保存的是cellId單元格id，id是列號，css是這個單元格的css樣式。
3.record是這行的所有數據，你想要什么，record.data["id"]這樣就獲得了。
4.rowIndex是行號，不是從頭往下數的意思，而是計算了分頁以后的結果。
5.columnIndex列號。
6.store，這個厲害，實際上這個是你構造表格時候傳遞的ds，也就是說表格里所有的數據，你都可以隨便調用，唉，太厲害了。
（說的不對，請前輩斧正！），這邊的Fn后面的是Js的函數名：
function details(Id) {
var temp = '<a href="Details.aspx?Id={0}" target="_blank" style="color:blue">查看</a>';
return String.format(temp, Id);
}
效果圖：
點擊查看，跳轉頁面，通過地址可以看到，同時傳遞了ID過去，可以做相應的頁面跳轉，獲取id的工作。
接着，我對上面的代碼進行了改進。點擊超鏈接的時候，彈出的是新建的頁面。
function winShow() {
question = confirm("確實要用新窗口打開站點嗎?")
if (question != "0") {
window.open("ZL_IdentifyAdd.aspx", "NewWin", "status=yes, height=400, width=600");
}
}
function details(Id) {
var temp = '<a href="#" onclick="winShow()" style="color:blue">查看</a>';
}
效果圖
彈出提示框，點擊確定，小窗口打開頁面
這是，我又有了新的想法，能不能直接彈出同張頁面上的Window呢，但是之前我就試過Handler="#{window_id}.show()";的方法彈出Window窗口。
於是，我和朋友討論了下，他提供了下思路，我嘗試了下，也成功了。
大致的思路是：還是在列上觸發details的Function。然后在details函數中實現點擊超鏈接跳轉到另一個函數btnClick，btnClick則是實現按鈕的點擊事件。在這之前，要先新建個button控件，設置Hidden=“true”。然后在button的Listener事件中添加具體的Click點擊，通過Handler的方法實現window的彈出事件。有人可能要問，為什么話怎么多的功夫，直接在details函數中實現window的彈出不就可以了，但是我試過發現不行誒(可能有什么方法能實現，希望知道的朋友能指教，這邊小弟先謝過！)。
好了下面就直接上代碼了，這是Button控件，設置Hidden和點擊事件，點擊彈出window，FileReg_win是要彈出的Window的ID：
<ext:Button ID="Link" runat="server" Hidden="true">
<Listeners>
<Click Handler="#{FileReg_win}.show();" />
</Listeners>
</ext:Button>
接下來就是具體的js函數：
function details(Id) {
var temp = '<a href="#" onclick=" btnClick()" style="color:blue">超鏈接</a>';
return String.format(temp, Id);
}
function btnClick() {
document.getElementById("Link").click();
}
這樣，就能實現點擊超鏈接，彈出Window了。還等什么，試試唄！由於是臨時寫的，沒很好的排版整理，大家諒解。