PDA

View Full Version : Looking for a CodeMirror extension for ExtJS 5.1



MRMV
20 Feb 2015, 3:15 AM
I am looking for a CodeMirror extension for ExtJS 5.1
Tips anyone ?

bob4ever
24 Feb 2015, 6:16 AM
Hey. We are using ExtJS 5.1 together with CodeMirror. We simply wrote an own class for this. I don't know whether there any official extension..

The code we are using is:


Ext.define('Ext.ux.CodeMirror', {
extend: 'Ext.form.field.Base',

fieldBodyCls: 'extCodeMirror',

fieldSubTpl: [
'',
{
compiled: true,
disableFormats: true
}
],

config: {
codeMirrorConfig: {}
},
listeners: {
render: 'onRenderField',
scope: 'this'
},

focusable: false,
minHeight: 300,
codeMirror: null,
suspendCodeChange: 0,

destroy: function() {
var me = this;

if (me.codeMirror && me.codeMirror.clear) {
me.codeMirror.clear();
}
me.codeMirror = null;

me.callParent(arguments);
},

onRenderField: function() {
var me = this;

var codeMirror = new CodeMirror(me.bodyEl.dom, Ext.apply({
value: (me.getValue() || ''),
readOnly: !!me.readOnly,
lineNumbers: true,
tabSize: 4,
indentUnit: 4
}, me.getCodeMirrorConfig()));

// hack to use the extjs eventhandler ;-)
codeMirror.un = codeMirror.off;
codeMirror.doAddListener = codeMirror.on;

me.mon(codeMirror, 'change', function() {
me.suspendCodeChange++;
me.setValue(codeMirror.getValue());
me.suspendCodeChange--;
});

me.codeMirror = (codeMirror || null);
},

getValue: function() {
var me = this;

return me.value;
},

setValue: function(value) {
var me = this;

me.value = value;
me.checkChange();

return me;
},

onChange: function(value) {
var me = this;

if (me.rendered && !me.suspendCodeChange && me.codeMirror) {
me.codeMirror.setValue((value || ''));
me.codeMirror.clearHistory();
}

me.callParent(arguments);
},

setReadOnly: function(readOnly) {
var me = this;

readOnly = !!readOnly;
me[readOnly ? 'addCls' : 'removeCls'](me.readOnlyCls);
me.readOnly = readOnly;
if (me.codeMirror) {
me.codeMirror.setReadOnly(readOnly);
}
me.fireEvent('writeablechange', me, readOnly);
},

onResize: function(width, height) {
var me = this;

if (me.codeMirror) {
me.codeMirror.setSize("100%", height);
}
}
});


It's a little bit hacky but it works for our usage. We using it together with CodeMirror 4.12. I didn't tested it yet with CodeMirror 5.0.

MRMV
24 Feb 2015, 7:45 AM
Thank you very much for sharing bob4ever.

I will try and implement this in my app. If I have any questions or improvements I will let you know in this thread.

yogeshdada
24 Feb 2015, 9:09 AM
I also needed the same thing. Thanks for share..