1

我正在 Ext JS 4 中创建一个应用程序，但我被卡住了，因为我需要一个包含图像的类以用于表单或字段集 （如常规文本字段）；此外，图像将根据传递给表单的值而变化。类似于imagefield的东西：

Ext.define('Properties', {
        extend : 'Ext.form.Panel',
        alias : 'properties',
        bodyPadding: 5,
        // The fields
        defaultType: 'textfield',
            items: [{
            fieldLabel: 'Device Name',
            name: 'deviceName'
        },
        {
            xtype:'imagefield',
            fieldLabel: 'Status',
            name: 'status'
        }
        ],.......

我试图扩展Ext.form.field.Base没有任何成功。有人可以帮助我吗？

谢谢你。

4

1 回答 1

4

有Ext.Image你可以使用的类。但是您可能需要将其包装成某种边框并添加逻辑以在运行时加载特定图像。如果你愿意，我可以在今天晚些时候发布一些代码。

更新：我做了这样的事情：

Ext.define('QP.view.base.ImageContainer', {
    extend: 'Ext.container.Container',
    alias: 'widget.baseimagecontainer',

    NO_IMAGE_FILE:  'resources/images/no_image.png',
    DOWNLOAD_URL:   '/Image/',
    UPLOAD_URL:     '/UploadImage',
    CLEAR_URL:  '/ClearImage/',

    width: 205,
    layout: 'hbox',

    initComponent: function() {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'fieldset',
                itemId: 'imageWrapper',
                title: 'Image',
                width: 122,
                height: 140,
                margin: '0 0 0 0',
                layout: 'anchor',
                items: [{
                    xtype: 'image',
                    itemId: 'image',
                    maxWidth: 100,
                    maxHeight: 100
                }]
            }, {
                xtype: 'container',
                margin: '4 0 0 5',
                layout: 'anchor',
                defaults: {
                    xtype: 'button',
                    width: 70,
                    margin: '0 0 5 0'
                },
                items: [{
                    itemId: 'clearButton',
                    text: 'Clear',
                    handler: function() {
                        me.clearImage();
                    }
                }, {
                    xtype: 'fileuploadfield',
                    buttonOnly: true,
                    hideLabel: true,
                    itemId: 'uploadButton',
                    buttonText: 'Upload...',
                    buttonConfig: { width: 70 },
                    listeners: {
                        change: function(el, val) { 
                            // this.up('window').fireEvent('uploadimage', fb, v);
                            me.uploadImage(el, val);
                        }
                    }
                }, {
                    itemId: 'fullResButton',
                    text: 'Download',
                    handler: function() { 
                        window.open(me.fullImagePath);
                    }
                }]
            }]
        });

        me.callParent(arguments);
    },

    success: function() {
        var me = this,
            fs = me.down('[itemId=imageWrapper]'),
            b1 = me.down('[itemId=clearButton]'),
            b2 = me.down('[itemId=fullResButton]');

        fs.enable();
        b1.enable();
        b2.enable();
    },

    loadImage: function(recordId) {
        var me = this,
            fs = me.down('[itemId=imageWrapper]'),
            b1 = me.down('[itemId=fullResButton]'),
            b2 = me.down('[itemId=clearButton]'),
            img = me.down('image');

        me.fullImagePath = me.DOWNLOAD_URL + '/' +recordId;
        me.imageRecordId = recordId;

        fs.disable();
        b1.disable();
        b2.disable();

        img.getEl().on('load', me.success, me, { single: true });
        img.getEl().on('error', function() { 

            img.getEl().un('load', me.success, me);
            img.setSrc(me.NO_IMAGE_FILE);
            fs.enable();

        }, me, { single: true });

        img.setSrc(me.DOWNLOAD_URL + '/' +recordId);
    },

    uploadImage: function(el, val) {
        var me = this,
            fm = Ext.create('Ext.form.Panel', {
                items: [ el ]
            }),
            f = fm.getForm();

        f.submit({
            method: 'POST',
            params: {
                recordId: me.imageRecordId 
            },
            url: me.UPLOAD_URL,
            waitMsg: 'Uploading your image...',
            success: function(fp, o) {
                me.loadImage(me.imageLocation, me.imageRecordId);
            },
            failure: function(fp, o) {
                console.log('upload failed', fp, o);
            }
        });
    },

    clearImage: function() {
        var me = this;

        QP.util.Msg.askConfirmation('Are you sure you want to delete an image?', function() {
            Ext.Ajax.request({
                method: 'GET',
                url: me.CLEAR_URL + me.imageLocation + '/' + me.imageRecordId,
                success: function(fp, o) { me.loadImage(me.imageLocation, me.imageRecordId); },
                failure: function(fp, o) { console.log('upload failed', fp, o); }
            });
        }, me);
    }


});
于 2012-06-07T12:54:04.663 回答