PDA

View Full Version : Ext.ux.form.field.CodeMirror for Ext 4.x



ateodorescu
26 Dec 2011, 11:34 PM
Hi,

I have created a Sencha component for CodeMirror v2.2. You can get it from here: http://www.mzsolutions.eu/extjs (http://www.mzsolutions.eu/extjs/)/

Cheers,
Adrian

Update: The project is on Github now: https://github.com/ateodorescu/mzExt

ykey
13 Jan 2012, 7:36 PM
Nice job on this. Hadn't really looked the the field layouts much before.

ateodorescu
16 Jan 2012, 1:20 PM
Nice job on this. Hadn't really looked the the field layouts much before.
Thanks!

ykey
17 May 2012, 9:05 AM
Any plans to upgrade this to 4.1.x?

ateodorescu
17 May 2012, 9:31 AM
Any plans to upgrade this to 4.1.x?
Yes. I did an upgrade today but it's not fully tested yet. I'll keep you posted.

ykey
17 May 2012, 10:02 AM
Thanks I attempted a quick port myself but was having issues with horizontal scrolling.

ateodorescu
18 May 2012, 3:28 AM
Thanks I attempted a quick port myself but was having issues with horizontal scrolling.
So, I did it. Now it works with 4.0.7 and 4.1.0. You can get it from here: http://www.mzsolutions.eu/extjs/#!/api/Ext.ux.form.field.CodeMirror. It is also working with the latest CodeMirror 2.24.
Cheers

ykey
18 May 2012, 4:14 AM
Thanks I'll take a look today.

koblass
20 Jul 2012, 6:08 AM
Hi I was using your code with success under ExtJs 4.0.7

I'm now migrating my code to ExtJs 4.1.1. So I downloaded the last version of your code and The redering is not working as excepted at all.

Have you tried it with version 4.1.1 ?

Best
Daniel

ateodorescu
22 Jul 2012, 10:30 PM
Hi Daniel,

I have implemented the component for 4.1.1 too. I will update the code soon.

Cheers,
Adrian

ateodorescu
24 Jul 2012, 2:59 AM
Hi I was using your code with success under ExtJs 4.0.7

I'm now migrating my code to ExtJs 4.1.1. So I downloaded the last version of your code and The redering is not working as excepted at all.

Have you tried it with version 4.1.1 ?

Best
Daniel
Hi Daniel,

I have updated the code on my website. Get the latest version and inside you will find working versions of this component for both 4.0.7 and 4.1.x.

Enjoy,
Adrian

koblass
24 Jul 2012, 5:34 AM
Hi Adrian,

Thanks it's working much better, except for one thing.

If you set the "mode" to "text/html" in the initial configuration it doesn't work.


Ext.create('Ext.ux.form.field.CodeMirror', {
mode: 'text/html'
});

The following exception is raised :

Uncaught TypeError: Object #<Object> has no method 'startState'

The other modes are working fine.

ateodorescu
25 Jul 2012, 12:04 AM
Hi Adrian,

Thanks it's working much better, except for one thing.

If you set the "mode" to "text/html" in the initial configuration it doesn't work.


Ext.create('Ext.ux.form.field.CodeMirror', {
mode: 'text/html'
});

The following exception is raised :

Uncaught TypeError: Object #<Object> has no method 'startState'

The other modes are working fine.
Hi Daniel,

Thanks for reporting this. The mode "text/html" had wrong dependencies defined. The files were not loaded hence the error.
It's fixed now. Get the latest version from my website.

Cheers,
Adrian

koblass
25 Jul 2012, 2:51 AM
Hi Adrian,

Thanks a lot for the modification, it works like a charm.
Last minor thing, the "refresh" method should be called when the "resize" event is fired in order to properly resize the codemirror editor.
What do you think ?

Best
Daniel

ateodorescu
25 Jul 2012, 3:00 AM
Hi Adrian,

Thanks a lot for the modification, it works like a charm.
Last minor thing, the "refresh" method should be called when the "resize" event is fired in order to properly resize the codemirror editor.
What do you think ?

Best
Daniel
I don't get it. Are there any resize problems on the codemirror editor? Do you have a screenshot or steps to reproduce that?

