PDA

View Full Version : Ext.ux.aceeditor.Panel



harrydeluxe
11 Nov 2011, 6:04 AM
ACE Editor:

http://harrydeluxe.github.com/extjs-ux/img/aceeditor.jpg

Source on Github:
https://github.com/harrydeluxe/extjs-ux#extuxaceeditorpanel

Demo (simple):
http://harrydeluxe.github.com/extjs-ux/example/aceeditor/simple.html

Demo (liquid Syntax):
http://harrydeluxe.github.com/extjs-ux/example/aceeditor/simple_2.html

Demo:
http://harrydeluxe.github.com/extjs-ux/example/aceeditor/aceeditor.html

ajaxvador
11 Nov 2011, 8:32 AM
+1

hendricd
11 Nov 2011, 10:57 AM
Sweet Harry!

galdaka
14 Nov 2011, 4:50 AM
+1

lorezyra
14 Nov 2011, 5:14 PM
very nice UX... And simple too.=D>

Ronaldo
13 Mar 2012, 1:24 AM
Really nice, I will look into it later this month.
Are there any advantages as opposed to CodeMirror?

harrydeluxe
14 Mar 2012, 3:57 PM
@Ronaldo
Not really. But in my opinion it is more stable.

harrydeluxe
2 May 2012, 2:34 PM
Works now with 4.1.0
See: https://github.com/harrydeluxe/extjs-ux/ (https://github.com/harrydeluxe/extjs-ux/#extuxaceeditorpanel)

