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

来源：互联网发布：linux显示绝对路径编辑：程序博客网时间：2024/06/05 20:38
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;        }    }}
0 0