PDA

View Full Version : Ext.ux.form.EditArea



mschwartz
9 Sep 2009, 4:51 AM
Feel free to use this as you like, no restrictions.



// Ext.ux.form.EditArea.js

Ext.namespace('Ext.ux.form');

Ext.ux.form.EditArea = Ext.extend(Ext.form.TextArea, {
initComponent: function() {
this.eaid = this.id;
Ext.ux.form.EditArea.superclass.initComponent.apply(this, arguments);
this.on('resize', function(ta, width, height) {
var el = Ext.get('frame_editarea-' + this.eaid);
if (el) {
el.setSize(width,height);
//var size = dialog.getSize();
//el.setSize(size.width - dialog.getFrameWidth(), size.height - dialog.getFrameHeight());
}

});
this.on('beforehide', function() {
editAreaLoader.deleteInstance(this.eaid);
});
this.on('beforeshow', function() {
editAreaLoader.init({
id: this.eaid,
start_highlight: this.initialConfig.start_highlight || true,
language: 'en',
syntax: this.initialConfig.syntax,
allow_toggle: this.initialConfig.allow_toggle || true,
allow_resize: this.initialConfig.allow_resize || false,
replace_tab_by_spaces: this.initialConfig.replace_tab_by_spaces || 4,
toolbar: this.initialConfig.toolbar || "search, go_to_line, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, |, help",
is_editable: this.initialConfig.is_editable || true
});
});
},
onRender: function() {
Ext.ux.form.EditArea.superclass.onRender.apply(this, arguments);
editAreaLoader.init({
id: this.eaid,
start_highlight: this.initialConfig.start_highlight || true,
language: 'en',
syntax: this.initialConfig.syntax,
allow_toggle: this.initialConfig.allow_toggle || true,
allow_resize: this.initialConfig.allow_resize || false,
replace_tab_by_spaces: this.initialConfig.replace_tab_by_spaces || 4,
toolbar: this.initialConfig.toolbar || "search, go_to_line, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, |, help",
is_editable: this.initialConfig.is_editable || true
});
},
getValue: function() {
var v = editAreaLoader.getValue(this.eaid);
// this should set the textarea's value and fire events
Ext.ux.form.EditArea.superclass.setValue.apply(this, v);
return v;
},
setValue: function(v) {
Ext.ux.form.EditArea.superclass.setValue.apply(this, v);
editAreaLoader.setValue(this.eaid, v);
},
validate: function() {
this.getValue();
Ext.ux.form.EditArea.superclass.validate.apply(this, arguments);
}
});

Ext.reg('ux-editarea', Ext.ux.form.EditArea);


Example usage:



<script type="text/javascript" src="/path/to/editarea_0_8_1_1/edit_area/edit_area_full.js"></script>
...

