0

我正在尝试为其中一个字段包含图像文件的URL的模型创建Sencha Touch 2表单面板。如果我包含一个文本字段，它将正确显示URL的文本，但我真正想要的是显示在该 URL 找到的图像，我不知道该怎么做。如果我使用，我想我需要一个，并且我不确定如何指定所需的值在表单字段之一中。我的观点是这样的：xtype: imagesrc config

Ext.define("CatalogApp.view.ItemDetailView", {
   extend: "Ext.form.Panel",
   requires: "Ext.form.FieldSet",
   alias: "widget.itemdetailview",
   config:{
      scrollable:'vertical'
   },
   initialize: function ()
   {

      this.callParent(arguments);

      var backButton = {
         xtype: "button",
         ui: "back",
         text: "Home",
         handler: this.onBackButtonTap,
         scope: this
      };

      var topToolbar = {
         xtype: "toolbar",
         docked: "top",
         title: "Item Detail",
         items: [
            backButton
         ]
      };

      var mainLayout = {
         xtype: "container",
         layout: 'hbox',
         items: [
            {
               xtype: 'textfield',
               width: 200,
               name: 'thumbUrl'
            },
            {
               xtype: "fieldset",
               flex: 1,
               items : [
                  {
                     xtype: 'textfield',
                     name: 'itemNbr',
                     label: 'Item Nbr',
                     disabled: true
                  },
                  {
                     xtype: 'textfield',
                     name: 'itemDesc',
                     label: 'Item Desc',
                     disabled: true
                  }
               ]
            }
         ]
      };

      this.add([
         topToolbar,
         mainLayout
      ]);
   },

   onBackButtonTap: function ()
   {
      console.log("backToHomeCommand");
      this.fireEvent("backToHomeCommand", this);
   }

});

如何设置此视图以正确显示图像？

4

1 回答 1

2

您必须定义新的 Sencha 组件：ImageField

Ext.define('Ext.ux.field.ImageField', {
extend: 'Ext.field.Field',
requires: [
    'Ext.Img'
],
xtype: 'imagefield',
config: {
    component: {
        xtype: 'image'
    }
},

updateValue: function(value, oldValue) {
    var me = this,
        component = me.getComponent();

    component.setSrc(value);
},

proxyConfig: {
    width: '100%',
    height: '100%'
}

});

比形式：

Ext.define("CatalogApp.view.ItemDetailView", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.itemdetailview",
config:{
  scrollable:'vertical'
},
initialize: function ()
{

  this.callParent(arguments);

  var backButton = {
     xtype: "button",
     ui: "back",
     text: "Home",
     handler: this.onBackButtonTap,
     scope: this
  };

  var topToolbar = {
     xtype: "toolbar",
     docked: "top",
     title: "Item Detail",
     items: [
        backButton
     ]
  };

  var mainLayout = {
     xtype: "container",
     layout: 'hbox',
     items: [
        {
           xtype: 'imagefield',  // only this change
           width: 200,         
           height: 150,
           name: 'thumbUrl'
        },
        {
           xtype: "fieldset",
           flex: 1,
           items : [
              {
                 xtype: 'textfield',
                 name: 'itemNbr',
                 label: 'Item Nbr',
                 disabled: true
              },
              {
                 xtype: 'textfield',
                 name: 'itemDesc',
                 label: 'Item Desc',
                 disabled: true
              }
           ]
        }
     ]
  };

  this.add([
     topToolbar,
     mainLayout
  ]);
},

onBackButtonTap: function ()
{
   console.log("backToHomeCommand");
   this.fireEvent("backToHomeCommand", this);
}

});

干杯，奥列格

于 2012-07-24T10:16:18.437 回答