3

以下のようなフィールドを持つフォームがあります。

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ロードする必要があります。これを行う最善の方法の手がかりはありますか？

4

1 に答える 1

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);
    }
});
于 2012-07-06T09:08:12.727 に答える