In Place / Inline Editing with Ext, ExtJS Inline editor
Posted on | July 10, 2008 |
Yes its been a while since I wrote absolutely anything of use on this blog. Well.. I don’t know if I have ever wrote anything useful on here… probably not.
But that is about to change… while at work, I needed to write a component to allow inline editing much like the Google Calendar interface when editing events etc… very jazzy as we all know. Well to start things off. I found an inline editing tutorial using prototype which after reading seemed very easy and very simple to replicate using Ext. I have Googled this topic in the past but found nothing… so I decided to follow this tutorial and port it to ExtJs.
I’m literally gonna dump the code here and the full html file I used as I’m sure anyone reading this has enough about them to pick up what the code is doing, plus I’ve written some lame documentation which kind of explains what is going on.
I’ve also tried to use Javascript Object Orientation, which in it self is a bit lame but, I am growing to quite like it.
OK enough babble from me… here is version 1 of the code.
Known Bugs / Features
- You cannot update with just pure HTML (then again you can’t with most inline editors) we are using the DOM so patience people.
- There is a distinct lack of validation of the configuration options. Reason: I’m lazy.
- There maybe others but I’m boring myself with this list…
The Code - The Inline Editor
<script type="text/javascript">
var editable = function(elementId, config){
// private vars
// set some defaults for our object.
var _defaultAjaxMethod = 'POST'
var _deafultCssClass = "editable";
this.config = config;
// test what we've been passed.
var _checkConfig = function(config){
// checking its a literal.
if (config.constructor != Object) {
throw new Error("Invalid Config");
}
if(config.extraParams)
{
if(config.extraParams.constructor !== Object)
{
throw new Error("Invalid config value extraParams - must be a literal.");
}
}
if(config.paramName)
{
if(config.paramName.constructor !== String)
{
throw new Error("Invalid config value paramName - must be a string.");
}
}
// check required params.
if (config.ajaxUrl.length == 0) {
throw new Error("Cannot have empty config value ajaxUrl");
}
}
// after the update has occured put everything back to normal.
this.cleanUp = function(elId, keepEditable){
Ext.get(elId + '_editor').remove();
Ext.get(elId).setStyle({
'display': ''
});
if (keepEditable) {
Ext.get(elId).addClassOnOver(this.config.editableCls != null ? this.config.editableCls : 'editable');
}
// calling custom after update
if (this.config.afterUpdate) {
this.config.afterUpdate(elId);
}
}
// everything went swimmingly..
this.editComplete = function(text, elId){
el = Ext.get(elId);
el.update(text);
// calling custom on success
if (this.config.onSuccess) {
this.config.onSuccess(text, elId);
}
}
// what to do when an edit fails.
// must be a custom func from config.
this.editFailed = function(text, elId){
if (this.config.onFailure) {
this.config.onFailure(text, elId);
}
// no default action.
}
// methods that handles the posting of the data to the server.
this.saveChanges = function(elId){
var el = Ext.get(elId);
var new_value = Ext.get(elId + '_edit').getValue();
el.update('Saving...');
this.cleanUp(elId, true);
var arr_params = [];
if(this.config.extraParams)
{
arr_params.concat(this.config.extraParams);
}
// add the actual edited value.
// if the name attr is black we use the id instead.
arr_params[(this.config.paramName) ? this.config.paramName : elId] = new_value;
// do ajax request here.
Ext.Ajax.request({
url: this.config.ajaxUrl,
method : (this.config.ajaxMethod != null ? this.config.ajaxMethod : _defaultAjaxMethod),
params: arr_params,
success: function(response){
this.editComplete(response.responseText, elId);
},
failure: function(response){
this.editFailed(response.responseText, elId);
},
scope: this
});
}
// just adds a click handler and css class.
this.makeEditable = function(elId){
var e = Ext.get(elId);
e.addClassOnOver(this.config.editableCls != null ? this.config.editableCls : 'editable');
e.on('click', function(){
this.edit(elId);
}, this);
}
this.edit = function(elId){
var el = Ext.get(elId);
// hide El.Hide() is naff
el.setStyle({
'display': 'none'
});
Ext.DomHelper.insertBefore(elId, [{
tag: 'div',
id: elId + '_editor'
}]);
// put a single line text input or multi line textbox.
if (this.config.editorType == "single")
{
Ext.DomHelper.append(elId + '_editor', [{
tag: 'input',
id: elId + '_edit',
name: elId + '_edit',
type: 'text',
value: el.dom.innerHTML,
style:(this.config.maxWidth ? 'width:'+this.config.maxWidth : 'width:50%')
}]);
}
else
{
Ext.DomHelper.append(elId + '_editor', [{
tag: 'textarea',
id: elId + '_edit',
name: elId + '_edit',
rows: 4,
cols: 60,
html: el.dom.innerHTML
}]);
}
// append another div to make buttons on their own row.
Ext.DomHelper.append(elId + '_editor', {tag: 'div', id: elId + '_buttons'});
// add the buttons.
if(this.config.buttons)
{
Ext.DomHelper.append(elId + '_editor', this.config.buttons);
}
else
{
Ext.DomHelper.append(elId + '_buttons', [{
tag : 'input',
type: 'button',
value : 'Save',
id: elId + '_save'
}, {
tag : 'input',
type: 'button',
value : 'Cancel',
id: elId + '_cancel'
}]);
}
// button handlers.
Ext.get(elId + '_save').on('click', function(){
this.saveChanges(elId);
}, this);
Ext.get(elId + '_cancel').on('click', function(){
this.cleanUp(elId, true);
}, this);
}
// check everything first.
_checkConfig(config);
// constructor code
this.makeEditable(elementId);
}
</script>
The Sample HTML pageÂ
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Edit-in-Place with Ajax</title>
<link href="ext/resources/css/ext-all.css" rel="stylesheet" />
<style>
.editable {
color: #000;
background-color: #ffffd3;
}
</style>
<script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext/ext-all-debug.js" type="text/javascript"></script>
</head>
<body>
<h1>Edit-in-place</h1>
<p id="desc">Dashing through the snow on a one horse open sleigh.
</p>
<div id="tag_h1">
<div></div>the current state of affairs is this...
</div>
</body>
</html>
How to Use the Inline Editor
<script>
Ext.onReady(function(){
var e = new editable('desc', {'ajaxUrl' : 'a.php', 'paramName' : 'james'});
var d = new editable('tag_h1', {'ajaxUrl' : 'a.php'});
});
</script>
 Configuration Options
