Modified ExtJS LOVCombo (List of Values) ux plugin - with select all, deselect all, text filter, bubble up and bubble down of selection

Here is one interesting modification to LOVCombo ux plugin in ExtJS 3.4. The original ExtJS ux Lovcombo i.e.Ext.ux.form.LovCombo plugin was developed by Jozef Sakáloš and can be still found at http://lovcombo.extjs.eu/. In Ext 4.x onwards, similar modifications can be applied to combo-box through plugin property.
Following modification to Ext.ux.form.LovCombo, enables it to have "Select All", "Deselect All", "Text Filtering on values", "bubbling up and down of selection events". Its just a toolbar added in xtemplate of combo-box's dropdown list, and this toolbar has all these buttons, filter text-fields, etc.

Here is how it looks like -
It has five features -
1) Select All / Deselect All checkbox - to check/uncheck all values and its not part of your data, so selection / deselection logic is separate from user's data.

 2) Text Filter - In case of long lists, this will be handy, to filter out values and select /deselect them.

 3) Total Selection Counter - Shows how many values are selected out of total values from combobox's store.

 4) Bubbling up and down of selection and deselection - As Select All / Deselect All works, it's reverse i.e. if we select all values individually then "Select All" checkbox gets checked automatically, and its label (text) changes to "Deselect All". And say, all values were selected at start, if user deselects any single value "Deselect All" again reverts to "Select All" text and its checkbox gets deselected, in order to show there are still values to be selected.

 5) "Select All" and "Deselect All" are captured in a single checkbox, to reduce overheads and complexity.

 So here are few screenshots which demonstrate how it works -

 1) When all values are selected - meaning only few (less than max values) are selected.
2) Now I checked "Select All" checkbox to select all values.
3) Now I want to deselect few of these values, so it will look like -
4) Filtering of values from a list -
One more important thing here is -
Due to use of  Ext.data.Store's filter() method, with last 2 parameters values being true and false. i.e. combo.store.filter(combo.displayField, field.getValue(), true, false);
You can download my code from github as well - 
Here is URL of my public repository -  https://github.com/PramodKhare/extjs_addons
Here is my code -
1) Filename - lovcombo.html
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <link rel="stylesheet" type="text/css" href="../../ext-3.4.0/resources/css/ext-all.css">
 <link rel="stylesheet" type="text/css" href="./css/Ext.ux.form.LovCombo.css">
 <link rel="stylesheet" type="text/css" href="./css/lovcombo.css">
 <script type="text/javascript" src="../../ext-3.4.0/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="../../ext-3.4.0/ext-all-debug.js"></script>
 <script type="text/javascript" src="./js/Ext.ux.form.LovCombo.js"></script>
 
 <script type="text/javascript" src="lovcombo.js"></script>
 <title id="page-title">Ext.ux.form.LovCombo Extension by Saki</title>
</head>
<body>
</body>
</html>

2) Filename - lovcombo.js

Ext.BLANK_IMAGE_URL = '../../ext-3.4.0/resources/images/default/s.gif';

// application entry point
Ext.onReady(function() {
    Ext.QuickTips.init();
 
 // The data store containing the list of states
    var states = new Ext.data.ArrayStore({
        fields: ['name', 'abbreviation'],
        data: [ ['ALABAMA','AL'],
                ['MASSACHUSETTS','MA'],
    ['MICHIGAN','MI'],
    ['NEBRASKA','NE'],
    ['NEVADA','NV'],
    ['NEW HAMPSHIRE','NH'],
    ['NEW JERSEY','NJ'],
    ['NEW YORK','NY'],
    ['NORTH CAROLINA','NC'], 
    ['NORTH DAKOTA','ND']
  ]
    });
    
 var lc = new Ext.ux.form.LovCombo({
   id:'lovcombo'
  ,hideOnSelect:false
  ,fieldLabel: 'Choose State'
        ,store: states
        ,queryMode: 'local'
        ,displayField: 'name'
        ,valueField: 'abbreviation'
        ,multiSelect: true
        ,maxSelections: 3
        ,width: 400
  ,anchor:'90%'
  ,triggerAction:'all'
  ,mode:'local'
 });
 
 /*
  * Here is where we create the Form
  */
    var gridForm = new Ext.FormPanel({
        id: 'company-form',
        frame: true,
        labelAlign: 'left',
        title: 'List of Values Combo',
        bodyStyle:'padding:5px',
        width: 750,
  renderTo:document.body,
  anchor : '100%',
        items: [lc]
    });
});

