How to make a different div for each emails in a text field input in extJs?

Question

I have a created a text field where I need to take emails as input. I want to put each email selected in different background color (making it more user friendly). Is there any way to do this in Ext JS?

Please refer to the id "emailTo' in the code. Thank you

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]);
}

});