Grid header filters

Quote:

---

Originally Posted by d.zucconi

Well, I know... the "period" filter is a need for me too.
To support this kind of filter I'm thinking to develop (in the future :) ) a simple widget that groups 2 DateField. The getValue() method of this widget would return an object (or the equivalent JSON string) with 2 attributes (ex. {begin: "20080720", end: "20080820"} or {begin: "", end: "20080820"}). Then you can add this widget into your header filters.

I've already developed a similar widget to support "checkboxes filter" (see the attachment). This is only a simple (and, sorry, undocumented) example, but it works fine in my use-cases.

---

Doesnt work for me. Could you please share working MultiSelectField?

Hi,
This is my latest version of Ext.ux.form.MultiSelectField (for ExtJS 3.x)

Code:

---

Ext.namespace("Ext.ux.form");
/**
 * @class Ext.ux.form.MultiSelectField
 * @extends Ext.form.TriggerField
 * Un Field che permette la multiselezione di diversi valori inclusi in uno store.
 * Lo <code>store</code> dev'essere obbligatoriamente specificato nella configurazione.
 * E'possibile scegliere quali campi dei record vengono utilizzati per estrarre il valore e la descrizione
 * degli elementi selezionabili.<br>
 * Il field supporta sia store locali che remoti, pre-caricando eventualmente i valori se viene specificato
 * un <code>value</code> nella configurazione del campo.
 * @xtype multiselectfield
 */
