Page 18 of 18 FirstFirst ... 8161718
Results 171 to 172 of 172

Thread: Grid header filters

  1. #171
    Sencha User
    Join Date
    Oct 2016
    Posts
    1

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

    Quote Originally Posted by d.zucconi View Post
    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?

  2. #172
    Sencha Premium User d.zucconi's Avatar
    Join Date
    Jun 2008
    Location
    Piacenza (Italy)
    Posts
    102

    Default

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

Page 18 of 18 FirstFirst ... 8161718

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •