Question

我的图片浏览器：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>


    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css">
    <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
    <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-classic/build/ext-theme-classic.js"></script>

    <style>
        .thumbnail {
            padding: 4px;
            background-color: #e6e6e0;
            border: 1px solid #d6d6d0;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
  <script>

      Ext.define('Image', {
          extend: 'Ext.data.Model',
          fields: [
              { name: 'href', type: 'string' },
              { name: 'caption', type: 'string' }
          ]
      });

  var imagesStore = Ext.create('Ext.data.Store', {
          id: 'imagesStore',
          model: 'Image',
          data: [
              { href: 'images/Hydrangeas.jpg',  caption: 'Hydrangeas' },
              { href: 'images/Jellyfish.jpg', caption: 'Jellyfish' },
              { href: 'images/Koala.jpg', caption: 'Koala' },
              { href: 'images/Lighthouse.jpg', caption: 'Lighthouse' }
          ]
      });

      var imageTpl = new Ext.XTemplate(
          '<tpl for=".">',
              '<div class="thumbnail" onClick="javascript:openWindow(this.lightbox);" >',
                '<img src="{href}" width="200px" height="150px" />',
                '<br/><span>{caption}</span>',
              '</div>',
          '</tpl>'
      );

      var sel_thumb_id = 0;

      var thumbs = Ext.create('Ext.view.View', {
          id: 'thumbs',
          store: Ext.data.StoreManager.lookup('imagesStore'),
          tpl: imageTpl,
          itemSelector: 'img',
          emptyText: 'No images available',
          renderTo: document.body,
          listeners: {

          }
      });

      var img = Ext.create('Ext.Img', {
          id:'img',
          src: '',

          shrinkWrap: true
      });

      var next = Ext.create('Ext.Button', {
          xtype: 'button',
          text: 'Next',
          width: 100,
          handler: function () {

              if (img_id < imagesStore.data.items.length ) {
              img_id = img_id + 1;
              var nextSrc = imagesStore.data.items[img_id].data.href;
              console.log(nextSrc);
              Ext.getCmp('img').setSrc(nextSrc);

                }
          }
      });

      var previous = Ext.create('Ext.Button', {
          xtype: 'button',
          text: 'Previous',
          width: 100,
          handler: function () {

              if (img_id > 0) {

                  img_id = img_id - 1;
                  var nextSrc = imagesStore.data.items[img_id].data.href;
                  Ext.getCmp('img').setSrc(nextSrc);
              }
              }
      });

      var lightbox = new Ext.window.Window( {
          id: 'lightbox',
          title: '',
          height: 600,
          width: 800,
          layout: 'fit',
          items: [img],
          modal: true,
          draggable: false,
          dockedItems: [{
              xtype: 'toolbar',
              dock: 'bottom',
              padding: '5 20',
              align: 'center',
              items: [previous, next]
          }],
          closeAction: 'hide',
          resizable: false
      })

      function openWindow(lightbox) {

          img.setSrc('images/Hydrangeas.jpg');
          Ext.getCmp('lightbox').show();
          img_id = 0;
      }

  </script>
</body>

这样，图像存储在文件夹中。现在我想从数据库加载图像。我不是指来自数据库的图像路径，我的意思是图像。我可以使用c＃asmx web服务从数据库中获取图像数据 1）我应该选择在ms sql中存储图像的类型是什么？ 2）如何转换我将从数据库获取的数据并显示为图像？

ExtJS的。从数据库中获取图像

0 个答案: