image - 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);
    }
});