Popup Cell Editor "number"

This View configuration is used to setup a basic numeric editor as a popup-type cell editor. A saveFn is prescribed that handles validation and converting the input text to numeric format.

Basic Usage

   // Column definition
   { key:'salary', editor:"number" }

   // Column definition ... disabling keyfiltering and setting a CSS class
   { key:'firstName',
     editor:"text", editorConfig:{ className:'align-right', keyFiltering:null }
   }

Standard Configuration

This editor creates a simple INPUT[text] internally within the popup Editor View container positioned directly over the TD element. Configuration is almost identical to text editor except for the pre-selection of contents and conversion of saved value to numeric format in saveFn.

The configuration {Object} for this cell editor View is predefined as;

   Y.DataTable.EditorOptions.number = {
       BaseViewClass:  Y.DataTable.BaseCellPopupEditor,
       name:           'number',
       templateObject:{
           // Template.Micro template
           html: '<input type="text" title="inline cell editor" class="<%= this.classInput %>"  />'
       },
       inputKeys: true,

       // only permit digit, '.' and '-' keys in the input, reject others ...
       keyFiltering:   /\.|\d|\-/,

       // Set a flaoting point number validation RegEx expression
       validator:  /^\s*(\+|-)?((\d+(\.\d+)?)|(\.\d+))\s*$/,

       // Function to call after numeric editing is complete, prior to saving to DataTable ...
       //  i.e. checks validation against ad-hoc attribute "validationRegExp" (if it exists)
       //       and converts the value to numeric (or undefined if fails regexp);
       saveFn: function(v){
           var vre = this.get('validator'),
               value;
           if(vre instanceof RegExp) {
               value = (vre.test(v)) ? +v : undefined;
           } else {
               value = +v;
           }
           return value;
       },

       // Set an after listener to this View's instance
       after: {

           //---------
           // After this view is displayed,
           //   focus and "select" all content of the input (for quick typeover)
           //---------
           editorShow : function(o){
               // initially set focus / select entire INPUT
               o.inputNode.focus();
               o.inputNode.select();
           }
       }
   };

PLEASE NOTE: All other attributes from the BaseViewClass apply and can be included within the editorConfig object.