ExtJS - Differentiate items in MultiSelect

Question

I have 2 MultiSelects in an ItemSelector, itself in a FormPanel. Each MultiSelect is composed of 2 Stores: left side, and right side (with arrows to move items between the 2).

When I load the panel, I feed a reference, in order to highlight the items moved from one side to the other (e.g. set style as red for moved items) because today there is no way to differentiate them.

I managed to catch event afterAdd on the Stores and apply my style through DOM access. That works during trace, but later on remaining ExtJS standard calls are performed, overriding the style I just applied...

I feel what I'm doing is not the good way, but I'm new to ExtJS so I'm a bit lost here... Thanks for your help !

EDIT : here is a sample of my code, I forgot to tell that I worked on ExtJS 3.2 (hum...). pool_cnx_to_rule is my 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;
    for (i = 0; i < pool_cnx_to_rule.data.length; ++i)
    {
        var pool_descr_ = pool_cnx_to_rule.data.items[i].data.pool_descr;
        var changed = true;
        for (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();
        }
    }
});

Answer 1

For Ext 4.2

Here is a fiddle which colors the records you choose. (to use it, select some items and press 'red'..) It does not take care of adding and catching events only the coloring of selected items, as I understand this is the problematic part for you.

Basically I added a listConfig to the multiSelection, which transfers it to it's boundList:

listConfig: {
    itemTpl: '<div class="my-boundlist-item {color}">{numberName}</div>',
} 

The template is getting it's values from the multiselect store, so we can just set the "color" field for the records we want:

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

By doing this the item which we set will now have the class 'red'. Last thing was to add css for the class:

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

Note that I made it quite transparent, so the selection and hovering color will still be noticeable.

For Ext 3.2

Here is the fiddle. As @VDP mentioned, Ext 3.2 uses ListView for the multiselect, which can get a tpl config (templatecolumn is actually not available for listview, just for grid)

However MultiSelect doesn't expose this config, so we have to override the onRender of multiselect, here is the 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 we can use the extended class to pass a listItemTpl config to the view:

items: [{
    xtype: 'confmultiselect', //the new xtype we 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 is pretty much the same as in Ext 4.2