shanda506365
8 May 2012, 12:54 AM
Really nice,but can't run in ie
open demo in IE, hit ctrl-f, type 'items', editor jumps to the 'items' in line 2 (function foo(items) {), but then deletes the word and replaces it with an 'f' (becomes function foo(f) { ). cursor left between f and (, no selection
hitting ctrl+z restores the 'items' and sets the selection to 'items', implying the find-and-select activity did work fine, but unfortunately the f from the ctrl-f has come through as a keystroke afterwards.

harrydeluxe
9 May 2012, 4:28 PM
@shanda506365 I know the problem. In my example I use the current revision of ACE and not the stable release 0.2.0 which works in IE.

shanda506365
9 May 2012, 6:49 PM
@harrydeluxe Thank you for your reply.
How to get the correct current version of ACE。
I see only ace-0.2.0 (https://github.com/downloads/ajaxorg/ace/ace-0.2.0.zip) at https://github.com/ajaxorg/ace

harrydeluxe
10 May 2012, 10:39 PM
https://github.com/ajaxorg/ace/downloads
The first one is the right.

shanda506365
13 May 2012, 7:32 PM
:( on https://github.com/ajaxorg/ace/downloads of ace-0.2.0.zip in the IE still have problems. i open the ace-0.2.0/editor.html ,Still not work fine in the ie

harrydeluxe
14 May 2012, 7:17 AM
Please create a new Issue on Github. https://github.com/harrydeluxe/extjs-ux/issues/new

shanda506365
14 May 2012, 7:27 PM
I have already submitted a new Issue on Github. https://github.com/harrydeluxe/extjs-ux/issues/new Look forward to repair

another_i
3 Jul 2012, 5:30 AM
Could you help me?
How can I do binding keypress "Ctrl+S" with aceEditor component?
Since 4.1.0, Ext.util.KeyMaps can bind to Components and process key-based events fired by Components [http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.KeyMap].

I try this way, but it's wrong.


var aceEditor = Ext.widget('aceeditor', {...});
new Ext.util.KeyMap({
target: aceEditor,
binding: {
key: "s",
ctrl: true,
fn: function(keyCode, e){
console.log ('Ctrl+S was pressed.');
}
}
});


Thank you.

UPDATE #1:
I solved this trouble by next way:


var aceEditor = Ext.widget('aceeditor', {...});
new Ext.util.KeyMap({
target: aceEditor.el,
binding: {
key: "s",
ctrl: true,
fn: function(keyCode, e){
console.log ('Ctrl+S was pressed.');
}
}
});

harrydeluxe
3 Jul 2012, 7:52 AM
@another_i Thanks for the hint.

another_i
3 Jul 2012, 11:11 PM
@harrydeluxe thank you for the great UX! =)

another_i
5 Jul 2012, 3:44 AM
One more hint for update this editor. JS Auto-formating by "ALT+CTRL+F".
Require: js_beautify (https://github.com/einars/js-beautify/blob/master/beautify.js) function.


var aceEditor = Ext.widget('aceeditor', {...});
new Ext.util.KeyMap({
target: aceEditor.el,
binding: [
//{ binding for ctrl+s if it needed },
{
key: "f", //70
ctrl: true,
alt: true,
fn: function(keyCode, opts)
this.setValue( js_beautify(this.getValue()) );
},
defaultEventAction: "stopEvent",
scope: aceEditor
}]
});

I hope it will be useful for you.

harrydeluxe
5 Jul 2012, 8:38 AM
@another_i This is cool! By the way, I've fixed a few bugs in aceEditor.

another_i
23 Oct 2012, 3:15 AM
@harrydeluxe

Hello.

I have some troubles.
How can I use Ext.ux.aceeditor.Panel like a form field? I want to bind aceeditor with form, that form.loadRecord() automaticaly call setValue() for aceeditor. But it run setValues() only for its fields (i mean its items based on ones with xtype: "field").

For now I use hidden textarea that on afterrender insert aceeditor on form and onSubmit put aceeditor's value and set it to the textarea. But I realy don't like this way. And I hope that you understand why I do. =)

Could you help me? Thanks.

Jangla
11 Feb 2013, 8:23 AM
@harrydeluxe

Hello.

I have some troubles.
How can I use Ext.ux.aceeditor.Panel like a form field? I want to bind aceeditor with form, that form.loadRecord() automaticaly call setValue() for aceeditor. But it run setValues() only for its fields (i mean its items based on ones with xtype: "field").

For now I use hidden textarea that on afterrender insert aceeditor on form and onSubmit put aceeditor's value and set it to the textarea. But I realy don't like this way. And I hope that you understand why I do. =)

Could you help me? Thanks.

Ditto. At the very least I'd like to be able to have a field label

jchris
21 Apr 2013, 12:04 AM
Hi,

there is almost everything done to use this as a usual form field. Maybe Harry likes to have a brief look at it and add it.

This is my File.js: Ext.ux.aceeditor.Field, xtype: AceEditorField.

Instead of extending a panel, I extended a FieldContainer to get the label and so on and added the mixin Ext.form.field.Field for the field stuff. Now it is already working as a field, but there are some style issues to fix. To get the look and feel of the form field, it is necessary to add these styles to the created pre component, also the resize event has to move there. At last, it would be nice to have the focus and blur of the form field, so let´s add these events to the ace editor to handle the x-form-focus style. Done...

I left the sourceCode and url variables inside. You won´t need them anymore, the ace editor will get (and set) the value now. But maybe they are still useful for someone.

Here is the code:



Ext.define('Ext.ux.aceeditor.Field', {
extend:'Ext.form.FieldContainer',
alias: 'widget.AceEditorField',
mixins: {
editor: 'Ext.ux.aceeditor.Editor',
field: 'Ext.form.field.Field'
},
layout: 'fit',
autofocus: false,
border: false,
useWrapMode: false,

listeners: {
activate: function()
{
if(this.editor && this.autofocus)
{
this.editor.focus();
}
}
},

initComponent: function()
{
var me = this,
items = {
xtype: 'component',
style:'position:relative;margin:0;padding:0;;',
cls: 'x-form-text x-form-textarea',
listeners: {
resize: function()
{
if(this.ownerCt && this.ownerCt.editor)
{
this.ownerCt.editor.resize(true);
}
}
},
autoEl: 'pre'
};


Ext.apply(me, {
items: items
});

me.callParent(arguments);
},

onRender: function()
{
var me = this;

if(me.sourceEl != null)
{
me.sourceCode = Ext.get(me.sourceEl).dom.outerText;
}

me.editorId = me.items.keys[0];
me.oldSourceCode = me.sourceCode;

me.callParent(arguments);


// init editor on afterlayout
me.on('afterlayout', function()
{
if(me.url)
{
Ext.Ajax.request({
url: me.url,
success: function(response)
{
me.sourceCode = response.responseText;
me.initEditor();
}
});
}
else
{
me.initEditor();
}

me.editor.on('focus',function(){
var item = me.items.getAt(0);
if(item && (!item.hasCls('x-form-focus'))) {
item.addCls('x-form-focus');
}
});
me.editor.on('blur',function(){
var item = me.items.getAt(0);
if(item && item.hasCls('x-form-focus'))
item.removeCls('x-form-focus')
});
}, me, {
single: true
});
}
});

cmendez21
6 Jan 2014, 10:45 AM
Hi there, I noticed a bug:
If you place the editor in a TAB panel (the tab is inside a form) and its not the initial active tab.

Checking on firebug i got this error :

Editor.js(line 108)
TypeError: this.editor is undefined
return this.editor.getSession().getValue();

Now if i focus on the tab (or each tab containing an aceeditor) works (it needs to be created) and the error is gone but not such a good practice to focus on each tab.

this is using version 4.2.x