There are a few config options you can pass to the editor object in true ExtJS fashion. here’s a list and what they do, and hey look, it’s formatted like JSON - aren’t I a geek! Anyone still reading this…. ?
- ajaxUrl : ‘the url to post too’
- ajaxMethod : ‘POST || GET’
- editorType: ’single’ || ‘multi’ // the type of textbox to use.
- paramName : ‘the name of the parameter to use when posting to server’ // default to the ID
- editableCls : ‘the css class to use on mouseover’ // default to editable
- extraParams : {’a hash of params to pass along too’ }
- onSuccess : function(){ what to do when the editing is successful }
- onFailure : function(){ what to do when the editing fails }
- afterUpdate : function(){ what to do after the update is applied. }
Like I said this is version 1 of probably 1 - it’s by no means finished and will undoubtedly have bugs. So feel free to fix it up and send on the improvements to me!Here’s the ExtJS Inline Editor in a zip file.
…and that concludes the first blog posting in months!
Tags: ext inplace editor > extjs > extjs inline editor > inline editor > inplace edit
Comments
5 Responses to “In Place / Inline Editing with Ext, ExtJS Inline editor”
Leave a Reply
July 10th, 2008 @ 11:00 pm
W00t! f1r$7 p0$t!
G/
July 11th, 2008 @ 11:39 am
Nice post. I’m sure this was a great exercise for yourself learning about how to implement inline editing. You should check out Ext’s native Ext.Editor class it will allow you to create any Ext.form.Field (TextField, TextArea, HtmlEditor, etc) and then bind that form field to a specific element.
There are some useful enhancements that you have made here, such as the ability easily save to the server side. You should look into subclassing Ext.Editor to create a version 2 of your editable class. If you need any assistance feel free to contact me by email.
July 15th, 2008 @ 2:12 pm
Inline Editing using Ext…
[...]What's the 1 thing missing from Ext JS? inline editing - this project aims to fix that! A simple class written for Ext JS which works in both IE and FF allowing inline editing and oh so easy posting of data to the server! read all about it……
July 16th, 2008 @ 9:07 pm
[...] In Place / Inline Editing with Ext, ExtJS Inline editor [...]
July 16th, 2008 @ 11:00 pm
[...] Ext Javascript Library for beginners, ext-perience Ext » Blog Archive » In Place / Inlin… - I found an inline editing tutorial using prototype which after reading seemed very easy and very simple to replicate using Ext. I have Googled this topic in the past but found nothing… so I decided to follow this tutorial and port it to ExtJs. [...]