extjs4 扩写htmledit 增加上传图片功能

Ext.define('Ext.ux.form.MyEditor', {
 
    alias: 'widget.myeditor',
 
    extend: 'Ext.form.field.HtmlEditor',
 
    requires: ['Ext.form.field.HtmlEditor'],
 
    createToolbar: function(){
        var me = this;
        me.callParent(arguments);
        me.toolbar.insert(17, {
            xtype: 'button',
            icon: '/admin/extjs/resources/images/picture.png',
            handler: this.showImgUploader,
            scope: this
        });
        return me.toolbar;
    },
 
    showImgUploader: function(){
        var editor = this;
        var imgform = Ext.create('Ext.tab.Panel', {
            region: 'left',
            border: false,
            activeTab: 0,
            items: [{
                title: '本地图片',
                icon: 'extjs/resources/images/computer.png',
                layout: 'fit',
                items: [{
                    xtype: 'form',
                    border: false,
                    bodyPadding:10,
                    items: [{
                        xtype: 'filefield',
                        labelWidth: 70,
                        fieldLabel: '图片',
                        buttonText: '浏览',
                        name: 'pic',
                        allowBlank: false,
                        blankText: '文件不能为空',
                        anchor: '100%'
                    }, {
                        xtype: 'textfield',
                        labelWidth: 70,
                        fieldLabel: '标题',
                        name: 'title',
                        allowBlank: false,
                        blankText: '标题不能为空',
                        anchor: '100%'
                    }, {
                        layout: 'column',
                        border: false,
                        items: [{
                            layout: 'form',
                            columnWidth:.36,
                            xtype: 'numberfield',
                            labelWidth: 70,
                            fieldLabel: '尺寸(宽x高)',
                            name: 'width'
                        },{
                            columnWidth:.05,
                            xtype: 'label',
                            html: ' px'
                        },{
                            layout: 'form',
                            xtype: 'numberfield',
                            columnWidth:.15,
                            name: 'height'
                        },{
                            columnWidth:.05,
                            xtype: 'label',
                            html: ' px'
                        }]
                    }],
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'bottom',
                        layout: { pack: 'end' },
                        items: [{
                            text: '上传',
                            formBind: true,
                            handler: function(obj) {
                                var f = obj.up('form');
                                if (!f.getForm().isValid()) {
                                    return;
                                }
                                var vals = f.getForm().getValues();
                                f.submit({
                                    waitMsg: '图片上传中..',
                                    waitTitle: '提示',
                                    url: editor.url, //点击插入执行的方法,将图片保存到服务器上
                                    success: function(form, action) {
                                        var element = document.createElement('img');
                                        element.src = action.result.message;
                                        if(vals.width>0 && vals.height>0){
                                            element.width = vals.width;
                                            element.height = vals.height;
                                        }
                                        if (Ext.isIE) {
                                            editor.insertAtCursor(element.outerHTML);
                                        } else {
                                            var selection = editor.win.getSelection();
                                            if (!selection.isCollapsed) {
                                                selection.deleteFromDocument();
                                            }
                                            selection.getRangeAt(0).insertNode(element);
                                        }
                                        win.hide();
                                    },
                                    failure: function(form, action) {
                                        form.reset();
                                        if (action.failureType == Ext.form.action.Action.SERVER_INVALID){
                                            Ext.MessageBox.show({
                                                title: '错误',
                                                msg: action.result.msg,
                                                icon: Ext.MessageBox.ERROR,
                                                buttons: Ext.Msg.OK
                                            });
                                        }
                                    }
                                });
                            }
                        }, {
                            text: '取消',
                            handler: function() {
                                win.hide();
                            }
                        }]
                    }]
                }]
            }, {
                title: '远程图片',
                icon: 'extjs/resources/images/link.png',
                layout: 'fit',
                items: [{
                    xtype: 'form',
                    border: false,
                    bodyPadding:10,
                    items: [{
                        xtype: 'textfield',
                        vtype: 'url',
                        labelWidth: 70,
                        fieldLabel: '图片URL',
                        anchor: '100%',
                        name: 'pic',
                        allowBlank: false,
                        blankText: '图片URL不能为空'
                    }, {
                        layout: 'column',
                        border: false,
                        items: [{
                            layout: 'form',
                            columnWidth:.36,
                            xtype: 'numberfield',
                            labelWidth: 70,
                            fieldLabel: '尺寸(宽x高)',
                            name: 'width'
                        },{
                            columnWidth:.05,
                            xtype: 'label',
                            html: ' px'
                        },{
                            layout: 'form',
                            xtype: 'numberfield',
                            columnWidth:.15,
                            name: 'height'
                        },{
                            columnWidth:.05,
                            xtype: 'label',
                            html: ' px'
                        }]
                    }],
                    dockedItems: [{
                        xtype: 'toolbar',
                        dock: 'bottom',
                        layout: { pack: 'end' },
                        border: false,
                        items: [{
                            text: '添加',
                            formBind: true,
                            handler: function(obj) {
                                var f = obj.up('form');
                                if (!f.getForm().isValid()) {
                                    return;
                                }
                                var vals = f.getForm().getValues();
                                var pic = vals.pic;
                                var fileext = pic.substring(pic.lastIndexOf('.'), pic.length).toLowerCase();
                                if (fileext != '.jpg' && fileext != '.gif' && fileext != '.jpeg' && fileext != '.png' && fileext != '.bmp') {
                                    f.items.items[0].setValue('');
                                    Ext.Msg.show({
                                        title: '提示',
                                        icon: 'ext-mb-error',
                                        width: 300,
                                        msg: '对不起，系统仅支持标准格式的照片，请调整格式后重新上传，谢谢 ！',
                                        buttons: Ext.MessageBox.OK
                                    });
                                    return;
                                }
                                var element = document.createElement('img');
                                element.src = pic;
                                if(vals.width>0 && vals.height>0){
                                    element.width = vals.width;
                                    element.height = vals.height;
                                }
                                if(Ext.isIE) {
                                    editor.insertAtCursor(element.outerHTML);
                                }else{
                                    var selection = editor.win.getSelection();
                                    if(!selection.isCollapsed) {
                                        selection.deleteFromDocument();
                                    }
                                    selection.getRangeAt(0).insertNode(element);
                                }
                                win.hide();
                            }
                        }, {
                            text: '取消',
                            handler: function() {
                                win.hide();
                            }
                        }]
                    }]
                }],
            }]
        });
        var win = Ext.create('Ext.Window', {
            title: '插入图片',
            icon: '/admin/extjs/resources/images/picture.png',
            width: 400,
            height: 175,
            plain: true,
            modal: true,
            closeAction: 'hide',
            resizable: false,
            border: false,
            layout: 'fit',
            items: imgform
        });
        win.show(this);
    }
 
});