如何在extJs中输入的文本字段中为每封电子邮件创建不同的div？

Question

我创建了一个文本字段，我需要将电子邮件作为输入。我想将每个电子邮件选择为不同的背景颜色（使其更加用户友好）。在Ext JS中有没有办法做到这一点？

请参阅代码中的id“emailTo”。谢谢

var emailDlg = new Ext.Window(
            {
                width : 900,
                height : 600,
                minWidth : 300,
                minHeight : 220,
                closable : false,
                modal : true,
                resizable : false,
                autoDestroy : true,
                title : 'New email notification',
                layout : 'fit',
                buttonAlign : 'center',
                items : [ {
                    xtype : 'form',
                    defaultType : 'textfield',

                    fieldDefaults : {
                        labelWidth : 60
                    },
                    layout : {
                        type : 'vbox',
                        align : 'stretch',
                        pack : 'start'
                    },
                    bodyPadding : 5,
                    border : false,
                    items : [ {
                        id : 'emailTo',
                        fieldLabel : 'To',
                        id : 'textInput',
                        name : 'to'
                    }, {
                        id : 'emailSubject',
                        fieldLabel : 'Subject',
                        name : 'subject'
                    }, {
                        id : "msgbody",
                        autoDestroy : true,
                        xtype : 'displayfield',
                        hideLabel : true,
                        name : 'msg',
                        flex : 1
                    } ]
                } ],
});

Answer 1

Ext.define('App.ux.form.field.MultipleInputValueField', {
extend : 'Ext.form.field.Tag',
alias : ['widget.multiinputvaluefield', 'widget.multiinputvalue'],

/** @type Function */
validationFn: null,
/** @type RegEx */
validationRe: null,

filterPickList: true,

/**
 * to be set
 * @type Array (Enter , ;)
 */
keyPressKeys: [13, 186, 188],
splitChars: /[\n,;]/,

initComponent : function() {
	var me = this;
	var defConfig = {
		editable: true,
		displayField: 'id',
    	enableKeyEvents: true,
		store: Ext.create('Ext.data.Store', {
			fields: [{name: 'id', type: 'string'}],
			idProperty: 'id'
		})
	};

	Ext.apply(me, defConfig);
	me.callParent();
},

listeners: {
    keyup: function (me, e) {
    	var input = me.el.down('input').dom,
    		strArray = input.value.split(me.splitChars);
		
        if( strArray.length>1 || Ext.Array.contains(me.keyPressKeys, e.keyCode) ) {
        	var vals = [];
        	Ext.each(strArray, function (str) {
        		str = str.trim();
        		if( Ext.isEmpty(str) )
        			return;
        		if( ( me.validationFn && Ext.isFunction(me.validationFn) && !me.validationFn(str) ) ||
            			( me.validationRe && !me.validationRe.test(str) ) )
            		return me.markInvalid(me.invalidText||'This field is not valid');
				
                vals.push(str);
        	});
			Ext.each((me.value||[]).reverse(), function (val) {
				vals.unshift(val);
			});
			me.setValue(vals);
        }
    }
},

setValue: function (value, add, skipLoad) {
	var me = this, data = [], vals = [];
	
	if( !Ext.isEmpty(value) ) {
		if( Ext.isString(value) )
			value = value.split(me.splitChars);
		if( !Ext.isArray(value) )
			value = [value];
		
		var addValues = function (val) {
			if( Ext.isEmpty(val) )
				return;
			if( Ext.isString(val) ) {
				data.push({id: val});
				vals.push(val);
			} else if( Ext.isObject(val) && val.isModel ) {
				data.push({id: val.get('id')});
				vals.push(val.get('id'));
			} else if( Ext.isArray(val) ) {
				addValues(val);
			}
		};
		
		Ext.each(value, function (val) {
			addValues(val);
		});
	}
	
	if( me.el )
    	me.el.down('input').dom.value = '';
	
    me.getStore().loadData(data);
	App.ux.form.field.MultipleInputValueField.superclass.setValue.apply(me, [vals]);
}

});