Ext.net在GridPanel中通过链接查看图片 - 苏飞论坛

就此时而言，希望在GridPanel中的一列显示图片，但是考虑到图片会比较大，就采用了给出一个超链接，点击便可以查看

<ext:Store ID="Store1" runat="server" AutoSync="true" ShowWarningOnFailure="false" OnReadData="Store1_Refresh">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id" Name="StoreInfo">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="CATEGORYID" Type="Int" />
<ext:ModelField Name="RECOMMENDEDCATEGORYID" Type="Int" />
<ext:ModelField Name="NAME" Type="String" />
<ext:ModelField Name="ADDRESS" Type="String" />
<ext:ModelField Name="LASTUPDATETIME" Type="Date" />
<ext:ModelField Name="IMAGE" Type="Auto" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

复制代码

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="资料信息"
Margins="0 5 0 0"
MinHeight="300"
Region="Center"
Icon="Application"
StoreID="Store1" >
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="位置编号" DataIndex="LOCATIONID" />
<ext:Column ID="Column2" runat="server" Text="分类编号" Width="75" DataIndex="CATEGORYID" />
<ext:Column ID="Column3" runat="server" Text="推荐分类编号" DataIndex="RECOMMENDEDCATEGORYID" />
<ext:Column ID="Column4" runat="server" Text="名称" DataIndex="NAME" />
<ext:Column ID="Column5" runat="server" Text="地址" DataIndex="ADDRESS" Flex="1" />
<ext:Column ID="Column13" runat="server" Text="最近更新时间" DataIndex="LASTUPDATETIME">
<Renderer Fn="Ext.util.Format.dateRenderer('Y-m-d H:i:s')" />
</ext:Column>
<ext:Column ID="Column14" runat="server" Text="图片" DataIndex="LOCATIONID" Sortable="false">
<PrepareCommand Handler="" Args="grid,command,record,row,col,value" FormatHandler="false">
</PrepareCommand>
<Renderer Fn="ShowLink" />
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single">
<Listeners>
<Select Handler="#{Form}.getForm().loadRecord(record);#{txtHideID}.setValue(record.data.LOCATIONID); " />
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<TopBar>
<ext:Toolbar ID="ToolBarLocation" runat="server">
<Items>
<ext:Button ID="btnViewFav" runat="server" Text="查看收藏" Icon="BookGo">
<DirectEvents>
<Click OnEvent="btnViewFav_Click">
<EventMask Msg="Loading……" MinDelay="500" ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:GridPanel>

复制代码

<script type="text/javascript">
function ShowLink(Id) {
var temp = '<a href="image.ashx?type=img&id=' + Id + '" target="_blank" style="color:#08C; text-decoration:none;">查看图片</a>';
return temp.toString();
}
</script>

复制代码

public class image : IHttpHandler
{
//设置格式（图片／文本等，不然会出现乱码，代码略）
public void ProcessRequest(HttpContext context)
{
if (context.Request["id"] == null )
{
context.Response.Write("读取错误，没有可读取资源…… ");
return;
}
int intID = int.Parse(context.Request["id"]);
WCFService.Service1 wcfService = new WCFService.Service1();
context.Response.BinaryWrite((byte[])wcfService.GetImage(intID));
}
public bool IsReusable
{
get
{
return false;
}
}
}

复制代码

最后附上简要说明：
Store的数据在后台绑定的Wcf端返回的json数据。GridPanel使用Store1.当加载数据的时候 <Renderer Fn="ShowLink" />

指向了js部分的 ShowLink 的方法。返回了一个超链接。超链接链接到了一般处理文件，一般处理文件写出的是一个二进制流

形式的图片文件（注意设置编码），能给显示在页面。这样就实现了点击链接显示查看图片的功能了。当然，要实现把图片显示在GridPanel中

也是可以的。只要修改javascript 部分可以实现。
发表的个人浅见，因为接触Ext.net不久，有错误之处请指正，共同学习。