Ext JS 3 to 4 Migration about Fckeditor

[willchan]

hi everyone:
I extend TextArea to Fckeditor,The code below is work in EXTJS 3.* ,and I try to upgrade to EXTJS 4 ,It can't work. I download the Ext JS 3 to 4 Migration Pack can't work too.

In EXTJS 3.* code work good:

Ext.form.CKEditor = function (config) {
    this.config = config;
    Ext.form.CKEditor.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, {
    hideLabel: true,
    constructor: function (config) {
        config = config || {};
        config.listeners = config.listeners || {};
        Ext.applyIf(config.listeners, {
            beforedestroy: this.onBeforeDestroy
                                    .createDelegate(this),
            scope: this
        });
        Ext.form.CKEditor.superclass.constructor.call(this, config);
    },
    onBeforeDestroy: function () {
        this.ckEditor.destroy();
    },
    onRender: function (ct, position) {
        if (!this.el) {
            this.defaultAutoCreate = {
                tag: "textarea",
                autocomplete: "off"
            };
        }
        Ext.form.TextArea.superclass.onRender.call(this, ct, position);
        this.ckEditor = CKEDITOR.replace(this.id, Ext.apply({
            skin: 'kama'
        }, this.config.CKConfig));
    },

    setValue: function (value) {
        if (Ext.isEmpty(value)) {
            value = "";
        }
        Ext.form.TextArea.superclass.setValue.apply(this, [value]);
        CKEDITOR.instances[this.id].setData(value);
    },

    getValue: function () {
        CKEDITOR.instances[this.id].updateElement();
        this.value = CKEDITOR.instances[this.id].getData();
        return Ext.form.TextArea.superclass.getValue.apply(this);
    },

    getRawValue: function () {
        CKEDITOR.instances[this.id].updateElement();
        this.value = CKEDITOR.instances[this.id].getData();
        return Ext.form.TextArea.superclass.getRawValue.apply(this);
    }
});
Ext.reg('ckeditor', Ext.form.CKEditor);

I change the code in EXT 4 can't work:

Ext.form.CKEditor = function (config) {
    this.config = config;
    Ext.form.CKEditor.superclass.constructor.call(this, config);
};

Ext.define('Ext.form.CKEditor', {
    extend: 'Ext.form.TextArea',
    alias: 'ckeditor',
    hideLabel: true,
    constructor: function (config) {
        config = config || {};
        config.listeners = config.listeners || {};
        Ext.applyIf(config.listeners, {
            beforedestroy: this.onBeforeDestroy.createDelegate(this),
            scope: this
        });
        Ext.form.CKEditor.superclass.constructor.call(this, config);
    },
    onBeforeDestroy: function () {
        this.ckEditor.destroy();
    },
    onRender: function (ct, position) {
        if (!this.el) {
            this.defaultAutoCreate = {
                tag: "textarea",
                autocomplete: "off"
            };
        }
        Ext.form.TextArea.superclass.onRender.call(this, ct, position);
        this.ckEditor = CKEDITOR.replace(this.id, Ext.apply({
            skin: 'kama'
        }, this.config.CKConfig));
    },

    setValue: function (value) {
        if (Ext.isEmpty(value)) {
            value = "";
        }
        Ext.form.TextArea.superclass.setValue.apply(this, [value]);
        CKEDITOR.instances[this.id].setData(value);
    },

    getValue: function () {
        CKEDITOR.instances[this.id].updateElement();
        this.value = CKEDITOR.instances[this.id].getData();
        return Ext.form.TextArea.superclass.getValue.apply(this);
    },

    getRawValue: function () {
        CKEDITOR.instances[this.id].updateElement();
        this.value = CKEDITOR.instances[this.id].getData();
        return Ext.form.TextArea.superclass.getRawValue.apply(this);
    }
});

[willchan]

help

[russall1985]

I have a ckeditor Extjs wrapper that I created that works with Extjs 4. The difference that I had to fix in extjs4 is that setValue gets called before onRender now, so as you can see I had to set a default value to the object and then set the ckeditor in the onRender method when it is added to the dom.

/**
 * @class Compass.ErpApp.Shared.CKeditor
 * @extends Ext.form.field.TextArea
 * Converts a textarea into a CkEditor Instance
 * 
 * @author Russell Holmes / http://www.portablemind.com
 *
 * @additional config options
 * ckEditorConfig - configuration for CkEditor Instance
 */

Ext.define("Compass.ErpApp.Shared.CKeditor",{
    extend:"Ext.form.field.TextArea",
    alias:'widget.ckeditor',
    ckEditorInstance : null,

    initComponent: function() {
        Compass.ErpApp.Shared.CKeditor.superclass.initComponent.call(this, arguments);

        this.addEvents(
            /**
         * @event save
         * Fired when saving contents.
         * @param {Compass.ErpApp.Shared.CKeditor} cKeditor This object
         * @param (contents) contents needing to be saved
         */
            'save'
            );
    },

    constructor : function(config){
        config = Ext.apply({
            grow:true,
            hideLabel:true
        },config);
        Compass.ErpApp.Shared.CKeditor.superclass.constructor.call(this, config);
    },

    onRender : function(ct, position){
        Compass.ErpApp.Shared.CKeditor.superclass.onRender.call(this, ct, position);
        this.setupCkEditor();
        this.on('resize', this.textAreaResized, this);
    },

    setupCkEditor : function(){
        Ext.applyIf(this.initialConfig.ckEditorConfig,{
            resize_enabled:false,
            base_path:'/javascripts/ckeditor/',
            toolbarStartupExpanded:false,
            shiftEnterMode:CKEDITOR.ENTER_P,
            skin:'office2003',
            extraPlugins:'codemirror'
        });
        var editor = CKEDITOR.replace(this.inputEl.id, this.initialConfig.ckEditorConfig);
        editor.extjsPanel = this;
        this.ckEditorInstance = editor;
        this.setValue(this.defaultValue);
    },

    textAreaResized : function(textarea, adjWidth, adjHeight){

        if(!Compass.ErpApp.Utility.isBlank(this.ckEditorInstance))
        {
            if(!Compass.ErpApp.Utility.isBlank(adjWidth) && !Compass.ErpApp.Utility.isBlank(adjHeight)){
                var el = document.getElementById('cke_contents_' + this.inputEl.id);
                
                if(!Compass.ErpApp.Utility.isBlank(el)){
                    var toolBoxDiv = document.getElementById('cke_top_' + this.inputEl.id).getElementsByTagName('div')[0];
                    var toolBoxEl = Ext.get(toolBoxDiv);
                    var displayValue = toolBoxEl.getStyle('display');
                    if(displayValue != 'none'){
                        this.ckEditorInstance.execCommand( 'toolbarCollapse' );
                        el.style.height = adjHeight - 51 + 'px';
                        this.ckEditorInstance.execCommand( 'toolbarCollapse' );
                    }
                    else{
                        el.style.height = adjHeight - 51 + 'px';
                    }
					
                }
                else{
                    this.ckEditorInstance.config.height = adjHeight - 51;
                }
            }
        }
    },

    setValue : function(value){
        if(this.ckEditorInstance){
            this.ckEditorInstance.setData(value);
        }
        else{
            this.defaultValue = value;
        }
            
    },

    getValue : function(){
        if(this.ckEditorInstance)
            var value = this.ckEditorInstance.getData();
        return value;
    },

    getRawValue : function(){
        if(this.ckEditorInstance)
            var value = this.ckEditorInstance.getData();
        return value;
    },

    insertHtml : function(html){
        this.ckEditorInstance.insertHtml(html);
    }
});