【openlayer2】EXT中通过Store获取图片相对路径并动态显示图片

背景

–openlayer2+EXT+postgresql
–目标：从数据库中获取图片相对路径，并打开相应图片

获取数据库信息

从数据库中获取数据库某表格对应的一行（若干列）的信息，

 var pointsStore = new Ext.data.Store({
                fields: [{ name: 'XZQMC' },
                        { name: 'lon' },
                        { name: 'lat' },
                        {name:'src'}
                ]
            });
            function findLocation() {
                LocationText = Ext.getCmp("LocationText").getRawValue();
                if (Ext.util.Format.trim(LocationText) == "") {
                    Ext.Msg.alert("提示", "示例不能为空");
                    return;
                }
                Ext.Ajax.request({
                    url: "location.ashx?LocationText=" + LocationText, //拿到的变量发送到后台                 
                    method: "get",
                    success: function (response) {//后台返回结果
                        var getData = response.responseText; //获取服务器数据                     
                        if (getData != "") {
                            console.log("查询二类测量数据" + JSON.stringify(getData));
                            pointData = eval(getData); //将json字符串转换为array
                            pointsStore.removeAll();//可能查询另外一个，所以要先清空
                            pointsStore.loadData(pointData);
                        } else {
                            Ext.Msg.alert("警告", "查询失败！");
                        }
                    },
                    failure: function (response, options) {
                        Ext.Msg.alert("失败");
                    }
                });//Ajax
            }//function

上述代码中，通过 console.log("查询二类测量数据" + JSON.stringify(getData));这句可以在前端看到返回了一行信息（如下），说明已经从数据库中得到了包括图片相对路径的数据库信息。

查询二类测量数据"[{“XZQMC”:'二类测量成果示例
',“lon”:116.0638189,“lat”:35.28296,“src”:'resources/production/sdELCLTB.jpg '}]"

得到数据库中某行信息

目前已经得到了一行数据，那现在要解决的就是从得到的一行信息中单独获得图片相对路径，即得到name为“src”的信息。

 var sdsrc;
 pointsStore.each(function (record) { sdsrc=record.get('src') })
  console.log("查询二类测量数据" + JSON.stringify(sdsrc));

ajax请求全部代码：

            var sdsrc;//从数据库中获得的二类测量图片地址
            function findLocation() {
                LocationText = Ext.getCmp("LocationText").getRawValue();
                if (Ext.util.Format.trim(LocationText) == "") {
                    Ext.Msg.alert("提示", "示例选择不能为空");
                    return;
                }
                Ext.Ajax.request({
                    url: "location.ashx?LocationText=" + LocationText, //拿到的变量发送到后台                 
                    method: "get",
                    success: function (response) {//后台返回结果
                        var getData = response.responseText; //获取服务器数据                     
                        if (getData != "") {
                            console.log("查询二类测量数据" + JSON.stringify(getData));//测试前端返回字段
                            pointData = eval(getData); //将json字符串转换为array
                            pointsStore.removeAll();//可能查询另外一个，所以要先清空
                            pointsStore.loadData(pointData);
                            pointsStore.each(function (record) { sdsrc = record.get('src') })//得到单独图片相对路径
                        } else {
                            Ext.Msg.alert("警告", "查询失败！");
                        }
                    },
                    failure: function (response, options) {
                        Ext.Msg.alert("失败");
                    }
                });//Ajax
            }//function

以上可以得到前端返回信息

查询二类测量数据"resources/production/sdELCLTB.jpg "

加载图片

在对应的按钮中添加事件：将图片放在window窗口中，通过src：sdsrc得到加载数据的相对路径，从而实现加载图片

 handler: function () {
   sdWindow =  Ext.create('Ext.Window', {
   layout: "fit",
   border: true,
   constrain: true, //将窗体约束到可见区域
   maximizable: true,
   width: 720,
   height: 650,
   items: [
   Ext.create('Ext.Img',
    {
       layout: "fit",
       style: 'object-fit: contain',//整个对象在填充盒子的同时保留其长宽比
       src: sdsrc,
       renderTo: Ext.getBody()
            })
         ]
       });
      sdWindow.show();
     }