ComboBox: add parameter scrollAlwaysVisible.

[SSE] AutoFilterDialog: added combobox with cell values to custom filter dialog.

apps/common/main/lib/component/ComboBox.js

@@ -84,7 +84,8 @@ define([
                 menuCls     : '',
                 menuStyle   : '',
                 displayField: 'displayValue',
-                valueField  : 'value'
+                valueField  : 'value',
+                scrollAlwaysVisible: false
             },
 
             template: _.template([
@@ -117,6 +118,7 @@ define([
                 this.store          = me.options.store || new Common.UI.ComboBoxStore();
                 this.displayField   = me.options.displayField;
                 this.valueField     = me.options.valueField;
+                this.scrollAlwaysVisible = me.options.scrollAlwaysVisible;
                 me.rendered         = me.options.rendered || false;
 
                 this.lastValue = null;
@@ -216,7 +218,8 @@ define([
                         el: $('.dropdown-menu', this.cmpEl),
                         minScrollbarLength: 40,
                         scrollYMarginOffset: 30,
-                        includePadding: true
+                        includePadding: true,
+                        alwaysVisibleY: this.scrollAlwaysVisible
                     }, this.options.scroller));
                 }
 
@@ -239,7 +242,8 @@ define([
                         el: $('.dropdown-menu', this.cmpEl),
                         minScrollbarLength: 40,
                         scrollYMarginOffset: 30,
-                        includePadding: true
+                        includePadding: true,
+                        alwaysVisibleY: this.scrollAlwaysVisible
                     }, this.options.scroller));
                 }
 
@@ -542,7 +546,8 @@ define([
                     el: $('.dropdown-menu', this.cmpEl),
                     minScrollbarLength : 40,
                     scrollYMarginOffset: 30,
-                    includePadding     : true
+                    includePadding     : true,
+                    alwaysVisibleY: this.scrollAlwaysVisible
                 }, this.options.scroller));
             }
         }

apps/spreadsheeteditor/main/app/view/AutoFilterDialog.js

