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}"/>')
}]

我正在尝试根据加载的记录中的值在表单中显示图像。因此，如果iconequals '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);
    }
});