Basic Ext JS 4 email window that shows a preset "to" list in a tooltip.

Ext.ux.EmailWindow.js

Ext.define('Ext.ux.EmailWindow', {
    extend: 'Ext.window.Window',
	alias: 'widget.email',
	requires: [
		'Ext.form.*',
		'Ext.window.Window',
		'Ext.data.*',
		'Ext.Ajax',
		'Ext.LoadMask'
	],

    width          : 600,
    height         : 400,
    modal          : true,
    closable       : false,
    center         : true,
    constrain      : true,
    resizable      : true,
	title : 'Send an Email',
	iconCls : 'icon-email',
	plain : true,
	layout : 'fit',

	/**
	 * @cfg userIds
	 */
	userIds : [],
	
	initComponent : function () {
		this.items = this.buildItems();
		this.dockedItems = this.buildDockedItems();
		this.sendToTip = this.buildSendToTip();

		this.callParent(arguments);

		this.sendTo = this.down('#sendTo');
		this.on('show', this.extraInit, this);
		this.on('beforedestroy', this.sendToTipClean, this);
	},
	
	buildDockedItems : function() {
		return [
			{
				xtype: 'toolbar',
				itemId: 'bToolbar',
				dock: 'bottom',
				ui: 'footer',
				layout: {
					pack: 'center'
				},
				items: [
					{
						itemId 	: 'sendbtn',
						text    : 'Send',
						iconCls : 'icon-email',
						scope   : this,
						handler : this.onEmail,
						disabled: true
					},
					{
						text    : 'Cancel',
						iconCls : 'btn-cancel',
						scope   : this,
						handler : this.onCancel
					}
				]
			}
		];
    },
	
	buildItems : function () {
		return Ext.create('Ext.form.Panel', {
			plain: true,
			id: 'emailForm',
			itemId: 'emailform',
			bodyPadding: 5,
			border: false,
			baseCls: 'x-plain',

			fieldDefaults: {
				labelWidth: 70,
				anchor: '100%'
			},

			layout: {
				type: 'vbox',
				align: 'stretch'
			},

			items: [
				{
					xtype: 'trigger',
					itemId: 'sendTo',
					name: 'to',
					fieldLabel: 'Send To',
					editable: false,
					value: this.getSendTos(),
					submitValue: false,
					scope: this,
					onTriggerClick: Ext.bind(this.onSendToClick, this),
					listeners: {
						scope: this,
						focus: this.onSendToClick
					}
				},
				{
					xtype: 'hidden',
					value: this.userIds.toString(),
					name: 'userIds'
				},
				{
					itemId: 'emailbody',
					xtype: 'textarea',
					hideLabel: true,
					name: 'message',
					msgTarget: 'under',
					maxLength: 30,
					flex: 1,
					enableKeyEvents: true,
					listeners : {
						scope : this,
						keydown: this.updateTextCtr,
						keyup: this.updateTextCtr,
						focus: this.closeSendToTip,
						change: this.onMsgBodyChange
					}
				},
				{
					xtype: 'displayfield',
					itemId: 'textCtr',
					labelWidth: 167,
					fieldLabel: 'Allowed characters remaining'
				}
			]
		});
	},
	
	buildSendToTip : function () {
		return Ext.create('Ext.tip.Tip', {
			html: this.getSendTos(),
			closable: true,
			width: 400, // initial width needed to make the sizing work,
			maxWidth: 500
		});
	},
	
	closeSendToTip : function() {
		if (this.sendToTip.isVisible()) {
			this.sendToTip.hide();
		}
	},
	
	/**
	 * When the user clicks in the send to box, pop open a tooltip that
	 * shows the complete list of the user ids this email is going to.
	 * The tip should cover the send to trigger field, right aligining
	 * with it, up to a maximum of 500px.
	 */
	onSendToClick : function() {
		var width = this.sendTo.inputEl.getWidth(),
			position = this.sendTo.inputEl.getXY(),
			xpos;
		
		// Figure out how wide the tip should be, the max is 500
		if ( width > 500 ) {
			xpos = position[0] + (width-500);
			position[0] = xpos;
			width = 500;
		}
		
		this.sendToTip.setWidth(width);
		this.sendToTip.doLayout();
		this.sendToTip.showAt(position);
	},
	
	/**
	 * Build a nicely formatted list of the user ids.
	 */
	getSendTos : function() {
		var str = this.userIds.join(", ");
		return str;
	},

	onMsgBodyChange : function(field) {
		var fbar = this.getDockedComponent('bToolbar'),
			sendBtn = fbar.child('#sendbtn');
		if (field.getValue().length > 0) {
			sendBtn.enable();
		} else {
			sendBtn.disable();
		}

	},

	onCancel : function () {
		this.close();
	},
	
	onEmail : function () {
		var formPanel = this.getComponent('emailform');
		if (formPanel.getForm().isValid()) {
			this.el.mask('Please wait', 'x-mask-loading');
			formPanel.getForm().submit({
				url: 'email/post/url/here',
				timeout: 300,
				scope: this,
				success: this.onEmailSuccess,
				failure: this.onEmailFailure
			});
		}
	},
	
	onEmailSuccess : function() {
		this.close();
	},
	
	onEmailFailure : function (form, action) {
		this.el.unmask();
		Ext.Msg.alert('Send Email', action.result.message);
	},
	
	sendToTipClean : function() {
		this.sendToTip.destroy();
	},
	
	/**
	 * Extra initialization of the email window that works best after the
	 * show event.  Initialize the value show for max chars allowed.  This assumes the
	 * maxLength field is configured on the text area.
	 */
	extraInit : function() {
		var body = this.down('#emailbody'),
			ctr = this.down('#textCtr');
		
		ctr.setValue(body.maxLength);
		body.focus(false, true);
	},
	
	/**
	 * Update the 'Allowed chars remaining' text as the user types. Once the
	 * limit is reached, the Ext validation tip will display under the 
	 * text area and the allowed char remaining field will be hidden. Also,
	 * enable or disable the send button.
	*/
	updateTextCtr : function(body) {
		var ctr = this.down('#textCtr'),
			text = body.getValue(),
			maxLength = body.maxLength,
			sendBtn = this.down('#sendbtn');

		if (text.length > maxLength) {
			ctr.hide();
		} else {
			if ( !ctr.isVisible() ) {
				ctr.show();
			}
			ctr.setValue(maxLength - text.length);
		}

		// Send button enabled only when there is a message body
		if (text.length > 0) {
			sendBtn.enable();
		} else {
			sendBtn.disable();
		}
	}
});