ExtJS 4: Изображение в поле формы?

Question

У меня есть форма с полями, как показано ниже:

items: [{ 
    fieldLabel: 'Name', 
    name: 'name' 
},{ 
    fieldLabel: 'Description', 
    name: 'description' 
},{ 
    xtype: 'field', 
    fieldLabel: 'Icon', 
    name: 'icon', 
    fieldSubTpl: new Ext.XTemplate('<img src="images/icons/{value}"/>') 
}] 

Я пытаюсь отобразить изображение в виде на основе значения в загруженной записи. Итак, если icon равно 'test.png', то необходимо загрузить images/icons/test.png. Какие-нибудь подсказки о том, как это сделать?

Answer 1

я хотел бы сделать пользовательское поле для этого, вот немного кода начала, это еще не будет работать, но устанавливает вас в правильном направлении:

Ext.define('Ext.ux.field.ImageField', { 
    extend: 'Ext.form.field.Base', 
    alias: 'widget.imagefield', 
    fieldSubTpl: ['<img id="{id}" class="{fieldCls}" src="images/icons/{value}" />', { 
     compiled: true, 
     disableFormats: true 
    }], 

    fieldCls: Ext.baseCSSPrefix + 'form-image-field', 
    value: null, 


    initEvents: function() { 
     this.callParent(); 

     //Adding the click event (can make other events here aswell) 
     this.inputEl.on('click', this._click, this, { 
      delegate: 'img.form-image-field' 
     }); 

    }, 

    setValue: function (v) { 
     var me = this; 
     me.callParent(arguments); 

     //Change ur image value here... 
    }, 

    onRender: function() { 
     var me = this; 
     me.callParent(arguments); 

     var name = me.name || Ext.id(); 

     me.hiddenField = me.inputEl.insertSibling({ 
      tag: 'input', 
      type: 'hidden', 
      name: name 
     }); 

     me.setValue(me.value); 
    }, 

    _click: function (e, o) { 
     this.fireEvent('click', this, e); 
    } 
});