2 Plugins: resizable htmleditor and "state keeper" for simulating change event

[mitch_feaster]

Update: Issues with actually being able to use the htmleditor with the HtmlEditorResizer have been "fixed".

I just did a page with an htmleditor and found myself writing a few simple plugins to make my life easier that I thought I'd share :-)

The first one makes the htmleditor resizable.

The second one lets you check to see if the content in the htmleditor (or anything that extends field) has changed. I used this to simulate a "change" event on the htmleditor.

See attached screenshots. Now for some examples:


HtmlEditorResizer:



new Ext.form.HtmlEditor({
renderTo: Ext.getBody()
,width: 420
,height: 200
,plugins: [new Ext.ux.plugins.HtmlEditorResizer()] //provides resizing on htmleditor
});
You can also pass in an object with a resizeCfg property which will be applied to the Ext.Resizable created on the htmleditor:

new Ext.ux.plugins.HtmlEditorResizer({resizeCfg: {pinned: false}})StateKeeper:


var h = new Ext.form.HtmlEditor({
renderTo: Ext.getBody()
,width: 420
,height: 200
,plugins: [new Ext.ux.plugins.StateKeeper()] //provides the setMark and changedSinceMark functions
});
h.setMark('mark1')
//Do stuff
h.setMark()
//Do more stuff
h.changedSinceMark('mark1') //returns true if content in editor has changed since h.setMark('mark1')
h.changedSinceMark() //returns true if content in editor has changed since h.setMark()

I simulated a "change" event by doing this on my htmleditor config:


listeners: {
'sync': {
fn: function(editor, html) {
if (editor.changedSinceMark()) {
//changed!
this.enableSave(); //do whatever you want to do here
}
editor.setMark();
}
,scope: this //the panel
,buffer: 1000 //delay on checking for changes in editor
}
Todo: make this an actual event...



Tested in Firefox {3,3.5}, Chrome, IE 8

Screenshot:
http://extjs.com/forum/attachment.php?attachmentid=15646&stc=1&d=1250200247

[chalda]

Mmmh... Resize don't work for me...
When I click on textarea I can resize it, but then I can't write in it!
I'm using firefox 3.5.2

On IE7 it's works... but lost right border :)

[mitch_feaster]

Sure enough...I got so excited about it I must have only tested the actually typing in IE! But who needs to actually type in their htmleditor anyways?? ;)

I'll look into it.

[mitch_feaster]

Okay I "fixed" the firefox/chrome resizer issues and updated the first post with the new version. It kind of "blinks" in firefox now but in chrome and IE it's very smooth.

There's now some kinda ugly hackage in there... I hope someone can suggest ways to improve the resizer.