new Ext.form field type - InlineTextArea

[Nullity]

Keeping with the same spirit as the InlineTextField (http://extjs.com/forum/showthread.php?t=7617), here is an InlineTextArea field:


Ext.form.InlineTextArea = function(config) {
Ext.form.InlineTextArea.superclass.constructor.call(this, config);

this.on('specialkey', function(f, e) {
if (e.getKey() == e.ESC) {
f.setValue(this.startValue);
f.blur();
}
}, this);
};

Ext.extend(Ext.form.InlineTextArea, Ext.form.TextArea, {
inlineClass: 'x-form-inline-field',
disabledClass: 'x-form-inline-field-disabled',
saveOnlyOnChange: true,
confirmSave: false,
confirmText: 'The data has been successfully saved.',

doSave : function() {
var cfg = this.autoSave;

this.params = (this.name || this.id) + '=' + this.getValue();

if (typeof cfg == 'object') {
this.method = cfg.method || 'POST';
this.callback = (!cfg.callback) ? {success: Ext.emptyFn, failure: Ext.emptyFn} :
{success: cfg.callback.success || cfg.callback, failure: cfg.callback.failure || Ext.emptyFn};
this.scope = cfg.scope || this.callback;

if (this.confirmSave === true) {
var success = function() {
Ext.MessageBox.alert('Success', this.confirmText);
}.createDelegate(this);

this.callback.success = success.createSequence(this.callback.success);
}

var p = (cfg.params) ? cfg.params : '';

if (p) {
if (typeof p == 'object') {
this.params += '&' + Ext.urlEncode(p);
}
else if (typeof p == 'string' && p.length) {
this.params += '&' + p;
}
}

this.url = (this.method == 'POST') ? cfg.url : cfg.url + '?' + this.params;
}
else if (typeof cfg == 'string') {
this.method = 'POST';
this.url = (this.method == 'POST') ? cfg : cfg + '?' + this.params;
}

Ext.Ajax.request({
url: this.url,
method: this.method,
success: this.callback.success,
failure: this.callback.failure,
params: this.params,
scope: this.scope
});
},

reset : function() {
Ext.form.TextField.superclass.reset.call(this);

if (this.value) {
this.setRawValue(this.value);
}
else if (this.emptyText && this.getRawValue().length < 1) {
this.setRawValue(this.emptyText);
this.el.addClass(this.emptyClass);
}
}
});

Ext.override(Ext.form.InlineTextArea, {
onRender : Ext.form.TextArea.prototype.onRender.createSequence(function() {
this.el.addClass(this.inlineClass);

if (this.editable === false) {
this.disabled = true;
}
}),

onFocus : Ext.form.TextArea.prototype.onFocus.createSequence(function() {
if (this.editable !== false) {
this.el.removeClass(this.inlineClass);
}
}),

onBlur : Ext.form.TextArea.prototype.onBlur.createSequence(function() {
if (this.isValid() && !this.el.hasClass(this.inlineClass)) {
this.el.addClass(this.inlineClass);

if (this.autoSave && (this.saveOnlyOnChange === false || this.getValue() != this.startValue)) {
this.doSave();
}
}
})
});

... and the needed CSS (same as InlineTextField, just with a small addition):


.x-form-inline-field, textarea.x-form-inline-field {
background: transparent;
border: 1px solid transparent;
cursor: pointer;
overflow: hidden;
}

.x-form-inline-field-disabled {
color: #000000;
cursor: default;
opacity: 1.0;
-moz-opacity: 1.0;
filter: alpha(opacity=100);
}


UPDATE 1: I added code suggested by schmidetzki in the InlineTextField thread which cancels the edit if the ESC key is pressed.


UPDATE 2 (9/10/2007): Updated code to version 1.2. Added new options: 'confirmSave' and 'confirmText'. The first, 'confirmSave' is a boolean which when true, will display a MessageBox containing the text set by 'confirmText' (optional) when the changes are saved successfully. Also, the 'autoSave' object now supports a 'scope' setting. Lastly, I fixed a CSS bug where under certain circumstances the scrollbars would show even when the field is blurred (pointed out by sintax.era).


UPDATE 3 (9/11/2007): Updated code for version 1.3. Changed the way 'confirmSave' was handled to fix a bug. Refactored some code to be cleaner.

[JorisA]

Instead of converting all fields to a inlinefield, wouldn't it be better to just override the base field class? this way you can have inline versions of all input fields.

Also see http://extjs.com/learn/Extension:Inline_Form

[z1nkum]

I try use subj with InlineTextArea ( great thanks for it! ) and it's not work together (i cant modify textarea content)

My HTML:


<div id="tip">
<textarea id="tip-content">
some text here
</textarea>
</div>

And js:


var ResizableTip = {
init : function(){

var animated = new Ext.Resizable('tip', {
width: 200,
height: 100,
minX: 100,
minY: 100,
minWidth:100,
minHeight:50,
maxHeight:200,
animate:true,
easing: 'backIn',
duration:.4,
wrap:false,
dynamic:false,
maxWidth: 300,
handles: 'all', // shorthand for 'n s e w ne nw se sw'
draggable:true,
transparent:true
});

}
};


var field1;
Ext.onReady(function(){
field1 = new Ext.form.InlineTextArea({
autoSave: 'tip.php'
});
Ext.EventManager.onDocumentReady(ResizableTip.init, ResizableTip, true);
field1.applyTo("tip-content");




});


css chunk for #tip:


#tip {
padding:10px;
background: #FFC left top;
border: 1px solid #FF3;
overflow:hidden;
}

