Editing static text with Ext.Editor

This tutorial demonstrates how to use Ext.Editor to implement inline editing of static text on a web page. Ext.Editor is a base editor field that handles displaying/hiding on demand and has some built-in sizing and event handling logic.

Getting started

The first thing we need to do is to render the actual element containing the text, that we would like to be edited, and assign it an ID.

<div id="title">Lorem Ipsum</div>

Setting up Ext.Editor

Two simple steps are required to make Ext.Editor work. First, we create an instance of Ext.Editor. The only required configuration option is field, that can be either a Field object (or its descendant) or a config object for field.

var editor = new Ext.Editor({
    field: {
        xtype: 'textfield'
    }
});

Second, we call the startEdit() method of out Editor instance and pass the element to edit, or its ID. This method starts the editing process and shows the editor.

Ext.get('title').on('click', function() {
    editor.startEdit(this);
});

Looks simple, right? Well, in essence it is all you need to achieve the effect of an editable content on your page. However, if you run this code as is, you will not get precisely what you expect. The editor will appear in the center of the div. The content of our element remains unchanged after you are done editing. And lastly, you probably want to save the updated text somewhere on the server, for example in a database.

Configuring Ext.Editor

Let’s take a look at more complete example:

var editor = new Ext.Editor({
    field: {
        xtype: 'textfield'
    },
    autoSize: true,
    updateEl: true,
    cancelOnEsc: true,
    completeOnEnter: true,
    listeners: {
        startedit: function(boundEl, value) {
            this.boundEl = boundEl;
        },
        complete: function(editor, value, startValue) {
            if (value === startValue) return;
            // otherwise save your change,
            // for example by making AJAX request
            // Ext.Ajax.request(...);
        }
    }
});

Most of the configuration attributes are self-explanatory, but I will quickly go through them anyways. autoSize:true resizes the editor field to the size of the bound element. updateEl:true makes sure the bound element is updated when editing process is complete. cancelOnEsc:true hides the editor field and shows the original content without making any change when the user hits Esc key. completeOnEnter:true hides the editor field and updates the content of the bound element (if updateEl is true) when the user hits Enter key, otherwise the user has to click outside of the editor field.

Events

Ext.Editor exposes several events. The two important ones are startedit and complete. The good thing about Ext.Editor is that it is not tied to a single element and therefore one instance can be used to edit multiple elements. When startedit event is fired it is passed a reference to the bound element, so you can store it in the editor object (this.boundEl = boundEl;) and access it later from the complete event handler in order to save the change. Note, that complete event fires even when no change has been made to the original content, so to avoid unnecessary remote calls you should compare value and startValue (the two arguments passed to the event handler) before executing any code that saves the change, like in the example above.

Last thing you might want to do is to use the same font family and size in both the element and editor field, add some padding etc. This can easily be done with a little CSS code.

Summary

Ext.Editor is indeed a very handy little guy that can save a lot of pain if you try to implement something like this yourself. And why would you do crazy thing like this in the first place if there is Ext JS 🙂 Have fun with it!

It is my first tutorial, so any constructive criticism is accepted and appreciated. Thank you.