Ext.ux.form.MagnifiedTextArea

[evant]

I created this plugin because sometimes you'll want the user to input large amounts of text (that is easy for them to review) without having to take huge amounts of space in your form.

The configuration options are:

icon : String
The icon to display in the message box (defaults to '').

msg : String
The message to display in the message box (defaults to '').

textHeight : Number
The height of the text area in the message box (defaults to 400).

textWidth : Number
The width of the text area in the message box (defaults to 400).

title : String
The title to display in the message box.

tooltip: String/Object
The tooltip to show for the magnifier icon.

Sample usage:



Ext.onReady(function()
{
var x = new Ext.ux.form.MagnifiedTextArea(
{
width: 200,
height: 200,
icon: Ext.MessageBox.QUESTION,
title: 'Employee Comments',
msg: 'Please enter your comments about this employee',
tooltip: 'Click here to show the window',
textWidth: 600,
textHeight: 200
}
);
x.render('text');
}
);


Which produces:

Before:
http://img521.imageshack.us/img521/939/beforeom2.th.jpg (http://img521.imageshack.us/my.php?image=beforeom2.jpg)

During:
http://img521.imageshack.us/img521/6384/duringyb6.th.jpg (http://img521.imageshack.us/my.php?image=duringyb6.jpg)

After:
http://img151.imageshack.us/img151/6030/afterfl4.th.jpg (http://img151.imageshack.us/my.php?image=afterfl4.jpg)



To use the extension, you'll need a few things:

You will need the following css style, (you'll need the attached image as well):


img.x-form-magnifiedTextArea
{
cursor: pointer;
height: 16px;
width: 16px;
background: url(images/default/form/magnifier.png);
}


And the code


Ext.namespace('Ext.ux', 'Ext.ux.form');

Ext.ux.form.MagnifiedTextArea = Ext.extend(Ext.form.TextArea,
{
icon: '',
msg: '',
textHeight: 400,
textWidth: 400,
title: '',
tooltip: null,

onRender: function(ct, position)
{
Ext.ux.form.MagnifiedTextArea.superclass.onRender.call(this, ct, position);
this.img = Ext.DomHelper.insertAfter(this.el, {tag: 'img', src: Ext.BLANK_IMAGE_URL, cls: 'x-form-magnifiedTextArea'}, true);
this.img.on('click', this.showDialog, this);
if (this.tooltip)
{
Ext.QuickTips.init();
if(typeof this.tooltip == 'object')
this.tool = new Ext.ToolTip(Ext.apply(this.tooltip, {target: this.img.id}));
else if (typeof this.tooltip == 'string')
this.tool = new Ext.ToolTip(
{
target: this.img.id,
html: this.tooltip
}
);
}
},

onDestroy: function()
{
this.img.removeAllListeners();
Ext.removeNode(this.img);
if (this.tool)
this.tool.destroy();

Ext.ux.form.MagnifiedTextArea.superclass.onDestroy.call(this);
},

//private
retrieveValue: function(btn, value)
{
if (btn == 'ok')
this.setValue(value);
},

showDialog: function()
{
Ext.MessageBox.show(
{
animEl: this.el,
buttons: Ext.MessageBox.OKCANCEL,
closable: false,
fn: this.retrieveValue,
icon: this.icon,
modal: true,
msg: this.msg,
multiline: this.textHeight,
scope: this,
title: this.title,
value: this.getValue(),
width: this.textWidth
}
);
}
}
);


There could be a number of improvements, also, it doesn't seem to work correctly in Opera (which I'll look at later).

[jsakalos]

Very nice,

I've used sth similar in my old php era. Perfect would be to embed HtmlEditor in popup so you can edit/enter rich texts.

[Juvs]

Just in case still need it... this the update for Ext 3.2


/**
* Ext.ux.form.MagnifiedTextArea
*
**/
Ext.namespace('Ext.ux', 'Ext.ux.form');

Ext.ux.form.MagnifiedTextArea = Ext.extend(Ext.form.TextArea, {
icon: '',
msg: '',
textHeight: 400,
textWidth: 400,
title: '',
tooltip: null,
buttonText: 'Detail...',

initComponent: function(){
Ext.ux.form.MagnifiedTextArea.superclass.initComponent.call(this, arguments);
this.on({
hide : function(component) {
this.img.hide();
},
show : function(component) {
this.img.show();
}
});
},

onRender: function(ct, position){
Ext.ux.form.MagnifiedTextArea.superclass.onRender.call(this, ct, position);

this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-magnifiedTextArea-wrap'});

this.img = Ext.DomHelper.append(this.wrap, {
tag: 'img',
src: Ext.BLANK_IMAGE_URL,
cls: 'x-form-magnifiedTextArea'
}, true);
this.img.on('click', this.showDialog, this);
if (this.tooltip) {
Ext.QuickTips.init();
if (typeof this.tooltip == 'object')
this.tool = new Ext.ToolTip(Ext.apply(this.tooltip, {
target: this.img.id
}));
else
if (typeof this.tooltip == 'string')
this.tool = new Ext.ToolTip({
target: this.img.id,
html: this.tooltip
});
}
this.positionEl = this.wrap;
},

// private
onResize : function(w, h){
Ext.ux.form.MagnifiedTextArea.superclass.onResize.call(this, w, h);
this.wrap.setWidth(this.img.getWidth() + w)
},

onDestroy: function(){
this.img.removeAllListeners();
Ext.destroy(this.wrap, this.img);
Ext.removeNode(this.img);
if (this.tool)
this.tool.destroy();

Ext.ux.form.MagnifiedTextArea.superclass.onDestroy.call(this);
},

//private
retrieveValue: function(btn, value){
if (btn == 'ok' && !this.readOnly)
this.setValue(value);
},

showDialog: function(){
Ext.MessageBox.show({
animEl: this.el,
buttons: this.buttons || Ext.MessageBox.OKCANCEL,
closable: false,
fn: this.retrieveValue,
icon: this.icon,
modal: true,
msg: this.msg,
multiline: this.textHeight,
scope: this,
title: this.title,
value: this.getValue(),
width: this.textWidth
});
}
});

Ext.ComponentMgr.registerType('magnifiedtextarea', Ext.ux.form.MagnifiedTextArea);

CSS add:


.x-form-magnifiedTextArea-wrap {
position: relative;
height: 22px;
}

Enjoy!

Juvs