Ext.net在GridPanel中通过链接查看图片

最近在搞有关Ext.net+wcf的项目。遇到了很多问题，因为初次接触，也解决了不少的问题。有点小的细节的东西记录下来。

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

图片。附上图片以及示例代码：

1.Store
<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>

2.GridPanel

<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>

3.javascript

<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>

4.一般处理文件（image.ashx）

 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两个星期，有错误之处请指正，共同学习。