Ext.ux.form.MultiSelectField = Ext.extend(Ext.form.TriggerField, {
    /**
      * @cfg {Ext.data.Store} store Lo store associato a questo field contenente i valori selezionabili.
      */
    store: null,
    /**
    * @cfg {String} valueField Il campo dei record store che contiene il valore per gli elementi. Default = <code>value</code>
    */
    valueField : "value",
    /**
    * @cfg {String} displayField Il campo dei record store che contiene la descrizione degli elementi. Default = <code>label</code>
    */
    displayField : "label",
    /**
    * @cfg {String} itemSelectedField Il campo dei record store che contiene il flag selezionato/non selezionato. Default = <code>itemSelected</code>
    */
    itemSelectedField : "itemSelected",
   
    selectedValues : [],
    selectedLabels : [],
    expanded : false,
   
    /**
    * @cfg {String} separator Il separatore usato per effettuare il join dei valori elementi selezionati. Default = <code>;</code>
    */
    separator: ';',
    storeLoaded: false,
    hiddenField: null,
   
    /**
    * @cfg {Boolean} showTooltip Se visualizzare un tooltip sul field con le descrizioni dei valori selezionati. Default <code>true</code>.
    */
    showTooltip: true,
    /**
    * @cfg {Boolean} enableClear Se abilitare il bottoncino di cancella selezione sulla lista di selezione. Default <code>false</code>
    */
    enableClear: false,
    /**
    * @cfg {Boolean} enableSelectAll Se abilitare il bottoncino di seleziona tutto sulla lista di selezione. Default <code>false</code>
    */
    enableSelectAll: false,
    /**
    * @cfg {Boolean} enableNotIn
    * Indica se abilitare il toggle button utile a indicare e modificare la logica di selezione tra <code>IN</code>
    * e <code>NOT IN</code>, controllata altrimenti solo tramite il parametro di configurazione <code>selectionMode</code>.
    */
    enableNotIn: false,
    /**
    * @cfg {Boolean} showSummary Se mostrare in testa alla lista di selezione un'area contenente la lista dei valori selezionati. Default <code>false</code>
    */
    showSummary: false,
    itemDescCls: '',
    clearSelectionText: 'Clear selection',
    notInText: 'Not equal to',
    selectAllText: 'Select all',
    selectorWidth: 0,
    /**
    * @cfg {int} minSelectorWidth Larghezza minima dell'area di selezione. Default <code>200</code>
    */
    minSelectorWidth: 200,
    /**
    * @cfg {int} selectorHeight Altezza di default per il pannello di selezione. Default <code>400</code>
    */
    selectorHeight: 400,
    /**
    * @cfg {int} summaryHeight Altezza dell'area di riepilogo presentata se <code>showSummary</code> = <code>true</code>. Default = 28
    */
    summaryHeight: 28,
    /**
    * @cfg {Ext.XTemplate|String} selectorTpl Il template per produrre l'HTML del selettore. Per default =
<pre>
<tpl for=".">
<div class="x-ux-msf-item" itemValue="{'+this.valueField+'}">
<img src="' + Ext.BLANK_IMAGE_URL + '" class="x-ux-msf-item-icon x-ux-msf-item-icon-{[values.' + this.itemSelectedField + '?"selected":"unselected"' + ']}">
<span class="x-ux-msf-item-desc x-ux-msf-item-desc-{[values.' + this.itemSelectedField + '?"selected":"unselected"' + ']} '+this.itemDescCls+'">{'+this.displayField+'}</span>
</div>,
</tpl>
</pre>
    */
    selectorTpl: null,
   
    //Private
    selectorShown: false,
   
    /**
    * @cfg {Array|Object} items Utilizzato quando il parametro di configurazione <code>store</code> non è specificato, permette di
    * definire implicitamente lo store da utilizzare tramite un Array di Array (come previsto da Ext.data.ArrayReader) o
    * tramite un oggetto JavaScript che ha come nomi attributi i codici dei valori da presentare e come valore associato a ciascun
    * attributo la descrizione del valore.<br>
    * I nomi dei campi per i record inclusi in questo store generato automaticamente
    * saranno quelli definiti dai parametri di configurazione <code>valueField</code> e <code>displayField</code>.
    */
    items: null,
   
    /**
    * @cfg {String} selectionMode
    * Indica la modalità di selezione utilizzata dal componente. Questa può essere:<br>
    * <ul>
    * <li><code>in</code>: I valori selezionati sono da intendere con logica <code>IN</code></li>
    * <li><code>notin</code>: I valori selezionati sono da intendere con logica <code>NOT IN</code></li>
    * </ul>
    * Questa modalità influenza il valore generato da {@link #getValue()} che sarà preceduto da <code>&lt;&gt;</code>
    * nel caso di logica <code>notin</code>.
    */
    selectionMode: 'in',
   
    notInButton: null,


    initComponent : function() {


        Ext.ux.form.MultiSelectField.superclass.initComponent.call(this);


        this.addEvents(
            /**
          * @event selectorshow
          * Segnalato quando il pannello di selezione viene mostrato
          * @param {Ext.ux.form.MultiSelectField} this
          * @param {Array} values I valori selezionati attualmente
          * @param {Ext.Panel} selector Il pannello di selezione valori
          */   
            "selectorshow",
            /**
          * @event selectorhide
          * Segnalato quando il pannello di selezione viene nascosto
          * @param {Ext.ux.form.MultiSelectField} this
          * @param {Array} values I valori selezionati attualmente
          * @param {Ext.Panel} selector Il pannello di selezione valori
          */
            "selectorhide",
            /**
          * @event select
          * Segnalato quando un valore viene cliccato nel pannello di selezione (variandone la selezione)
          * @param {Ext.ux.form.MultiSelectField} this
          * @param {Object} value Il valore selezionato
          * @param {Object} desc La descrizione del valore selezionato
          * @param {Boolean} selected Lo stato (selezionato o meno) dopo il click
          * @param {Ext.data.Record} record Il record soggetto della variazione
          * @param {Ext.data.Store} store Lo store
          * @param {String} selectionMode il selection mode corrente
          */
            "select",
            /**
          * @event itemcontextmenu
          * Segnalato quando viene premuto il tasto destro su di un valore selezionabile
          * @param {Ext.ux.form.MultiSelectField} this
          * @param {Boolean} selected Se il valore è selezionato o meno
          * @param {Ext.data.Record} record Il record dello store a cui corrisponde il valore
          * @param {Ext.data.Store} store Lo store
          * @param {Ext.EventObject} ev L'evento
          */
            "itemcontextmenu",
            /**
          * @event itemcontainerclick
          * Segnalato quando viene cliccato il mouse nell'area di selezione senza che questo sia su
          * alcun item selezionabile
          * @param {Ext.ux.form.MultiSelectField} this
          * @param {Ext.EventObject} ev L'evento
          */
            "itemcontainerclick");


        //this.readOnly = true;
        this.selectorPanel = null;


        if (!this.store) {
            if (this.items instanceof Ext.data.Store) {
                this.store = this.items;
            } else if (Ext.isArray(this.items)) {
                this.store = new Ext.data.ArrayStore( {
                    fields : [ this.valueField, this.displayField ],
                    data : this.items,
                    idProperty : this.valueField
                });
            } else {
                var storeData = [];
                for ( var key in this.items)
                    storeData.push( [ key, this.items[key] ]);
                this.store = new Ext.data.ArrayStore( {
                    fields : [ this.valueField, this.displayField ],
                    data : storeData,
                    idProperty : this.valueField
                });
            }
        }


        //this.store.on("load", this.buildMenu, this);


        //Modalità store (compatibile con Ext.form.ComboBox)
        if(this.mode)
            this.localStore = this.mode == 'local';
       
        //Se la modalità store non è specificata provo a ricavarla dal tipo store
        if(!Ext.isDefined(this.localStore))
            this.localStore = !this.store.proxy;


       
        /*this.on("keyup", function(tf, eo){
            if(eo.getKey() == eo.BACKSPACE || eo.getKey() == eo.DELETE)
            {
                eo.stopEvent();
                var oldVals = this.values;
                this.reset();
                this.fireEvent("change", this, this.values, oldVals);
            }
            else if(eo.getKey() != eo.ENTER)
            {
                this.setRawValue(this.labels.join(","));
            }
        }, this);*/
    },
   
    onRender : function(ct, position) {
        Ext.ux.form.MultiSelectField.superclass.onRender.call(this, ct,    position);
       
        //Rimuovo nome dall'elemento del trigger field
        this.el.dom.removeAttribute('name');
        //Il nome viene dato all'hidden
        var hiddenCfg = {
            tag:'input',
            type:'hidden',
            value: this.selectedValues.join(this.separator),
            id: this.id+":selectedValues"
        };
        if(!Ext.isEmpty(this.name))
            hiddenCfg.name = this.name;
       
        this.hiddenField = this.el.insertSibling( hiddenCfg,
            'before',
            true);
        if(Ext.isGecko){
            this.el.dom.setAttribute('autocomplete', 'off');
        }
        this.updateSelectedLabels();


    },
   
    initValue : function(){
        Ext.ux.form.MultiSelectField.superclass.initValue.call(this);
        if(this.hiddenField)
        {
            this.hiddenField.value =
                Ext.isDefined(this.hiddenValue) ? this.hiddenValue :
                Ext.isDefined(this.value) ? this.value : '';
        }
    },
   
    onNotInClick: function(b, notIn)
    {
        var oldJoin = this.buildTextValue();
       
        this.selectionMode = notIn ? 'notin' : 'in';
       
        this.changeSelection(this.selectedValues);
       
        var curJoin = this.buildTextValue();
        if( oldJoin != curJoin)
            this.fireEvent('change', this, curJoin, oldJoin);
    },
   
    buildSelector : function()
    {
        if(this.selectorPanel)
            return;
       
        if(!this.selectorTpl)
        {
            this.selectorTpl = new Ext.XTemplate(
                    '<tpl for=".">',
                    '<div class="x-ux-msf-item" itemValue="{'+this.valueField+'}">',
                    '<img src="' + Ext.BLANK_IMAGE_URL + '" class="x-ux-msf-item-icon x-ux-msf-item-icon-{[values.' + this.itemSelectedField + '?"selected":"unselected"' + ']}">',
                    '<span class="x-ux-msf-item-desc x-ux-msf-item-desc-{[values.' + this.itemSelectedField + '?"selected":"unselected"' + ']} '+this.itemDescCls+'">{'+this.displayField+'}</span>',
                    '</div>',
                    '</tpl>'
            );
        }
        else if(Ext.type(this.selectorTpl) == 'string')
        {
            this.selectorTpl = new Ext.XTemplate(this.selectorTpl);
        }
       
        this.selectorDataView = new Ext.DataView({
            store: this.store,
            tpl: this.selectorTpl,
            multiSelect: false,
            overClass:'x-ux-msf-item-over',
            itemSelector:'div.x-ux-msf-item',
            region: 'center',
            style: {overflow: 'auto'},
            listeners: {
                click: this.onItemClick,
                contextmenu: this.onItemContextMenu,
                containerclick: this.onItemContainerClick,
                scope: this
            }
        });
       
        var selItems = [this.selectorDataView];
       
        if(this.showSummary)
        {
            this.selectorSummary = new Ext.form.DisplayField({
                region: 'north',
                height: this.summaryHeight,
                style: {overflow: 'hidden'},
                value: this.getRawValue(),
                cls: 'x-ux-msf-summary'
            });
            selItems.push(this.selectorSummary);
        }
       
        var tools = [];
        if(this.enableSelectAll)
        {
            tools.push({
                id: 'plus',
                handler: this.onSelectAll,
                scope: this,
                qtip: this.selectAllText
            });
        }
        if(this.enableClear)
        {
            tools.push({
                id: 'minus',
                handler: this.onClearSelection,
                scope: this,
                qtip: this.clearSelectionText
            });
        }
       
        var buttons = null;
        if(this.enableNotIn)
        {
            this.notInButton = new Ext.Button({
                text: this.notInText,
                enableToggle: true,
                scope: this,
                toggleHandler: this.onNotInClick,
                pressed: this.selectionMode === 'notin'
            });
            buttons = [this.notInButton];
        }
       
        this.selectorPanel = new Ext.Panel({
            layout: 'border',
            //autoWidth: true,
            height: this.selectorHeight,
            items: selItems,
            buttonAlign: 'center',
            buttons: buttons,
            tools: tools.length > 0 ? tools : null
        });
       
        //this.selectorPanel.mon('render',function(){this.fireEvent('selectorrender',this,this.selectorPanel);},this);
    },
   
    /**
    * Visualizza il pannello di selezione
    * @method showSelector
    */
    showSelector: function()
    {
        this.buildSelector();
       
        if(!this.selectorLayer)
        {
            this.selectorLayer = new Ext.Layer(
            {
                constrain: false,
                shadow: true,
                cls: 'x-ux-msf-layer'
            });
            this.selectorLayer.swallowEvent('mousewheel');
            this.selectorPanel.render(this.selectorLayer.createChild());
        }
       
       
        var pad = this.selectorLayer.getFrameWidth('tb'),
            hpad = this.selectorLayer.getFrameWidth('lr'),
            ha = this.getPosition()[1] - Ext.getBody().getScroll().top,
            hb = Ext.lib.Dom.getViewHeight() - ha-this.getSize().height,
            space = Math.max(ha, hb, this.minHeight || 0) - this.selectorLayer.shadowOffset - pad - 5;
       
        var width = this.selectorWidth || Math.max(this.wrap.getWidth(), this.minSelectorWidth);
        var height = Math.min(space, this.selectorHeight);


        this.selectorDataView.setWidth(width - hpad);
        this.selectorLayer.show();
        this.selectorPanel.setSize(width - hpad, height - pad);
       
        var itemListHeight = this.selectorDataView.el ? this.selectorDataView.el.getComputedHeight() : 0;
        var freeBodyHeight = this.selectorPanel.body.getComputedHeight() - itemListHeight - 2;
        if(this.showSummary)
            freeBodyHeight -= this.summaryHeight;


        if(freeBodyHeight > 0)
        {
            height -= freeBodyHeight;
            this.selectorPanel.setSize(width - hpad, height - pad);
        }
       
        this.selectorLayer.setSize(width, height);
       
        this.selectorLayer.alignTo(this.el, "tl-bl?");
       
       
        Ext.getDoc().on({
            scope: this,
            mousewheel: this.hideSelectorIf,
            mousedown: this.hideSelectorIf
        });
       
        this.selectorShown = true;
        this.fireEvent('selectorshow',this, this.selectedValues, this.selectorPanel);
    },
   
    /**
    * Nasconde il pannello di selezione
    * @method hideSelector
    */
    hideSelector: function()
    {
        if(!this.selectorShown)
            return false;
       
        if(this.selectorLayer)
        {
            this.selectorLayer.hide();
        }
       
        Ext.getDoc().un('mousewheel', this.hideSelectorIf, this);
        Ext.getDoc().un('mousedown', this.hideSelectorIf, this);
       
        this.selectorShown = false;
        this.fireEvent('selectorhide',this, this.selectedValues, this.selectorPanel);
    },
   
    collapse : function(){
        if(this.hideSelector() !== false)
          this.fireEvent('collapse', this);
    },


    // private
    hideSelectorIf : function(e){
        if(!e.within(this.wrap) && !e.within(this.selectorLayer)){
            this.hideSelector();
        }
    },
   
    // private
    validateBlur : function(){
        return !this.selectorShown;
    },
   
    getCurrentSelection: function()
    {
        var res = [];
        this.store.each(function(r){
            if(r.get(this.itemSelectedField))
                res.push(r.get(this.valueField));
        },this);
        return res;
    },


    onTriggerClick : function(e)
    {
        Ext.ux.form.MultiSelectField.superclass.onTriggerClick.call(this, e);


        if (this.disabled) {
            return;
        }


        if(this.selectorShown)
        {
            this.hideSelector();
        }
        else
        {
            if(this.store.proxy && !this.store.lastOptions)
            {
                this.store.load({
                    callback: function(){
                        this.showSelector();
                    },
                    scope: this
                });
            }
            else
                this.showSelector();
        }
    },


    /*onCheckChange: function(check, bChecked)
    {
        var oldVals = this.selectedValues;
        this.changeSelection();//check, bChecked, this.selectedValues, oldVals);
        this.fireEvent("change", this, this.selectedValues, oldVals);
    },*/


    onDestroy : function() {
        Ext.destroy(
                this.selectorDataView,
                this.selectorSummary,
                this.selectorPanel,
                this.notInButton,
                this.selectorLayer);
        Ext.ux.form.MultiSelectField.superclass.onDestroy.call(this);
        /*if(this.store)
            this.store.removeListener("load", this.buildMenu, this);*/
    },
   
    /**
    * @private
    * @return {String}
    */
    buildTextValue: function()
    {
        return (this.selectionMode === 'notin' && !Ext.isEmpty(this.selectedValues) ? '<>' : '')+this.selectedValues.join(this.separator);
    },


    changeSelection : function(selectedValues) {
       
        if(!selectedValues)
            selectedValues = this.getCurrentSelection();
        this.selectedValues = selectedValues;
        this.value = this.buildTextValue();
        if(this.hiddenField)
        {
            this.hiddenField.value = this.value;
        }
        this.updateSelectedLabels();
    },
   
    updateSelectedLabels: function()
    {
        var labels = [];
        var vals = this.selectedValues;
        this.store.each(function(r){
            var val = r.get(this.valueField);
            //Mi assicuro sempre che il valore sia una stringa prima di verificarne il matching
            if(Ext.isDefined(val))
                val = '' + val;
            if(vals.indexOf(val) >= 0)
            {
                labels.push(r.get(this.displayField));
            }
        },this);
        this.selectedLabels = labels;
        var rawVal = this.selectionMode === 'notin' && !Ext.isEmpty(this.selectedLabels) ? '<> ' : '';
        this.setRawValue(rawVal+this.selectedLabels.join(','));
        if(this.showTooltip && this.rendered)
            this.el.set({title: this.getRawValue()});
        if(this.selectorSummary)
            this.selectorSummary.setValue(rawVal+this.selectedLabels.join(', '));
    },
   
    updateSelection: function()
    {
        /*
        * Rimuovo dai valori attualmente selezionati quelli
        * non compatibili con i valori previsti dallo store
        */
        if(!Ext.isEmpty(this.selectedValues))
        {
            var svf = [];
            for(var i=0; i < this.selectedValues.length; i++)
            {
                var val = this.selectedValues[i];
                var index = this.store.findBy(function(record){
                    var str = record.get(this.valueField);
                    if(Ext.isDefined(str))
                        str = ''+str;
                    return str == val;   
                }, this);
                if(index >= 0)
                    svf.push(val);
            }
            if(svf.length != this.selectedValues.length)
            {
                this.selectedValues = svf;
                this.value = this.buildTextValue();
                if(this.hiddenField)
                {
                    this.hiddenField.value = this.value;
                }
            }
        }
       
        this.updateSelectedLabels();
        var sv = this.selectedValues;
        this.store.each(function(r){
            var val = r.get(this.valueField);
            //Mi assicuro sempre che il valore sia una stringa prima di verificarne il matching
            if(Ext.isDefined(val))
                val = '' + val;
            r.set(this.itemSelectedField,sv.indexOf(val) >= 0);
        },this);
    },
   
    /**
    * Recupera il valore attuale.
    * A seconda del valore del parametro di configurazione <code>selectionMode</code> il risultato sarà uguale alla concatenazione dei valori
    * selezionati (utilizzando il separatore <code>separator</code>) nel caso di selectionMode = <code>in</code>. Nel caso di selectionMode = <code>notin</code>
    * il valore selezionato sarà preceduto da <code>&lt;&gt;</code>.
    * @method getValue
    * @return {String} La stringa costruita facendo il join dei valori selezionati con il separatore <code>separator</code> ed eventualmente
    * preceduta da &lt;&gt; nel caso di selectionMode = <code>notin</code>
    */
    getValue : function()
    {
        var prefix = this.selectionMode === 'notin' ? '<>' : '';
        return prefix + this.selectedValues.join(this.separator);
    },
   
    /**
    * Restituisce l'array dei valori selezionati
    * @method getValueArray
    * @return {Array} L'array dei valori selezionati
    */
    getValueArray: function()
    {
        return this.selectedValues;
    },
   
    setRawValue : function(v){
        return this.rendered && this.el ? (this.el.dom.value = (Ext.isEmpty(v) ? '' : v)) : '';
    },
   
    /**
    * @private
    * @param {String} v Il selectionMode
    */
    setSelectionMode: function(v)
    {
        if(this.notInButton)
        {
            this.notInButton.toggle(v === 'notin', true);
        }
        this.selectionMode = v;
        this.updateSelectedLabels();
    },
   
    /**
    * Restituisce la modalità di selezione corrente tra <code>in</code> e <code>notin</code>
    * @method getSelectionMode
    * @return {String} La modalità di selezione corrente
    */
    getSelectionMode: function()
    {
        return this.selectionMode;
    },


    /**
    * Setta la selezione corrente. Se il valore è una stringa e questa è preceduta da <code>&lt;&gt;</code>, verrà modificato
    * anche il <code>selectionMode</code> di questo controllo per passare a <code>notin</code>.
    * @method setValue
    * @param {String|Array} value I valori da selezionare separati da <code>separator</code>
    */
    setValue : function(sValue) {


        if(Ext.isArray(sValue))
        {
            this.selectedValues = [].concat(sValue);
            this.value = this.selectedValues.join(this.separator);
        }
        else
        {
            if (Ext.isEmpty(sValue))
            {
                this.selectedValues = [];
                this.value = '';
            }
            else
            {
                var strval = Ext.ux.util.StringUtils.trim(''+sValue);
                if(strval.indexOf('<>') == 0)
                {
                    this.setSelectionMode('notin');
                    strval = strval.substring(2, strval.length);
                }
                else
                {
                    this.setSelectionMode('in');
                }
                this.selectedValues = strval.split(this.separator);
                this.value = this.buildTextValue();
            }
        }
       
        if(this.hiddenField)
        {
            this.hiddenField.value = this.value;
        }
       
        if(this.localStore)
        {
            this.updateSelection();
        }
        else
        {
            if(this.storeLoaded)
            {
                this.updateSelection();
            }
            else
            {
                this.store.load({
                    callback : function(){
                        this.storeLoaded = true;
                        this.updateSelection();
                    },
                    scope : this
                });
            }
        }
        return this;
    },


    /**
    * Resetta la selezione attuale
    * @method reset
    */
    reset : function() {
        this.setValue(null);
    },
   
    /**
    * Restituisce il numero di valori attualmente selezionati
    * @method numChecked
    * @return {int} Il numero di valori selezionati
    */
    numChecked : function() {
        return Ext.isArray(this.selectedValues) ? 0 : this.selectedValues.length;
    },
   
    getSelectedValues: function()
    {
        return this.selectedValues;
    },
   
    /**
    * Restituisce un array delle descrizioni dei valori selezionati
    * @method getSelectedLabels
    * @return {Array} Un array delle descrizioni dei valori selezionati
    */
    getSelectedLabels: function()
    {
        return this.selectedLabels;
    },
   
    onItemClick: function(dv, index, el, ev)
    {
        var record = this.store.getAt(index);
        var selected = record.get(this.itemSelectedField) ? true : false;
        record.set(this.itemSelectedField,!selected);
        this.fireEvent('select', this, record.get(this.valueField), record.get(this.displayField), record.get(this.itemSelectedField), record, this.store, this.selectionMode);
        var oldJoin = this.buildTextValue();
        this.changeSelection();
        var curJoin = this.buildTextValue();
        if( oldJoin != curJoin)
            this.fireEvent('change', this, curJoin, oldJoin);
    },
   
    onItemContainerClick: function(dv, ev)
    {
        this.fireEvent('itemcontainerclick', this, ev);
    },
   
    onItemContextMenu: function(dv, index, el, ev)
    {
        var record = this.store.getAt(index);
        if(record)
        {
            var selected = record.get(this.itemSelectedField) ? true : false;
            this.fireEvent('itemcontextmenu', this, selected, record, this.store, ev);
        }
    },
   
    getAllValues: function()
    {
        var res = [];
        this.store.each(function(r){
            res.push(r.get(this.valueField));
        },this);
        return res;
    },
   
    getValuesBy: function(selFn, scope)
    {
        var res = [];
        var records = this.store.queryBy(selFn, scope ? scope : this);
        records.each(function(record){
            res.push(record.get(this.valueField));
        }, this);
        return res;
    },
   
    selectAll: function()
    {
        var vals = this.getAllValues();
        this.setValue(vals);
    },
   
    /**
    * Seleziona tutti i valori i cui record sono ammessi
    * dalla funzione di selezione indicata. I valori individuati
    * vengono selezionati aggiungendoli alla selezione corrente
    * @method selectBy
    * @param {Function} selFn La funzione di selezione. Le vengono passati i singoli record dello store.
    * Deve restituire true o false per indicare se il record dev'essere selezionato
    * @param {Function} scope L'eventuale scope della funzione di ricerca. Se non indicato viene
    * usato come scope questo stesso oggetto
    */
    selectBy: function(selFn, scope)
    {
        var vals = this.getValuesBy(selFn, scope);
        if(vals.length == 0)
            return;
        var curVals = this.getValueArray();
        for(var i=0;i<vals.length;i++)
        {
            if(curVals.indexOf(vals[i]) < 0)
                curVals.push(vals[i]);
        }
        this.setValue(curVals);
    },
   
    /**
    * Deseleziona tutti i valori i cui record sono ammessi
    * dalla funzione di selezione indicata. I valori individuati
    * vengono deselezionati rimuovendoli alla selezione corrente
    * @method unselectBy
    * @param {Function} selFn La funzione di selezione. Le vengono passati i singoli record dello store.
    * Deve restituire true o false per indicare se il record dev'essere deselezionato
    * @param {Function} scope L'eventuale scope della funzione di ricerca. Se non indicato viene
    * usato come scope questo stesso oggetto
    */
    unselectBy: function(selFn, scope)
    {
        var vals = this.getValuesBy(selFn, scope);
        if(vals.length == 0)
            return;
        var curVals = this.getValueArray();
        if(curVals.length == 0)
            return;
        var res = [];
        for(var i=0;i<curVals.length;i++)
        {
            if(vals.indexOf(curVals[i]) < 0)
                res.push(curVals[i]);
        }
        this.setValue(res);
    },
   
    /**
    * Imposta il valore di selezione corrente selezionando solo i record
    * individuati come selezionabili dalla funzione indicata.
    * La selezione corrente viene completamente rimpiazzata dalla selezione
    * formulata secondo la funzione indicata.
    * @method setValueBy
    * @param {Function} selFn La funzione di selezione. Le viene passato ciascun
    * record dello store e deve restituire true o false per indicare se questo record
    * rientrerà nella nuova selezione
    * @param {Function} scope Lo scope per la funzione. Se non indicato viene utilizzato
    * lo scope corrente
    */
    setValueBy: function(selFn, scope)
    {
        var res = this.getValuesBy(selFn, scope);
        this.setValue(res);
    },
   
    onClearSelection: function()
    {
        var oldVals = this.selectedValues;
        this.setValue('');
        var oldJoin = oldVals.join(this.separator);
        var curJoin = this.selectedValues.join(this.separator);
        if(oldJoin != curJoin)
            this.fireEvent("change", this, curJoin, oldJoin);
    },
   
    onSelectAll: function()
    {
        var oldVals = this.selectedValues;
        this.setValue(this.getAllValues());
        var oldJoin = oldVals.join(this.separator);
        var curJoin = this.selectedValues.join(this.separator);
        if(oldJoin != curJoin)
            this.fireEvent("change", this, curJoin, oldJoin);
    },
   
    /**
    * Permette di accedere al pannello di selezione (se questo è già stato renderizzato)
    * @method getSelectorPanel
    * @return {Ext.Panel} Il pannello di selezione
    */
    getSelectorPanel: function()
    {
        return this.selectorPanel;
    }


});


Ext.reg('multiselectfield', Ext.ux.form.MultiSelectField);

---