Thanks

koblass
25 Jul 2012, 5:11 AM
In your example, try to resize the window and you'll see that the glutter is not resized properly.

By simply adding


me.on('resize', function() {
if (me.editor) {
me.editor.refresh();
}
}, me);


in the initComponent method resolve the problem.

Best
Daniel

ateodorescu
25 Jul 2012, 5:18 AM
Ok Daniel! I'll fix that. Thanks!

Cheers,
Adrian

koblass
25 Jul 2012, 6:04 AM
Thanks :-)

Ok, an other one :(
When you hide all the items in the toolbar a "Layout run failed" is retrieved.

Try this configuration for instance :


Ext.create('Ext.ux.form.field.CodeMirror', {
hideLabel: true,
showModes: false,
showAutoIndent: false,
showLineNumbers: false,
mode: 'text/html'
});


And in general, don't you think that it would be better to only have an available toolbar in the component and beeing able to add buttons to it, but not having predefined buttons by default?
Like this le component would be more flexible I think...

Best
Daniel

ateodorescu
26 Jul 2012, 2:09 AM
Hi Daniel,

I have fixed that issue with the toolbar.
Regarding the toolbar approach. I have implemented the CodeMirror component with some basic toolbar buttons that I needed but you can write your own plugins to extend the toolbar. Here is an example:

Ext.define('Ext.ux.form.plugin.CodeMirror', {
mixins: {
observable: 'Ext.util.Observable'
},
alternateClassName: 'Ext.form.plugin.CodeMirror',
requires: [
'Ext.tip.QuickTipManager',
'Ext.ux.form.field.CodeMirror'
],


constructor: function(config) {
Ext.apply(this, config);
},


init: function(codemirror){
var me = this;
me.codemirror = codemirror;
me.mon(codemirror, 'initialize', me.onInitialize, me);
},


onInitialize: function(){
var me = this, undef,
items = [],
baseCSSPrefix = Ext.baseCSSPrefix,
tipsEnabled = Ext.tip.QuickTipManager && Ext.tip.QuickTipManager.isEnabled();


function btn(id, toggle, handler){
return {
itemId : id,
cls : baseCSSPrefix + 'btn-icon',
iconCls: baseCSSPrefix + 'edit-'+id,
enableToggle:toggle !== false,
scope: me,
handler:handler||me.relayBtnCmd,
clickEvent:'mousedown',
tooltip: tipsEnabled ? me.buttonTips[id] || undef : undef,
overflowText: me.buttonTips[id].title || undef,
tabIndex:-1
};
}


items.push(btn('test', false));
if(items.length > 0){
me.codemirror.getToolbar().add(items);
}
},


relayBtnCmd: function(btn){
alert('test');
},


buttonTips : {
test : {
title: 'Test',
text: 'Test button.',
cls: Ext.baseCSSPrefix + 'html-editor-tip'
}
}


});
You simply use this plugin on your field and you will have another button. Hope this will help you out.

Cheers,
Adrian

PS: The code is updated on my website.

koblass
27 Jul 2012, 12:21 AM
Hi Adrian,

Thanks for the correction and thanks for the small plugin example.

I've one more thing to suggest.
In the current version the special char (like enter, space, etc...) are not handle properly by code mirror. I had to change the onKeyEvent method a bit in the initComponent method, just by canceling the bubble.
The code result like this :


onKeyEvent: function(editor, event){
event.cancelBubble = true;
me.fireEvent('keyevent', me, event);
}


Best
Daniel

ykey
27 Jul 2012, 8:46 AM
We are seeing issues in 4.1.1 with form field labels pushing the editor outside of the form when it has a specified width. Also labelAlign: 'top' on the field causes the field label to render in between the toolbar and the codemirror editor.

ateodorescu
30 Jul 2012, 2:04 AM
Hi Daniel,

If I add that fix you suggested the component will work properly with the latest version of CodeMirror (2.32)? I didn't test the latest version yet. I'm still using 2.25.

Cheers,
Adrian

ateodorescu
30 Jul 2012, 4:34 AM
We are seeing issues in 4.1.1 with form field labels pushing the editor outside of the form when it has a specified width. Also labelAlign: 'top' on the field causes the field label to render in between the toolbar and the codemirror editor.
Hi,
Thanks for reporting it. I have fixed that issue. You should get the latest version.

Cheers,
Adrian

ateodorescu
30 Jul 2012, 4:35 AM
Hi Adrian,

Thanks for the correction and thanks for the small plugin example.

I've one more thing to suggest.
In the current version the special char (like enter, space, etc...) are not handle properly by code mirror. I had to change the onKeyEvent method a bit in the initComponent method, just by canceling the bubble.
The code result like this :


onKeyEvent: function(editor, event){
event.cancelBubble = true;
me.fireEvent('keyevent', me, event);
}


Best
Daniel

I have fixed that. You should get the latest version.

Cheers,
Adrian

ateodorescu
2 Aug 2012, 5:30 AM
Update: The project is on Github now: https://github.com/ateodorescu/mzExt

mr0mega
6 Sep 2012, 6:52 AM
I get the following exception




Uncaught TypeError: Cannot read property 'addCls' of null ext-all-debug-w-comments.js:67700 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)