@@ -119,9 +119,10 @@ define([
 
             this.cmbCondition1 = new Common.UI.ComboBox({
                 el          : $('#id-search-begin-digital-combo', this.$window),
-                menuStyle   : 'min-width: 225px;',
+                menuStyle   : 'min-width: 225px;max-height: 135px;',
                 cls         : 'input-group-nr',
                 data        : this.conditions,
+                scrollAlwaysVisible: true,
                 editable    : false
             });
             this.cmbCondition1.setValue(Asc.c_oAscCustomAutoFilter.equals);
@@ -130,9 +131,10 @@ define([
 
             this.cmbCondition2 = new Common.UI.ComboBox({
                 el          : $('#id-search-end-digital-combo', this.$window),
-                menuStyle   : 'min-width: 225px;',
+                menuStyle   : 'min-width: 225px;max-height: 135px;',
                 cls         : 'input-group-nr',
                 data        : this.conditions,
+                scrollAlwaysVisible: true,
                 editable    : false
             });
             this.cmbCondition2.setValue(0);
@@ -150,39 +152,34 @@ define([
                 name : 'asc-radio-filter-tab'
             });
 
-            this.txtValue1 = new Common.UI.InputField({
+            this.cmbValue1 = new Common.UI.ComboBox({
                 el          : $('#id-sd-cell-search-begin', this.$window),
-                template: _.template([
+                cls         : 'input-group-nr',
-                    '<div class="input-field" style="<%= style %>">',
+                menuStyle   : 'min-width: 225px;max-height: 135px;',
-                    '<input ',
+                scrollAlwaysVisible: true,
-                    'type="<%= type %>" ',
+                data        : []
-                    'name="<%= name %>" ',
-                    'class="form-control <%= cls %>" style="float:none" ',
-                    'placeholder="<%= placeHolder %>" ',
-                    'value="<%= value %>"',
-                    '>',
-                    '</div>'].join('')),
-                allowBlank  : true,
-                validateOnChange: true,
-                validation  : function () { return true; }
             });
-            this.txtValue2 = new Common.UI.InputField({
+
+            this.cmbValue2 = new Common.UI.ComboBox({
                 el          : $('#id-sd-cell-search-end', this.$window),
-                template: _.template([
+                cls         : 'input-group-nr',
-                    '<div class="input-field" style="<%= style %>">',
+                menuStyle   : 'min-width: 225px;max-height: 135px;',
-                    '<input ',
+                scrollAlwaysVisible: true,
-                    'type="<%= type %>" ',
+                data        : []
-                    'name="<%= name %>" ',
-                    'class="form-control <%= cls %>" style="float:none" ',
-                    'placeholder="<%= placeHolder %>" ',
-                    'value="<%= value %>"',
-                    '>',
-                    '</div>'].join('')),
-                allowBlank  : true,
-                validateOnChange: true,
-                validation  : function () { return true; }
             });
 
+            var comparator = function(item1, item2) {
+                var n1 = item1.get('intval'),
+                    n2 = item2.get('intval'),
+                    isN1 = n1!==undefined,
+                    isN2 = n2!==undefined;
+                if (isN1 !== isN2) return (isN1) ? -1 : 1;
+                !isN1 && (n1 = item1.get('value').toLowerCase()) && (n2 = item2.get('value').toLowerCase());
+                if (n1==n2) return 0;
+                return (n2=='' || n1!=='' && n1<n2) ? -1 : 1;
+            };
+            this.cmbValue1.store.comparator = this.cmbValue2.store.comparator = comparator;
+
             this.$window.find('.dlg-btn').on('click', _.bind(this.onBtnClick, this));
 
             this.loadDefaults();
@@ -192,8 +189,8 @@ define([
 
             var me  = this;
             _.defer(function () {
-                if (me.txtValue1) {
+                if (me.cmbValue1) {
-                    me.txtValue1.focus();
+                    me.cmbValue1._input.focus();
                 }
             }, 500);
         },
@@ -221,8 +218,18 @@ define([
 
         loadDefaults: function () {
             if (this.properties && this.rbOr && this.rbAnd &&
-                this.cmbCondition1 && this.cmbCondition2 && this.txtValue1 && this.txtValue2) {
+                this.cmbCondition1 && this.cmbCondition2 && this.cmbValue1 && this.cmbValue2) {
 
+                var arr = [];
+                this.properties.asc_getValues().forEach(function (item) {
+                    var value    = item.asc_getText();
+                    if (!_.isEmpty(value)) {
+                        arr.push({value: value, displayValue: value,
+                                  intval: (!isNaN(parseFloat(value)) && isFinite(value)) ? parseFloat(value) : undefined});
+                    }
+                });
+                this.cmbValue1.setData(arr);
+                this.cmbValue2.setData(arr);
                 var filterObj = this.properties.asc_getFilterObj();
                 if (filterObj.asc_getType() == Asc.c_oAscAutoFilterTypes.CustomFilters) {
                     var customFilter = filterObj.asc_getFilter(),
@@ -233,14 +240,14 @@ define([
                     this.cmbCondition1.setValue(customFilters[0].asc_getOperator() || Asc.c_oAscCustomAutoFilter.equals);
                     this.cmbCondition2.setValue((customFilters.length>1) ? (customFilters[1].asc_getOperator() || 0) : 0);
 
-                    this.txtValue1.setValue(null === customFilters[0].asc_getVal() ? '' : customFilters[0].asc_getVal());
+                    this.cmbValue1.setValue(null === customFilters[0].asc_getVal() ? '' : customFilters[0].asc_getVal());
-                    this.txtValue2.setValue((customFilters.length>1) ? (null === customFilters[1].asc_getVal() ? '' : customFilters[1].asc_getVal()) : '');
+                    this.cmbValue2.setValue((customFilters.length>1) ? (null === customFilters[1].asc_getVal() ? '' : customFilters[1].asc_getVal()) : '');
                 }
             }
         },
         save: function () {
             if (this.api && this.properties && this.rbOr && this.rbAnd &&
-                this.cmbCondition1 && this.cmbCondition2 && this.txtValue1 && this.txtValue2) {
+                this.cmbCondition1 && this.cmbCondition2 && this.cmbValue1 && this.cmbValue2) {
 
                 var filterObj = this.properties.asc_getFilterObj();
                 filterObj.asc_setFilter(new Asc.CustomFilters());
@@ -253,10 +260,10 @@ define([
 
                 customFilter.asc_setAnd(this.rbAnd.getValue());
                 customFilters[0].asc_setOperator(this.cmbCondition1.getValue());
-                customFilters[0].asc_setVal(this.txtValue1.getValue());
+                customFilters[0].asc_setVal(this.cmbValue1.getValue());
                 if (this.cmbCondition2.getValue() !== 0) {
                     customFilters[1].asc_setOperator(this.cmbCondition2.getValue() || undefined);
-                    customFilters[1].asc_setVal(this.txtValue2.getValue());
+                    customFilters[1].asc_setVal(this.cmbValue2.getValue());
                 }
 
                 this.api.asc_applyAutoFilter(this.properties);
@@ -390,8 +397,8 @@ define([
 
             var me  = this;
             _.defer(function () {
-                if (me.txtValue1) {
+                if (me.spnCount) {
-                    me.txtValue1.focus();
+                    me.spnCount.$input.focus();
                 }
             }, 500);
         },