Ext.onReady(function() {
new Ext.Viewport({
layout: 'fit',
items: [
{
xtype: 'ux-editearea',
syntax: 'html' // or js or php or whatever, see the docs
}
]
});
Updated 9/11 to include getValue() and setValue() members.

mschwartz
9 Sep 2009, 4:54 AM
Notes:

The beforehide/beforeshow is experimental. I've not been able to get the editor to work properly in tabs or other containers where the editor can be hidden. I've tried every hideMode configuration option with no luck. The beforehide/beforeshow are not actually triggered if, for example, the editor is a component child of a tab panel, and I don't see any way to detect that it is being hidden.

If anyone can point out how to detect these events, please post and I'll fix the code.

bt_bruno
9 Sep 2009, 5:36 AM
Isn't editAreaLoader undefined in this code snippet?

mschwartz
9 Sep 2009, 6:08 AM
Isn't editAreaLoader undefined in this code snippet?


<script type="text/javascript" src="/path/to/editarea_0_8_1_1/edit_area/edit_area_full.js"></script>

bt_bruno
9 Sep 2009, 6:21 AM
<script type="text/javascript" src="/path/to/editarea_0_8_1_1/edit_area/edit_area_full.js"></script>

Got it.Christophe EditArea (http://www.cdolivet.com/editarea/editarea/docs/index.html).You should mention it...

mschwartz
9 Sep 2009, 6:30 AM
Yeah,

The URL to read about and download the editor:

http://www.cdolivet.com/index.php?page=editArea


The docs show these functions. What I know needs to happen is when the tab or card or whatever has an editarea in it is hidden, the hide() below has to be called. On show, the show() below has to be called.

How to detect when parent or grandparent, etc., is hidden is the trick. Then this plugin will be 100% right, in terms of not screwing up its display.

http://www.cdolivet.com/editarea/editarea/docs/javascript_functions.html
editAreaLoader.hide(editor_id)


Hide a textarea and it's related EditArea.
Parameters editor_id The id of the converted textarea on which the command should be executed. Returns: Nothing.
editAreaLoader.show(editor_id)


Restore a textarea and it's related EditArea hidden with the hide() function.
Parameters editor_id The id of the converted textarea on which the command should be executed. Returns: Nothing.

Trinodia
10 Sep 2009, 6:08 AM
Just implimented this at my job to edit html files online.

Works as it should except when i tried using Ext getValue() on the fields. I only get the initial set value that i load into the fields on render, not the edited one.

Switching editArea on/off for a field updates the underlying textarea value and then it saves the correct value that were in the editArea when switched of if i use getValue().

Switching to the editArea native getvalue works so not really a problem.

Maybe hooking up the editArea getvalue function inside the textarea getValue to update it so the correct value is saved would work?

mschwartz
10 Sep 2009, 11:50 AM
Agreed. I'll fix it tonight.

mschwartz
11 Sep 2009, 4:59 AM
Fixed in first post.

I also added a validate() method which should cause the textarea's value to be updated on form submit.

andr83
23 Dec 2009, 3:00 AM
For tab panel:


Ext.namespace('Ext.ux.form');

Ext.ux.form.EditArea = Ext.extend(Ext.form.TextArea, {
initComponent: function() {
this.eaid = this.id;
Ext.ux.form.EditArea.superclass.initComponent.apply(this, arguments);
this.mon(this,'resize', function(ta, width, height) {
var el = Ext.get('frame_' + this.eaid);
if (el) {
el.setSize(width,height);
}

});
},
onRender: function() {
Ext.ux.form.EditArea.superclass.onRender.apply(this, arguments);
editAreaLoader.init({
id: this.eaid,
start_highlight: this.initialConfig.start_highlight || true,
language: this.initialConfig.language|| 'en',
syntax: this.initialConfig.syntax,
syntax_selection_allow: "css,html,js,php,python,vb,xml,c,cpp,sql,basic,pas,brain",
allow_toggle: this.initialConfig.allow_toggle || true,
allow_resize: this.initialConfig.allow_resize || false,
replace_tab_by_spaces: this.initialConfig.replace_tab_by_spaces || 4,
toolbar: this.initialConfig.toolbar || "search, go_to_line, |, undo, redo, |, select_font,|, change_smooth_selection, highlight, reset_highlight, |, help",
is_editable: this.initialConfig.is_editable || true,
show_line_colors: true,
//plugins: "autocomplite",
autocompletion:true
});
},
getValue: function() {
var v = editAreaLoader.getValue(this.eaid);
return v;
},
setValue: function(v) {
Ext.ux.form.EditArea.superclass.setValue.apply(this, arguments);
editAreaLoader.setValue(this.eaid, v);
},
validate: function() {
this.getValue();
Ext.ux.form.EditArea.superclass.validate.apply(this, arguments);
},
insertText: function(text){
editAreaLoader.setSelectedText(this.eaid, text);
},
hide: function(){
editAreaLoader.hide(this.eaid);
},
show: function(){
editAreaLoader.show(this.eaid)
}

});
Ext.reg('ux-editarea', Ext.ux.form.EditArea);

And in my code:


var queryEditor = new Ext.ux.form.EditArea({
syntax: 'sql',
language:'ru',
allow_toggle:false
});

new Ext.Panel({
id:'querEditorPanel',
title:'Sql editor',
layout:'fit',
items: queryEditor,
listeners:{
activate: function(){
queryEditor.show.defer(100,queryEditor);
},
beforehide: function(){
queryEditor.hide();
}
}
});

It works for me :)

emredagli
27 Jan 2010, 3:08 AM
Hii,
Have you tried to clear undo redo history of editarea?
I could not find any documentation about it?

Thanks a lot.

emredagli
27 Jan 2010, 4:54 AM
Not elegant but works for me...


resetHistory: function(index){
var editAreaFrameThis = frames["frame_"+this.eaid];
if (!editAreaFrameThis) {return false;}
if (!index) {
if (editAreaFrameThis.editArea.previous.clear){
editAreaFrameThis.editArea.previous.clear();
} else {
var val = editAreaLoader.getValue(this.eaid);
editAreaFrameThis.editArea.previous = [{
selEnd: val.length,
selStart: val.length,
text: val
}];
}
}
else {
if (editAreaFrameThis && editAreaFrameThis.editArea && editAreaFrameThis.editArea.previous[index]){
editAreaFrameThis.editArea.previous = [editAreaFrameThis.editArea.previous[index]];
}
}
editAreaFrameThis.editArea.check_redo();
editAreaFrameThis.editArea.check_undo();
return true;
},
setValue: function(v) {
Ext.ux.form.EditAreaModified.superclass.setValue.apply(this, arguments);
editAreaLoader.setValue(this.eaid, v);
var editAreaFrameThis = frames["frame_"+this.eaid];
if (editAreaFrameThis){
editAreaFrameThis.editArea.check_redo();
editAreaFrameThis.editArea.check_undo();
}
},

sandeepan
4 Apr 2012, 2:31 AM
I implemented in a little different approach which works for both grid editors and forms .

i have disabled the toolbars for my use, which can be enabled by passign config options to contructior and then using the same in afterRender method while calling init method of


/*
* @Author: Sandeepan Kundu
* @File: ux.HighlightedCode.js
* @Class: Ext.ux.HighlightedCode
* @email: sandeepan[dot]kundu[at]gmail[dot]com
*
* Dependency : edit_area_full.js, ref: http://www.cdolivet.com/editarea/
*/
Ext.ux.HighlightedCode = Ext.extend(Ext.form.TextArea, {
constructor: function (config) {
//set ingrid property to true in config when used as editor in grid
if (!config.hasOwnProperty('ingrid')) {
config.ingrid = false;
}
Ext.ux.HighlightedCode.superclass.constructor.call(this, config);
},
setValue: function (v) {
Ext.ux.HighlightedCode.superclass.setValue.call(this, v);
if (!this.hasOwnProperty('_setValue')) {
this._setValue = true;
editAreaLoader.setValue(this.autoEl.id, v);
delete this._setValue;
}
},
focus: function () {
Ext.ux.HighlightedCode.superclass.focus.call(this);
if (!this.hasOwnProperty('_focus')) {
this._focus = true;
editAreaLoader.execCommand(this.autoEl.id, "focus");
delete this._focus;
}
},
onTAFocus: function (v) {
if (this.ingrid) {
if (!this.hasOwnProperty('_hidedisabled')) {
this._hidedisabled = true;
var that = this;
var fn = function () {
that._hidedisabled = false;
};
Ext.defer(fn, 500, this);
}
}
},
onTABlur: function (v) {
if (this.ingrid) {
if (!this.hasOwnProperty('_hidedisabled')) {
this.hide();
}
else {
if (this._hidedisabled == false) {
this.hide();
}
}
}
},
show: function () {
Ext.ux.HighlightedCode.superclass.show.call(this);
if (editAreaLoader) {
editAreaLoader.show(this.autoEl.id);
}
return this;
},
hide: function () {
Ext.ux.HighlightedCode.superclass.hide.call(this);
if (editAreaLoader) {
editAreaLoader.hide(this.autoEl.id);
if (this.hasOwnProperty('gridEditor')) {
if (Ext.isFunction(this.gridEditor.completeEdit)) {
this.gridEditor.completeEdit();
}
}
}
return this;
},
afterRender: function () {
Ext.ux.HighlightedCode.superclass.afterRender.call(this);
if (editAreaLoader) {
editAreaLoader.init({
id: this.autoEl.id // textarea id
, syntax: "sql" // syntax to be uses for highlighting, refer folder reg_syntax //"js","css","sql", "tsql", "xml", "vb", "html",etc
, start_highlight: true // to display with highlight mode on start-up
, allow_toggle: !this.initialConfig.ingrid //true
, allow_resize: false
, is_editable: !this.disabled
, show_line_colors: true
, display: 'onload' //later
, toolbar: 'return'
, word_wrap: true
, change_callback: "Ext.ux.HighlightedCode.change_callback"
, focus_callback: "Ext.ux.HighlightedCode.focus_callback"
, blur_callback: "Ext.ux.HighlightedCode.blur_callback"
, blur_callback: "Ext.ux.HighlightedCode.blur_callback"
});
}


}
});
Ext.ux.HighlightedCode.change_callback = function (id) {
var cmp = Ext.getCmp(id);
if (cmp) {
cmp.setValue(editAreaLoader.getValue(id));
}
};
Ext.ux.HighlightedCode.focus_callback = function (id) {
var cmp = Ext.getCmp(id);
if (cmp) {
cmp.onTAFocus(editAreaLoader.getValue(id));
}
};
Ext.ux.HighlightedCode.blur_callback = function (id) {
var cmp = Ext.getCmp(id);
if (cmp) {
cmp.setValue(editAreaLoader.getValue(id));
cmp.onTABlur(editAreaLoader.getValue(id));
}
};
Ext.reg('highlightedcode', Ext.ux.HighlightedCode);




Override editor control


Ext.override(Ext.Editor, {
completeEdit: function (remainVisible) {
if (this.field.getXType() == 'highlightedcode' && this.field.hasOwnProperty('_hidedisabled') && this.field._hidedisabled == true) {
return;
}

// Assert combo values first
if (this.field.assertValue) {
this.field.assertValue();
}
var v = this.getValue();
if (!this.field.isValid()) {
if (this.revertInvalid !== false) {
this.cancelEdit(remainVisible);
}
return;
}
if (String(v) === String(this.startValue) && this.ignoreNoChange) {
this.hideEdit(remainVisible);
return;
}
if (this.fireEvent("beforecomplete", this, v, this.startValue) !== false) {
v = this.getValue();
if (this.updateEl && this.boundEl) {
this.boundEl.update(v);
}
this.hideEdit(remainVisible);
this.fireEvent("complete", this, v, this.startValue);
}

}


and you need to change the line


editAreaLoader.template = "......"

in edit_area_full.js to the following code



editAreaLoader.template = "<?xml version=\"1.0\" encoding=\"UTF-8\"?> <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.1//EN\" \"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" > <head> <title>EditArea</title> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> <meta http-equiv=\"X-UA-Compatible\" content=\"IE=EmulateIE7\"/> [__CSSRULES__] [__JSCODE__] </head> <body> <div id='editor'> <div class='area_toolbar' id='toolbar_1'>[__TOOLBAR__]</div> <div class='area_toolbar' id='tab_browsing_area'><ul id='tab_browsing_list' class='menu'> <li> </li> </ul></div> <div id='result'> <div id='no_file_selected'></div> <div id='container'> <div id='cursor_pos' class='edit_area_cursor'>&nbsp;</div> <div id='end_bracket' class='edit_area_cursor'>&nbsp;</div> <div id='selection_field'></div> <div id='line_number' selec='none'></div> <div id='content_highlight'></div> <div id='test_font_size'></div> <div id='selection_field_text'></div> <textarea id='textarea' wrap='off' onkeypress='editArea.execCommand(\"onkeypress\");' onchange='editArea.execCommand(\"onchange\");' onfocus='editArea.execCommand(\"onfocus\");' onblur='editArea.execCommand(\"onblur\");'> </textarea> </div> </div> <div class='area_toolbar' id='toolbar_2'> <table class='statusbar' cellspacing='0' cellpadding='0'> <tr> <td class='total' selec='none'>{$position}:</td> <td class='infos' selec='none'> {$line_abbr} <span id='linePos'>0</span>, {$char_abbr} <span id='currPos'>0</span> </td> <td class='total' selec='none'>{$total}:</td> <td class='infos' selec='none'> {$line_abbr} <span id='nbLine'>0</span>, {$char_abbr} <span id='nbChar'>0</span> </td> <td class='resize'> <span id='resize_area'><img src='[__BASEURL__]images/statusbar_resize.gif' alt='resize' selec='none'></span> </td> </tr> </table> </div> </div> <div id='processing'> <div id='processing_text'> {$processing} </div> </div> <div id='area_search_replace' class='editarea_popup'> <table cellspacing='2' cellpadding='0' style='width: 100%'> <tr> <td selec='none'>{$search}</td> <td><input type='text' id='area_search' /></td> <td id='close_area_search_replace'> <a onclick='Javascript:editArea.execCommand(\"hidden_search\")'><img selec='none' src='[__BASEURL__]images/close.gif' alt='{$close_popup}' title='{$close_popup}' /></a><br /> </tr><tr> <td selec='none'>{$replace}</td> <td><input type='text' id='area_replace' /></td> <td><img id='move_area_search_replace' onmousedown='return parent.start_move_element(event,\"area_search_replace\", parent.frames[\"frame_\"+editArea.id]);' src='[__BASEURL__]images/move.gif' alt='{$move_popup}' title='{$move_popup}' /></td> </tr> </table> <div class='button'> <input type='checkbox' id='area_search_match_case' /><label for='area_search_match_case' selec='none'>{$match_case}</label> <input type='checkbox' id='area_search_reg_exp' /><label for='area_search_reg_exp' selec='none'>{$reg_exp}</label> <br /> <a onclick='Javascript:editArea.execCommand(\"area_search\")' selec='none'>{$find_next}</a> <a onclick='Javascript:editArea.execCommand(\"area_replace\")' selec='none'>{$replace}</a> <a onclick='Javascript:editArea.execCommand(\"area_replace_all\")' selec='none'>{$replace_all}</a><br /> </div> <div id='area_search_msg' selec='none'></div> </div> <div id='edit_area_help' class='editarea_popup'> <div class='close_popup'> <a onclick='Javascript:editArea.execCommand(\"close_all_inline_popup\")'><img src='[__BASEURL__]images/close.gif' alt='{$close_popup}' title='{$close_popup}' /></a> </div> <div><h2>Editarea [__EA_VERSION__]</h2><br /> <h3>{$shortcuts}:</h3> {$tab}: {$add_tab}<br /> {$shift}+{$tab}: {$remove_tab}<br /> {$ctrl}+f: {$search_command}<br /> {$ctrl}+r: {$replace_command}<br /> {$ctrl}+h: {$highlight}<br /> {$ctrl}+g: {$go_to_line}<br /> {$ctrl}+z: {$undo}<br /> {$ctrl}+y: {$redo}<br /> {$ctrl}+e: {$help}<br /> {$ctrl}+q, {$esc}: {$close_popup}<br /> {$accesskey} E: {$toggle}<br /> <br /> <em>{$about_notice}</em> <br /><div class='copyright'>&copy; Christophe Dolivet 2007-2010</div> </div> </div> </body> </html> ";