UAS2.0_DEV_TEST/ux/form/field/ImgField.js

Ext.define('Ext.ux.form.field.ImgField', {
    extend: 'Ext.form.FieldContainer',
    alias: 'widget.imgfield',

    layout: "hbox",
    defaults: {
        hideLabel: true
    },
    isFormField: true,
    defaultBindProperty: 'value',
    cls: 'remoteimg-field',

    initComponent: function () {
        var me = this;

        Ext.apply(me, {
            items: [{
                xtype: 'hidden',
                name: 'imgPath'
            }, {
                xtype: 'image',
                height: 170,
                width: 135,
                hidden: true,
                src: '',
                style: {
                    'background-color': '#e6dede'
                }
            }, {
                xtype: 'filefield',
                name: 'file',
                cls: 'upload-bth',
                height: 170,
                width: 135,
                buttonText: '上传头像',
                buttonOnly: true,
                hideLabel: true,
                // hidden: true,
                buttonConfig: {
                    cls: 'x-filefield-button'
                },
                listeners: {
                    change: function (field) {
                        if (!!field.value) {
                            me.upload(field);
                        }
                    }
                }
            }, {
                xtype: 'component',
                cls: 'tool-bar',
                hidden: true,
                html: '<div class="tools"><span title="放大" class="tool enlarge x-fa fa-expand"></span><span title="删除" class="tool delete font-uas u-delete"></span></div>',
                listeners: {
                    boxready: function(component) {
                        component.el.dom.onclick = function() {
                            if(event.target.classList.contains('enlarge')) {
                                me.enlargeImg();
                            }else if(event.target.classList.contains('delete')) {
                                me.deleteImg();
                            }
                        };
                    }
                }
            }]
        });

        me.callParent(arguments);
    },

    listeners: {
        boxready: function(container, width, height, e) {
            container.el.dom.onmouseenter = function() {
                if(container.items.items[1].isVisible()) {
                    container.items.items[3].setHidden(false);
                }
            };
            container.el.dom.onmouseleave = function() {
                if(container.items.items[1].isVisible()) {
                    container.items.items[3].setHidden(true);
                }
            }
        }
    },

    setValue: function(v) {
        var me = this,
        items = me.items.items,
        imgPath = items[0],
        img = items[1],
        fileField = items[2];

        if(!!v) {
            imgPath.setValue(v);
            img.setSrc(v);
            img.setHidden(false);
            fileField.setHidden(true);
        }

        me.publishState('value', v);
    },

    getValue: function() {
        return this.items.items[0].value;
    },

    getValueField: function () {
        return this.items.items[0];
    },

    isValid: function () {
        return this.getValueField().isValid();
    },

    isDirty: function () {
        return this.getValueField().isDirty();
    },

    setReadOnly: function (val) {
        var me = this,
        items = me.items.items,
        imgPath = items[0],
        fileField = items[2];

        imgPath.setReadOnly(val);
        fileField.button.setDisabled(val);
    },

    resetOriginalValue: function() {
		this.getValueField().resetOriginalValue();
	},

    /**
     * 上传附件
     */
    upload: function (field) {
        var me = this;
        var fd = new FormData();
        fd.append('file', field.fileInputEl.dom.files[0]);
        fd.append('folderId', 0);
        me.setLoading(true);
        Ext.Ajax.request({
            // url: 'http://10.1.80.101:9520/api/file/upload', //这里是填写需要跨域访问的URL
            url: '/api/file/upload',//这里是填写需要跨域访问的URL
            cors: true,
			useDefaultXhrHeader: false,
			method: 'post',
			rawData: fd,
			headers: {
				// 'Access-Control-Allow-Origin': '*',
				// 'Authorization':  uas.util.State.get('session').token,
				//"Content-Type": 'multipart/form-data'  //文件上传的格式， 
				"Content-Type":null
			},
            success: function (response, opts) {
                me.setLoading(false);
                var res = Ext.decode(response.responseText);
                if (res.success) {
                    var data = res.data,
                    accessPath = Ext.manifest.server.nodeServer.basePath + 
                        '/file/download?filename='+data.name+'&path='+data.path+'&size='+data.size;

                    me.setValue(accessPath);
                } else {
                    console.error('failure', res);
                }
            },
            failure: function (response, opts) {
                me.setLoading(false);
                console.error('failure', res);
            }
        });
    },

    enlargeImg: function() {
        var me = this;
        var win = Ext.getCmp('enlarge-win');
        if(!win) {
            win = Ext.create('Ext.window.Window', {
                width: 350,
                height: 400,
                layout: 'fit',
                items: [{
                    xtype: 'image',
                    src: me.getValue()
                }]
            });
        }
        win.show();
    },

    deleteImg: function() {
        var me = this,
        items = me.items.items,
        imgPath = items[0],
        img = items[1],
        fileField = items[2];
        console.log("delete");
        // Ext.showConfirm('确认删除', '是否确认删除该头像？')
        // .then(function(yes) {
        //     if(yes == 'yes') {
        //         imgPath.setValue(null);
        //         img.setSrc(null);
        //         fileField.reset();
        //         fileField.setHidden(false);
        //         img.setHidden(true);
        
        //         me.publishState('value', null);
        //     }
        // });
    }

});