Ext.define.addCls ext-all-debug-w-comments.js:67700 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.beforeRender ext-all-debug-w-comments.js:84478 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Base.implement.callParent ext-all-debug-w-comments.js:6131 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.beforeRender ext-all-debug-w-comments.js:109017 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Base.implement.callParent ext-all-debug-w-comments.js:6131 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.beforeRender ext-all-debug-w-comments.js:132394 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.getRenderTree ext-all-debug-w-comments.js:38066 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.renderext-all-debug-w-comments.js:38262 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.doAutoRender ext-all-debug-w-comments.js:37791 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.show ext-all-debug-w-comments.js:84848 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
onclick index.html:99 (file:///C:/Users/John/Desktop/CodeMirror/index.html)



from your example site http://ateodorescu.github.com/mzExt/examples/codemirror/index_411.html if I modify it so that when I click a button it will open the window again (once I've closed it). The first display of the window is fine.

ateodorescu
6 Sep 2012, 8:39 AM
I get the following exception




Uncaught TypeError: Cannot read property 'addCls' of null ext-all-debug-w-comments.js:67700 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)

Ext.define.addCls ext-all-debug-w-comments.js:67700 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.beforeRender ext-all-debug-w-comments.js:84478 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Base.implement.callParent ext-all-debug-w-comments.js:6131 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.beforeRender ext-all-debug-w-comments.js:109017 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Base.implement.callParent ext-all-debug-w-comments.js:6131 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.beforeRender ext-all-debug-w-comments.js:132394 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.getRenderTree ext-all-debug-w-comments.js:38066 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.renderext-all-debug-w-comments.js:38262 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.doAutoRender ext-all-debug-w-comments.js:37791 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
Ext.define.show ext-all-debug-w-comments.js:84848 (file:///C:/Users/John/Desktop/CodeMirror/ext-all-debug-w-comments.js)
onclick index.html:99 (file:///C:/Users/John/Desktop/CodeMirror/index.html)



from your example site http://ateodorescu.github.com/mzExt/examples/codemirror/index_411.html if I modify it so that when I click a button it will open the window again (once I've closed it). The first display of the window is fine.
I have managed to reproduce the error. If you change the code and remove the codemirror field from the form you will see that you will still get the same error. It's probably a bug in Extjs and not related to my codemirror component.

Cheers,
Adrian

mankz
27 Sep 2013, 9:37 AM
Nice, minor issue: global variable leak in onDestroy (missing 'var').


for (prop in me.editor) {

ateodorescu
12 Jan 2014, 3:36 PM
Just updated my github account with a new version of CodeMirror component. This guy works with CM 3.20 and ExtJS 4.0.7, 4.1.x and 4.2.x.

The memory leak reported by Mats was fixed. Thanks, btw.
https://github.com/ateodorescu/mzExt

subshark
12 Aug 2014, 3:18 AM
Hello!How add other utils to you component? For example autocompletition http://codemirror.net/demo/xmlcomplete.html?