Is it possible use it together?

[Nullity]

Instead of converting all fields to a inlinefield, wouldn't it be better to just override the base field class? this way you can have inline versions of all input fields.

Also see http://extjs.com/learn/Extension:Inline_Form

I've thought about that briefly but I haven't come up with a good way to do it yet. I already had this written, so I posted it anyway.

The goal is to update the form class to make it all easier, but I still have to put more thought into it and figure out the best way.

EDIT: err, field class, not form class

[jon.whitcraft]

This would a great add to the Wiki under the User Extensions:

http://extjs.com/learn/Ext_Extensions

[mxracer]

Stay tuned; InlineComboBox is almost done. Only a few things left to finish up.

Hi, any idea on when you can post this? I was about to start on one myself when I saw your post.

Thanks.

[Nullity]

Hi, any idea on when you can post this? I was about to start on one myself when I saw your post.

Thanks.

Sorry it took awhile, but I have the InlineComboBox posted now:

http://extjs.com/forum/showthread.php?t=8940

[paha]

I try use subj with InlineTextArea ( great thanks for it! ) and it's not work together (i cant modify textarea content)

have you found any solution? I need the same (an inline, resizable textarea).

thanks.

[z1nkum]

have you found any solution? I need the same (an inline, resizable textarea).

thanks.

Неа, забил хер ;)

[paha]

Неа, забил хер ;)

???
I can read the letters but don't understand the words. :(

[paha]

have you found any solution? I need the same (an inline, resizable textarea).

thanks.

I have found the solution to my problem:

field1 = new Ext.form.InlineTextArea({
grow: true
});

the "grow" option comes from the base TextArea object. :D

[z1nkum]

???
I can read the letters but don't understand the words. :(

Sorry, your nickname - I was sure that you are russian
I have no solution and switch to other things
If you'll find the solution - put it here please

[z1nkum]

I have found the solution to my problem:

field1 = new Ext.form.InlineTextArea({
grow: true
});

the "grow" option comes from the base TextArea object. :D

its not help for me
can you give your source code?

[paha]

its not help for me
can you give your source code?

this is the point of my source code. Unfortunately it's note enough for you (it's not a resizable one) but it's okay for me because it grows and shrinks automatically upon typing.

[sintax.era]

Does anyone else have the scrollbars stay in ie7 even when blurred?

[Nullity]

Does anyone else have the scrollbars stay in ie7 even when blurred?

This was a CSS bug, I fixed it in the first post (along with adding new options).

[sintax.era]

i was hoping it wasnt just me :) cheers, love your extension

[Nullity]

I have added the Inline fields to the Extensions wiki which includes a link to a live demo:

http://extjs.com/learn/Ext_Extensions