圖像窗體字段Sencha Touch 2

Question

我正在嘗試創建一個Sencha Touch 2窗體面板，其中一個字段包含URL到圖像文件。如果我包含文本框，它會正確顯示網址的文本，但我真正想要的是以顯示在該網址處找到的圖像，我不知道該怎麼做。如果我使用xtype: image，我認爲我需要一個src 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); 
    } 

}); 

如何設置此視圖以正確顯示圖像？

Answer 1

你必須定義新的煎茶組件：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); 
} 

}); 

乾杯，奧列格