PDA

View Full Version : new Ext.form field type - InlineTextArea



Nullity
22 Jun 2007, 7:24 AM
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
23 Jun 2007, 4:50 AM
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
23 Jun 2007, 9:53 AM
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
23 Jun 2007, 1:08 PM
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
24 Jun 2007, 1:21 PM
This would a great add to the Wiki under the User Extensions:

http://extjs.com/learn/Ext_Extensions

mxracer
28 Jun 2007, 10:16 AM
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
9 Jul 2007, 7:15 AM
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
10 Jul 2007, 7:24 AM
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
10 Jul 2007, 7:33 AM
have you found any solution? I need the same (an inline, resizable textarea).

thanks.

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

paha
10 Jul 2007, 7:37 AM
Неа, забил хер ;)

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

paha
10 Jul 2007, 7:45 AM
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
10 Jul 2007, 11:24 PM
???
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
10 Jul 2007, 11:35 PM
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
11 Jul 2007, 6:20 AM
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
9 Sep 2007, 6:32 PM
Does anyone else have the scrollbars stay in ie7 even when blurred?

Nullity
10 Sep 2007, 7:22 AM
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
11 Sep 2007, 11:39 AM
i was hoping it wasnt just me :) cheers, love your extension

Nullity
12 Sep 2007, 9:10 AM
I have added the Inline fields to the Extensions wiki which includes a link to a live demo:

http://extjs.com/learn/Ext_Extensions