CODEWITHSUNDEEP
imageformsextjsextjs4
Arun V
Arun V

Reputation: 590

ExtJS 4: Image in form field?

I have a form with fields like below:

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

I am trying to display an image in the form based on a value in the loaded record. So, if icon equals 'test.png', then images/icons/test.png should be loaded. Any clues on the best way to do this?

Upvotes: 3

Views: 7041

Answers (1)

Johan Haest
Johan Haest

Reputation: 4431

I'd make a custom field for this, here's a little start code, this won't work yet but sets you in the right direction:

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

Upvotes: 1

Related Questions