EXT实现邮件地址输入效果

话不多说，先把效果奉上，如下图

实现代码如下：

Ext.form.FakeText = Ext.extend(Ext.form.Field, {

	validationEvent : true,

	validateOnBlur : true,

	defaultAutoCreate : {
		tag : "div"
	},

	fieldClass : "FakeText",

	htmlEncode : false,

	initEvents : Ext.emptyFn,

	deleteIconUrl : 'images/button/remove-contact.png',

	editIconUrl : 'images/button/edit-contact.gif',

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

		this.textContainer = this.el.createChild({
			tag : 'ul',
			'class' : 'InputUL'
		});
		this.inputContainer = this.textContainer.createChild({
			tag : 'li',
			'class' : 'InputBoxContainer'
		});
		this.input = this.inputContainer.createChild({
			tag : 'input',
			type : 'text',
			'class' : 'InputBox',
			style : 'width:75px'
		});
		this.input.on({
			'keyup' : this.onKeyUp,
			'blur' : this.onBlur,
			scope : this
		});
		// 当点击div时让其input获的焦点
		this.el.addListener('click', function(ev, t) {
			this.input.focus();
		}, this);
	},

	/**
	 * 按键点击事件，当用户进行输入时进行特殊处理
	 * 
	 * @param e
	 */
	onKeyUp : function(e) {
		var keyCode = e.getKey();
		if (keyCode == 8) {// 当点击退格键时的处理

			if (this.input.getValue() == '') {/* 只有里边为空时才能删除其前边的内容 */
				var previous = this.inputContainer.prev();
				if (previous) {
					previous.remove();
				}
			}
			return;
		}
		if (keyCode == 13) {// 当点击回车键时的处理
			this.decideText();
			return;
		}
		if (this.singleValidate(this.input.getValue())) {
			this.decideText();
			return;
		}
		this.autoInputWidth(this.input.dom.value);
	},

	/**
	 * 输入框失去焦点时的处理
	 * 
	 * @param e
	 */
	onBlur : function(e) {
		Ext.form.FakeText.superclass.onBlur.call(this, e);
		this.decideText();
	},

	/**
	 * 当用户输入完成时对，输入的内容进行装饰固定
	 */
	decideText : function() {// 确定内容
		var inputValue = this.input.getValue();
		if (inputValue != '') {
			this.inputContainer.removeClass('InputBoxContainerEdit');
			this.addText(this.getName(), inputValue, inputValue, true);
		}
		this.initInput();
	},

	/**
	 * 添加文本内容
	 * 
	 * @param name
	 *            隐藏域的name
	 * @param value
	 *            隐藏域的值
	 * @param displayName
	 *            要显示的名字
	 * @param allowEdit
	 *            是否允许编辑
	 */
	addText : function(name, value, displayName, allowEdit, isValidate,
			elementId) {// 添加内容

		var li = this.textContainer.createChild({
			tag : 'li',
			style : 'width:auto;height:auto'
		}, this.inputContainer);

		if (elementId) {
			li.set({
				id : elementId
			});
		}

		var span = li.createChild({
			tag : 'span',
			html : displayName
		});// 显示文字

		li.addClass('Block');

		if (allowEdit) {// 是否允许编辑

			li.createChild({
				tag : 'img',
				src : this.editIconUrl
			}).addListener('click', function(ev, t) {

				var str = span.dom.innerHTML;
				this.autoInputWidth(str);
				this.inputContainer.addClass('InputBoxContainerEdit');
				this.inputContainer.insertBefore(li);
				this.input.dom.value = str;
				this.input.focus();
				li.remove();

			}, this);// 显示编辑按钮
		}

		li.createChild({
			tag : 'img',
			src : this.deleteIconUrl
		}).addListener('click', function(ev, t) {
			li.remove();
			this.input.focus();
		}, this);// 显示删除按钮

		li.createChild({
			tag : 'input',
			name : name,
			type : 'hidden',
			value : value
		});// 添加隐藏域

		if (isValidate != false && !this.singleValidate(value)) {
			li.addClass('BlockInvalid');
		} else {
			li.addClass('Block');
		}

		this.input.dom.value = '';

	},

	/**
	 * 输入框根据内容的大小自动适应宽度
	 * 
	 * @param str
	 */
	autoInputWidth : function(str) {
		var width = str.bytes() * 8 + 10;
		if (width > 75) {
			this.input.setStyle('width', width + 'px');
		}
	},

	/**
	 * 初始化输入框
	 */
	initInput : function() {
		if (this.inputContainer.next()) {
			this.inputContainer.insertAfter(this.textContainer.last());
			this.input.focus();
		}
		this.inputContainer.removeClass('InputBoxContainerEdit');
		this.input.setStyle('width', '75px');
	},

	/**
	 * 单个文本验证
	 * 
	 * @param str
	 * @returns {Boolean}
	 */
	singleValidate : function(str) {
		if (str.length != 11)
			return false;
		else if (str.substring(0, 2) != "13" && str.substring(0, 2) != "15")
			return false;
		else if (isNaN(str))
			return false;
		else
			return true;
	},

	/**
	 * 内容重置
	 */
	reset : function() {
		var prev = this.inputContainer.prev();
		while (prev) {
			prev.remove();
			prev = this.inputContainer.prev();
		}
	},
	isValid : function() {
		return true;
	},

	validate : function() {
		if (this.textContainer.select('li.BlockInvalid').getCount() >= 1) {
			this.markInvalid([ this.invalidText ]);
			return false;
		}
		if (!this.inputContainer.prev()) {
			this.markInvalid([ this.blankText ]);
			return false;
		}
		this.clearInvalid();
		return true;
	},

	getName : function() {
		return this.name;
	}

});