3) FileName - Ext.ux.form.LovCombo.js

/**
 * Ext.ux.form.LovCombo, List of Values Combo
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date      16. April 2008
 * @version   $Id: Ext.ux.form.LovCombo.js 285 2008-06-06 09:22:20Z jozo $
 *
 * @license Ext.ux.form.LovCombo.js is licensed under the terms of the Open 
 * Source
 * LGPL 3.0 license. Commercial use is permitted to the extent that the 
 * code/component(s) do NOT become part of another Open Source or Commercially
 * licensed development library or toolkit without explicit permission.
 * 
 * License details: http://www.gnu.org/licenses/lgpl.html
 */
 
/*global Ext */

// add RegExp.escape if it has not been already added
if('function' !== typeof RegExp.escape) {
 RegExp.escape = function(s) {
  if('string' !== typeof s) {
   return s;
  }
  // Note: if pasting from forum, precede ]/\ with backslash 
                // manually
  return s.replace(/([.*+?^=!:${}()|[\]\/\\])/g, '\\$1');
 }; // eo function escape
}

// create namespace
Ext.ns('Ext.ux.form');
 
/**
 * @class Ext.ux.form.LovCombo
 * @extends Ext.form.ComboBox
 */
Ext.ux.form.LovCombo = Ext.extend(Ext.form.ComboBox, {

 // {{{
    // configuration options
 /**
  * @cfg {String} checkField name of field used to store checked state.
  * It is automatically added to existing fields.
  * Change it only if it collides with your normal field.
  */
  checkField:'checked'

 /**
  * @cfg {String} separator separator to use between values and texts
  */
    ,separator:','

 /**
  * @cfg {String/Array} tpl Template for items. 
  * Change it only if you know what you are doing.
  */
 // }}}
    // {{{
    ,initComponent:function() {
  //Code Changes by Pramod starts here - on 4th Sept, 2013
        
  //Local variables starts here
  var combo = this,
   totalCount = 0,
   id = this.getId() + '-toolbar-panel'; //toolbar panel's id
  //Local variable declaration ends here
  
  // template with checkbox
  if(!this.tpl) {
   this.tpl = 
    //Modification to template starts here - 
    //Modification - Inserted a static div tag in value-list template.
    //We will insert a toolbar (which we will create next) before this div tag
    //using DomHelper's insertBefore method
    this.tpl = 
    //Modification to template starts here - 
    //Modification - Inserted a static div tag in value-list template.
    //We will insert a toolbar (which we will create next) before this div tag
    //using DomHelper's insertBefore method
    '<div id="' + id + '"></div>'
    //Modification to template ends here
    
    +'<tpl for=".">'
    +'<div class="x-combo-list-item">'
    +'<img src="' + Ext.BLANK_IMAGE_URL + '" '
    +'class="ux-lovcombo-icon ux-lovcombo-icon-'
    +'{[values.' + this.checkField + '?"checked":"unchecked"' + ']}">'
    +'<div class="ux-lovcombo-item-text">{' + (this.displayField || 'text' )+ '}</div>'
    +'</div>'
    +'</tpl>'
   ;
  }
  //Toolbar for value-list starts here.
  //Future Modifications-there are many possibilities as per the requirement,
  //so this is a main piece of code.
  //Create a toolbar with select all, deselect all, filter textbox, etc.
  var toolbar = new Ext.Toolbar({
   height: 30,
   items : [{
    xtype : 'checkbox',
    //creating unique id because we need handle of this checkbox later
    id : id + 'selectAllChkBox',
    style : 'padding:-1px 0px 0px 1px;',
    boxLabel: 'Select All',
    handler : function(chkBox, isChecked) {
     //Clearing any filter criterion, and reseting its value
     Ext.getCmp(id + 'filter-field').reset();
     combo.store.clearFilter();
     //As checkbox button serves 2 different purposes i.e. "Select All" or "Deselect All"
     //First if button's label/text is either "Select All" or "Deselect All"
     //When "Select All" and checkbox is clicked - selects all records in combobox dropdown list
     //When "Deselect All" and checkbox deselected - deselects all records.
     //Once the selection/deselection is done - toggle its text. 
     
     //Flag to check if select all checkbox is checked and 
     //now we have to check/select all records/values.
     var selectAll = (chkBox.boxLabel == "Select All")?true:false;
     
     if (selectAll) {
      combo.selectAll();
      totalCount = combo.getStore().getRange().length;
      chkBox.boxLabel = "Deselect All";
     } else {
      //else condition means, not all of them are selected
      combo.deselectAll();
      totalCount = 0;
      chkBox.boxLabel = "Select All";      
     }
     //Updating Checkbox's label.
     if(chkBox.rendered){
      chkBox.wrap.child('.x-form-cb-label').update(chkBox.boxLabel);
     }
     //Change the select count innerHTML as well to total count value.
     Ext.getDom( id + 'total-count').innerHTML = 'Selected : '+totalCount+'/'+combo.getStore().getRange().length;
    }
   }, '-', {
    xtype : 'textfield',
    enableKeyEvents : true,
    id : id + 'filter-field',
    emptyText : 'enter search text',
    listeners : {
     keyup : function(field, e) {
      combo.store.clearFilter();
      if (field.getValue()) {
       //filter records as per typed text, case-sensitive=false and any-match=true
       combo.store.filter(combo.displayField, field.getValue(), true, false);
      }
     }
    }
   }, '->',{
    xtype: 'tbtext',
    text : 'Selected : '+totalCount+'/'+combo.getStore().getRange().length,
    qtip : 'Total selected items',
    id : id + 'total-count'
   }]
  });
  //Toolbar creation ends here  
  
        // call parent
        Ext.ux.form.LovCombo.superclass.initComponent.apply(this, arguments);

  // install internal event handlers
  this.on({
   scope:this
   ,beforequery:this.onBeforeQuery
   ,blur:this.onRealBlur
   
   //Adding a default select handler for combo-box,
   //to check if its checkbox's was selected or deselected...
   ,select: function (combo, record, index) {
    //Find if its deselect or select by using this.checkField 
    var isDeselect = (record.get(combo.checkField) == false)?true:false;
    var chkBox = Ext.getCmp(id + 'selectAllChkBox');
    
    if(isDeselect){ //this condition means a record was deselected, 
     totalCount--; //decrement the total selected values count
     //an item is deselected,
     //When any item is deselected change the count and Total :x Text and deselect top "Select All" checkbox
     //and change its text back to "Select All".
     
     chkBox.boxLabel = "Select All";
     chkBox.el.dom.checked = false;
     chkBox.checked = false;
    }else{ //this condition means a record was selected, 
     totalCount++; //Increment the total selected values count
     //an item is selected, 
     //Check if totalCount is equals to total store records, then select "Select All" checkbox
     //And change its text to "Deselect All".
     
     if(totalCount == combo.getStore().getRange().length){
      chkBox.el.dom.checked = true;
      chkBox.checked = true;
      chkBox.boxLabel = "Deselect All";
     }
    }
    //updating "Select All"/"Deselect All" 's Checkbox text as per condition
    if(chkBox.rendered){
     chkBox.wrap.child('.x-form-cb-label').update(chkBox.boxLabel);
    }
    //setting proper text indication how many values were selected out of total
    Ext.getDom( id + 'total-count').innerHTML = 'Selected : '+totalCount+'/'+combo.getStore().getRange().length; //Change Total : x innerHTML
            }
            ,expand: {
                fn: function(converted) {
     //inserting above toolbar into combobox list at the top.
     var dropdown = Ext.get(id).dom.parentElement; //getting a div tag handle which we have added to template above.
                    var container = Ext.DomHelper.insertBefore(dropdown, '




', true);
                    toolbar.render(container);
                },
                single: true //Will execute only once, when combo-box expands for the first time
            }
        });
  
        // remove selection from input field
        this.onLoad = this.onLoad.createSequence(function() {
    //to increase size of dropdown list by 30, to compensate for height of toolbar added,
    //otherwise last value in dropdown list will be gone.
    if(this.el && this.hasFocus && this.store.getCount() > 0){
     this.list.setHeight(this.list.getHeight()+30);
     this.innerList.setHeight(this.innerList.getHeight()+30);
    }
                if(this.el) {
     var v = this.el.dom.value;
     this.el.dom.value = '';
     this.el.dom.value = v;
                }
        });
  //Pramod's modifications to LovCombo ends here. Happy Coding... 
  
    } // e/o function initComponent
    // }}}
 // {{{
 ,initEvents:function() {
  Ext.ux.form.LovCombo.superclass.initEvents.apply(this, arguments);
 } // eo function initEvents
 // }}}
 // {{{
 /**
  * clears value
  */
 ,clearValue:function() {
  this.value = '';
  this.setRawValue(this.value);
  this.store.clearFilter();
  this.store.each(function(r) {
   r.set(this.checkField, false);
  }, this);
  if(this.hiddenField) {
   this.hiddenField.value = '';
  }
  this.applyEmptyText();
 } // eo function clearValue
 // }}}
 // {{{
 /**
  * @return {String} separator (plus space) separated list of selected displayFields
  * @private
  */
 ,getCheckedDisplay:function() {
  var re = new RegExp(this.separator, "g");
  return this.getCheckedValue(this.displayField).replace(re, this.separator + ' ');
 } // eo function getCheckedDisplay
 // }}}
 // {{{
 /**
  * @return {String} separator separated list of selected valueFields
  * @private
  */
 ,getCheckedValue:function(field) {
  field = field || this.valueField;
  var c = [];

  // store may be filtered so get all records
  var snapshot = this.store.snapshot || this.store.data;

  snapshot.each(function(r) {
   if(r.get(this.checkField)) {
    c.push(r.get(field));
   }
  }, this);

  return c.join(this.separator);
 } // eo function getCheckedValue
 // }}}


 // {{{
// To fix a bug - pointed out by Antonio Ranieri
// Bug Description - When multiple values are selected, and field is blurred/ unfocused,
// field values get cleared which is not desirable

// Code Modification by Pramod - 26th March 2014
 // before blur function - overriden to remove call to 
 // assertValue() function of superclass Ext.form.ComboBox
 // because combobox by default can select only one record,
 // here, in this Ext.ux.form.LovCombo, multiple records seletion is handled
 // using checked field in the records
  

    ,beforeBlur : function(){
  //this.assertValue();
    } 
  
 // Code Modification by Pramod - 26th March 2014 ends here

 // }}}
 
 // {{{
 /**
  * beforequery event handler - handles multiple selections
  * @param {Object} qe query event
  * @private
  */
 ,onBeforeQuery:function(qe) {
  qe.query = qe.query.replace(new RegExp(this.getCheckedDisplay() + '[ ' + this.separator + ']*'), '');
 } // eo function onBeforeQuery
 // }}}
 // {{{
 /**
  * blur event handler - runs only when real blur event is fired
  */
 ,onRealBlur:function() {
  this.list.hide();
  var rv = this.getRawValue();
  var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
  var va = [];
  var snapshot = this.store.snapshot || this.store.data;

  // iterate through raw values and records and check/uncheck items
  Ext.each(rva, function(v) {
   snapshot.each(function(r) {
    if(v === r.get(this.displayField)) {
     va.push(r.get(this.valueField));
    }
   }, this);
  }, this);
  this.setValue(va.join(this.separator));
  this.store.clearFilter();
 } // eo function onRealBlur
 // }}}
 // {{{
 /**
  * Combo's onSelect override
  * @private
  * @param {Ext.data.Record} record record that has been selected in the list
  * @param {Number} index index of selected (clicked) record
  */
 ,onSelect:function(record, index) {
        if(this.fireEvent('beforeselect', this, record, index) !== false){

   // toggle checked field
   record.set(this.checkField, !record.get(this.checkField));

   // display full list
   if(this.store.isFiltered()) {
    this.doQuery(this.allQuery);
   }

   // set (update) value and fire event
   this.setValue(this.getCheckedValue());
            this.fireEvent('select', this, record, index);
        }
 } // eo function onSelect
 // }}}
 // {{{
 /**
  * Sets the value of the LovCombo
  * @param {Mixed} v value
  */
 ,setValue:function(v) {
  if(v) {
   v = '' + v;
   if(this.valueField) {
    this.store.clearFilter();
    this.store.each(function(r) {
     var checked = !(!v.match(
       '(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
      +'(' + this.separator + '|$)'))
     ;

     r.set(this.checkField, checked);
    }, this);
    this.value = this.getCheckedValue();
    this.setRawValue(this.getCheckedDisplay());
    if(this.hiddenField) {
     this.hiddenField.value = this.value;
    }
   }
   else {
    this.value = v;
    this.setRawValue(v);
    if(this.hiddenField) {
     this.hiddenField.value = v;
    }
   }
   if(this.el) {
    this.el.removeClass(this.emptyClass);
   }
  }
  else {
   this.clearValue();
  }
 } // eo function setValue
 // }}}
 // {{{
 /**
  * Selects all items
  */
 ,selectAll:function() {
        this.store.each(function(record){
            // toggle checked field
            record.set(this.checkField, true);
        }, this);

        //display full list
        this.doQuery(this.allQuery);
        this.setValue(this.getCheckedValue());
    } // eo full selectAll
 // }}}
 // {{{
 /**
  * Deselects all items. Synonym for clearValue
  */
    ,deselectAll:function() {
  this.clearValue();
    } // eo full deselectAll 
 // }}}

}); // eo extend

// register xtype
Ext.reg('lovcombo', Ext.ux.form.LovCombo); 
// eof

Comments

Post a Comment

Popular posts from this blog

How to install / Configure Mantis For Apache-PHP-PostgreSQL combination

Image
How to install / Configure Mantis For Apache-PHP-PostgreSQL combination  → I wanted to write this blog a long back, but better late than never. Three years back I was working on a project where we had used Mantis Bug Tracker for managing our bugs list, for that, I had to install it on a server from where our teams could access it to log the software bugs and update the fixes. Important learnings - with new php versions, I faced few issues with postgresql configs, then while setting up database instance for mantis I faced few issues with postgres port configs and how to give it on mantis config files, database user grant problem. I had to set up everything from scratch so learned a lot. (Note - mantisbt  →  mantis bug tracker) Why I have written this post  →  at that time I could not find any resource on web which would give me good tutorial on how to install mantisbt on Apache and PostgreSQL. So I wanted to put it on web so others could some of thei...
Read more

TriggerField with two triggers, TwinTriggerField with tooltips

Image
Twin Trigger and Twin Trigger Combobox in ExtJS,  How to give qtip / quicktip / tooltip to Twin Trigger Field In ExtJS, there is a class Ext.form.TwinTriggerField (though its an abstract class) which is used to create objects of TwinTrigger, and can be extended to form n-trigger field.  Depending upon the requirement it can be easily, modified. Basically DateField and ComboBox are the examples of single trigger Textfield. Simple TwinTriggerField  Here is sample code how to use basic TwinTriggerField (which is basically a Textfield with two triggers/buttons which can be assigned different handlers) - new Ext.form.TwinTriggerField({ id : 'twintrigger', fieldLabel : "TwinTrigger", //Custom icon-classes for triggers trigger1Class : 'x-form-clear-trigger', //trigger2Class : 'customTriggerIcon', //Enable Key events over textfield enableKeyEvents : true, //Separate Trigger handlers onTrigger1Click : function(fie...
Read more