Extjs4 GridPanel 加载从数据库读取图片（双击图片放大）

Extjs4 GridPanel 加载从数据库读取图片（双击图片放大）

先上效果图：

一、前台js代码：

//显示的gridpanel

var i=1;
var grid1 = Ext.create('Ext.grid.Panel', {
        store: store,
        height: 400,
        title: '河北省主要城市',
        width: 800,
        region: "center",
        plugins: [
                 Ext.create('Ext.grid.plugin.CellEditing', {
                     clicksToEdit: 1 //设置单击单元格编辑  
                 })
        ],
        //selModel: { selType: 'checkboxmodel' },   //选择框
        columns: [
            {
                text: '保定市', align: 'center', columns: [
                    {
                        text: "莲池区", width: 80, dataIndex: '251214', align: 'center', sortable: false
                    },
                    {
                        text: "竞秀区", width: 80, dataIndex: '251215', align: 'center', sortable: false
                    },
                    {
                        text: "满城区", width: 80, dataIndex: '251216', align: 'center', sortable: false
                    },
                    {
                        text: "徐水区", width: 80, dataIndex: '251216', align: 'center', sortable: false
                    },
                    {
                        text: "清苑区", width: 80, dataIndex: '251216', align: 'center', sortable: false
                    }
                ]
            },
            {
                text: '石家庄市', align: 'center', columns: [
                    {
                        text: "新华区", width: 80, dataIndex: '251217', align: 'center', sortable: false
                    },
                    {
                        text: "桥西区", width: 80, dataIndex: '251218', align: 'center', sortable: false
                    },
                    {
                        text: "长安区", width: 80, dataIndex: '251219', align: 'center', sortable: false
                    },
                    {
                        text: "裕华区", width: 80, dataIndex: '251219', align: 'center', sortable: false
                    },
                    {
                        text: "井陉矿区", width: 80, dataIndex: '251219', align: 'center', sortable: false
                    },
                    {
                        text: "藁城区", width: 80, dataIndex: '251219', align: 'center', sortable: false
                    },
                    {
                        text: "鹿泉区", width: 80, dataIndex: '251219', align: 'center', sortable: false
                    },
                    {
                        text: "栾城区", width: 80, dataIndex: '251219', align: 'center', sortable: false
                    }
                ]
            },
            {
                xtype: 'gridcolumn',
                width: 280,
                dataIndex: 'operate',
                text: '地图',
                align: 'center',
                renderer: function (value, metaData, record) {
                    var id = metaData.record.id;//Ext.id();
                    metaData.tdAttr = 'data-qtip="这是宝马"';
                    Ext.defer(function () {
                        Ext.create('Ext.Img', {
                            height: 240,
                            width: 250,
                            src: 'Ashx/colorful/Colorful.ashx?&id=' + value,
                            renderTo: id,
                            listeners: {
                                scope:this,
                                el: {
                                    dblclick: function (e, a) {
                                        var win_Watch = Ext.create('Ext.Window', {
                                            width: 900,
                                            height: 650,
                                            minHeight: 400,
                                            minWidth: 550,
                                            maximizable: true,
                                            title: '图片大图',
                                            layout: "fit",                        //窗口布局类型
                                            modal: true, //是否模态窗口，默认为false
                                            resizable: false,
                                            closeAction: 'hide',
                                            plain: true,
                                            draggable: true,
                                            border: false,
                                            items: [
                                                Ext.create('Ext.Img', {
                                                    height: 890,
                                                    width: 600,
                                                    src: 'Ashx/colorful/Colorful.ashx?&id=' + value
                                                })
                                            ]
                                        });
                                        win_Watch.show();
                                    }
                                }
                            }
                            
                        })
                    }, 50);
                    return Ext.String.format('<div id="{0}"></div>', id);
                },
                listeners: {
                    'cellclick': function () {
                        alert('oooooooooooo');
                    }
                }
            },
            {
                text: ".", width: 0, dataIndex: 'objectn', align: 'center', sortable: false
            }
        ],
        tbar: [
            "-", "当前选择城市:",
            {
                style: 'margin:6px', xtype: 'button', iconCls: "serchopenroomrecord", text: "上一张", handler: function () {
                    i--;
                }
            },
            {
                style: 'margin:6px', xtype: 'button', iconCls: "serchopenroomrecord", text: "下一张", handler: function () {
                    i++;
                    var p = {
                        pId: -1,
                        operate: i
                    };
                    store.insert(0, p);
                }
            }
        ]
    });
//后台代码是用的ashx文件请求图片以字节流输出
<%@ WebHandler Language="C#" Class="Colorful" %>


using System;
using System.Web;
using System.Data.SqlClient;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
public class Colorful : IHttpHandler {
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string id = context.Request.QueryString["id"];
        string Connstr = "data source =(local);initial Catalog=EAlbum;integrated security=sspi;";
        SqlConnection conn = new SqlConnection(Connstr);
        Bitmap bmp = new Bitmap(500, 525);
        try
        {
            conn.Open();
            string mysql = string.Format("select photo from Photos where id={0}", id);
            SqlCommand mycmd = new SqlCommand(mysql, conn);
            byte[] b = (byte[])mycmd.ExecuteScalar();
            MemoryStream ms = new MemoryStream(b, true);
            ms.Write(b, 0, b.Length);
            try
            {
                bmp.Save(ms, ImageFormat.Png);
                context.Response.ClearContent();
                context.Response.ContentType = "image/JPEG";
                context.Response.BinaryWrite(ms.ToArray());
                ms.Close();
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                //显式释放资源 
                bmp.Dispose();
                conn.Close();
            }
        }
        catch (Exception ex)
        {
            //throw ex;
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}