javascript - ExtJS - Differentiate items in MultiSelect -

i have 2 multiselects in itemselector, in formpanel. each multiselect composed of 2 stores: left side, , right side (with arrows move items between 2).

when load panel, feed reference, in order highlight items moved 1 side other (e.g. set style red moved items) because today there no way differentiate them.

i managed catch event afteradd on stores , apply style through dom access. works during trace, later on remaining extjs standard calls performed, overriding style applied...

i feel i'm doing not way, i'm new extjs i'm bit lost here... !

edit : here sample of code, forgot tell worked on extjs 3.2 (hum...). pool_cnx_to_rule formpanel:

pool_cnx_to_rule.aftermethod('add', function () {     //var pools_available_ = ext.getcmp('pools_available').getvalue();     var pools_selected_ = ext.getcmp('pools_selected').getvalue();     var i, j;     (i = 0; < pool_cnx_to_rule.data.length; ++i)     {         var pool_descr_ = pool_cnx_to_rule.data.items[i].data.pool_descr;         var changed = true;         (j = 0; j < pool_cnx_to_rule_ref.length; ++j)         {             if (pool_cnx_to_rule_ref[j] == pool_descr_)             {                 changed = false;                 break;             }         }         if (changed)         {             var pools_selected_ = ext.getcmp('pools_selected');             var nodes_ = pools_selected_.view.getnodes();             var node_ = nodes_[j];             var record_ = pools_selected_.view.getrecord(node_);             record_.set('color', 'red');             // instead of assigning pools_selected_.view, create var             var view_ = new ext.listview({                 multiselect: true,                 store: pools_selected_.store,                 columns: [{                     dataindex: pools_selected_.displayfield,                     header: 'value',                     width: 1,                     tpl: new ext.xtemplate(                         '<tpl if="red==true">',                         '<div class="red">{' + pools_selected_.displayfield + '}</div>',                         '<tpl else>',                         '<div>{' + this.displayfield + '}</div>',                         '</tpl>'                         ),                 }],                 hideheaders: true             });             pools_selected_.fs.items.clear();             pools_selected_.fs.add(view_);             pools_selected_.fs.dolayout();         }     } }); 

for ext 4.2

here fiddle colors records choose. (to use it, select items , press 'red'..) not take care of adding , catching events coloring of selected items, understand problematic part you.

basically added listconfig multiselection, transfers it's boundlist:

listconfig: {     itemtpl: '<div class="my-boundlist-item {color}">{numbername}</div>', }  

the template getting it's values multiselect store, can set "color" field records want:

myrecord.set('color', 'red'); 

by doing item set have class 'red'. last thing add css class:

.red {     background-color: rgba(255,0,0,0.2); } 

note made quite transparent, selection , hovering color still noticeable.

for ext 3.2

here fiddle. @vdp mentioned, ext 3.2 uses listview multiselect, can tpl config (templatecolumn not available listview, grid)

however multiselect doesn't expose config, have override onrender of multiselect, here interesting part:

ext.ux.form.configurablemultiselect = ext.extend(ext.ux.form.multiselect,  {     listitemtpl: null,      onrender: function(ct, position){         ...         var listitemtpl = this.listitemtpl || '<div>{'+this.displayfield+'}</div>';          this.view = new ext.listview({             multiselect: true,             store: this.store,             columns: [{                   dataindex: this.displayfield,                 header: 'value',                 width: 1,                 tpl: listitemtpl             }],             hideheaders: true         });         ... 

now can use extended class pass listitemtpl config view:

items: [{     xtype: 'confmultiselect', //the new xtype registered     fieldlabel: 'multiselect',     name: 'multiselect',     id: 'multiselect-field',     allowblank: false,     displayfield: 'text',     store: store,     listitemtpl: '<div class="inner-boundlist-item {color}">{text}</div>', }], 

the rest pretty same in ext 4.2