所需要的样式为：

div.FakeText{
	margin:0px;
	background:#fff;
	border:1px solid #A7B1D0;
	color:#333;
	font-size:12px;
	text-align:left;
	cursor:text;
	display:block;
	overflow-y:auto;
	padding:0 0 1px;
	max-height:100px;
	line-height: 16px;
}

div.x-form-invalid{
	background:repeat-x bottom;
    border: 1px solid;
    background-color: #FFFFFF;
    background-image: url("../extjs/resources/images/default/grid/invalid_line.gif");
    border-color: #CC3300;
}

div.FakeText img {
	cursor:pointer;
	padding-left:0.3em;
	top:0.05em;
}
div.FakeText ul.InputUL{
	position:relative;
	list-style-type:none;
	margin:0;
	padding:0;
}


div.FakeText ul.InputUL li.Block{
	background-color:#F3F7FD;
	border:1px solid #BBD8FB;
	float:left;
	margin:1px 1px 0;
	padding:0.04em 0.3em 0.15em;
	text-decoration:none;
	vertical-align:middle;
	white-space:nowrap;
	width:auto;
}
div.FakeText ul.InputUL li.Selected{
	background-color:#DDECFE;
	border:1px solid #83AADA;
	float:left;
	margin:1px 1px 0;
	padding:0.04em 0.3em 0.15em;
	text-decoration:none;
	vertical-align:middle;
	white-space:nowrap;
	width:auto;
}
div.FakeText ul.InputUL li.BlockInvalid{
    background-color:#FDF5F5;
    border:1px solid #B55E5E;
	float:left;
	margin:1px 1px 0;
	padding:0.04em 0.3em 0.15em;
	text-decoration:none;
	vertical-align:middle;
	white-space:nowrap;
	width:auto;
}

div.FakeText ul.InputUL li.SelectedInvalid{
	background-color:#FFAEB9;
	border:1px solid #8C2424;
	float:left;
	margin:1px 1px 0;
	padding:0.04em 0.3em 0.15em;
	text-decoration:none;
	vertical-align:middle;
	white-space:nowrap;
	width:auto;
}


div.FakeText ul.InputUL li.InputBoxContainer{
	margin-bottom:0px;
	margin-top:0px;
}

div.FakeText ul.InputUL li.InputBoxContainerEdit{
	background-color:#F3F7FD;
	border:1px solid #BBD8FB;
	float:left;
	margin:1px 1px 0;
	text-decoration:none;
	vertical-align:middle;
	white-space:nowrap;
	width:auto;
}

div.FakeText ul.InputUL li.InputBoxContainerEdit .InputBox {
	background-color:#F3F7FD;
}

div.FakeText ul.InputUL li.InputBoxContainer input.InputBox{
	border-color:#FFFFFF;
	border-style:none solid solid;
	border-width:0;
	color:#000000;
	height:15px;
	margin-top:1px;
	margin-bottom:2px;
	outline:medium none;
	overflow:hidden;
	padding-bottom:0;
	width:5em;
}

只要把上边的代码引入项目中即可，怎么引用大家应该都知道吧！！