0

フィールドの 1 つに画像ファイルへのURLが含まれているモデルのSencha Touch 2フォーム パネルを作成しようとしています。テキストフィールドを含めると、 URLのテキストが正しく表示されますが、本当に必要なのはその URL で見つかった画像を表示することであり、その方法がわかりません。を使用する場合、 が必要だと思いますが、目的の値がフォーム フィールドの 1 つにあることを指定する方法がわかりません。私の見解は次のようになります。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 に答える