Implement custom combobox with clear button

7 files changed, 63 insertions, 54 deletions

diff --git a/web/app/Style.js b/web/app/Style.js
index 252bfbd..2724353 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -27,7 +27,6 @@ Ext.define('Traccar.Style', {
     windowHeight: 600,
 
     formFieldWidth: 275,
-    formFieldWithButtonWidth: 170 - 3 - 32,
 
     dateTimeFormat24: 'Y-m-d H:i:s',
     dateTimeFormat12: 'Y-m-d g:i:s a',
diff --git a/web/app/view/CustomComboBox.js b/web/app/view/CustomComboBox.js
new file mode 100644
index 0000000..e3e4d81
--- /dev/null
+++ b/web/app/view/CustomComboBox.js
@@ -0,0 +1,31 @@
+/*
+ * Copyright 2017 Anton Tananaev (anton@traccar.org)
+ * Copyright 2017 Andrey Kunitsyn (andrey@traccar.org)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+Ext.define('Traccar.view.CustomComboBox', {
+    extend: 'Ext.form.field.ComboBox',
+    xtype: 'customComboBox',
+
+    editable: false,
+    triggers: {
+        clear: {
+            cls: 'iconCls: x-fa fa-times',
+            handler: function (button) {
+                button.clearValue();
+            }
+        }
+    }
+});
diff --git a/web/app/view/dialog/Device.js b/web/app/view/dialog/Device.js
index 80b1639..12e7fb1 100644
--- a/web/app/view/dialog/Device.js
+++ b/web/app/view/dialog/Device.js
@@ -18,6 +18,10 @@
 Ext.define('Traccar.view.dialog.Device', {
     extend: 'Traccar.view.dialog.BaseEdit',
 
+    requires: [
+        'Traccar.view.CustomComboBox'
+    ],
+
     title: Strings.sharedDevice,
 
     items: {
@@ -42,26 +46,13 @@ Ext.define('Traccar.view.dialog.Device', {
             collapsible: true,
             collapsed: true,
             items: [{
-                xtype: 'fieldcontainer',
-                layout: 'hbox',
+                xtype: 'customComboBox',
+                name: 'groupId',
                 fieldLabel: Strings.groupParent,
-                items: [{
-                    xtype: 'combobox',
-                    name: 'groupId',
-                    store: 'Groups',
-                    queryMode: 'local',
-                    displayField: 'name',
-                    valueField: 'id',
-                    width: Traccar.Style.formFieldWithButtonWidth,
-                    editable: false
-                }, {
-                    xtype: 'button',
-                    glyph: 'xf00d@FontAwesome',
-                    margin: '0 0 0 3px',
-                    handler: function (button) {
-                        button.up().down().clearValue();
-                    }
-                }]
+                store: 'Groups',
+                queryMode: 'local',
+                displayField: 'name',
+                valueField: 'id'
             }, {
                 xtype: 'textfield',
                 name: 'phone',
diff --git a/web/app/view/dialog/Geofence.js b/web/app/view/dialog/Geofence.js
index 9d7a59a..7a425ba 100644
--- a/web/app/view/dialog/Geofence.js
+++ b/web/app/view/dialog/Geofence.js
@@ -19,6 +19,7 @@ Ext.define('Traccar.view.dialog.Geofence', {
     extend: 'Traccar.view.dialog.BaseEdit',
 
     requires: [
+        'Traccar.view.CustomComboBox',
         'Traccar.view.dialog.GeofenceController'
     ],
 
@@ -45,14 +46,13 @@ Ext.define('Traccar.view.dialog.Geofence', {
                 name: 'description',
                 fieldLabel: Strings.sharedDescription
             }, {
-                xtype: 'combobox',
+                xtype: 'customComboBox',
                 reference: 'calendarCombo',
                 name: 'calendarId',
                 store: 'Calendars',
                 queryMode: 'local',
                 displayField: 'name',
                 valueField: 'id',
-                editable: false,
                 fieldLabel: Strings.sharedCalendar
             }, {
                 xtype: 'hiddenfield',
diff --git a/web/app/view/dialog/Group.js b/web/app/view/dialog/Group.js
index 3a94202..85c548a 100644
--- a/web/app/view/dialog/Group.js
+++ b/web/app/view/dialog/Group.js
@@ -18,6 +18,10 @@
 Ext.define('Traccar.view.dialog.Group', {
     extend: 'Traccar.view.dialog.BaseEdit',
 
+    requires: [
+        'Traccar.view.CustomComboBox'
+    ],
+
     title: Strings.groupDialog,
 
     items: {
@@ -37,26 +41,12 @@ Ext.define('Traccar.view.dialog.Group', {
             collapsible: true,
             collapsed: true,
             items: [{
-                xtype: 'fieldcontainer',
-                layout: 'hbox',
-                fieldLabel: Strings.groupParent,
-                items: [{
-                    xtype: 'combobox',
-                    name: 'groupId',
-                    store: 'Groups',
-                    queryMode: 'local',
-                    displayField: 'name',
-                    valueField: 'id',
-                    width: Traccar.Style.formFieldWithButtonWidth,
-                    editable: false
-                }, {
-                    xtype: 'button',
-                    glyph: 'xf00d@FontAwesome',
-                    margin: '0 0 0 3px',
-                    handler: function (button) {
-                        button.up().down().clearValue();
-                    }
-                }]
+                xtype: 'customComboBox',
+                name: 'groupId',
+                store: 'Groups',
+                queryMode: 'local',
+                displayField: 'name',
+                valueField: 'id'
             }]
         }]
     }
diff --git a/web/app/view/dialog/Server.js b/web/app/view/dialog/Server.js
index 1fe2184..fe4afb2 100644
--- a/web/app/view/dialog/Server.js
+++ b/web/app/view/dialog/Server.js
@@ -19,6 +19,7 @@ Ext.define('Traccar.view.dialog.Server', {
     extend: 'Traccar.view.dialog.BaseEdit',
 
     requires: [
+        'Traccar.view.CustomComboBox',
         'Traccar.view.dialog.MapPickerController'
     ],
 
@@ -31,13 +32,12 @@ Ext.define('Traccar.view.dialog.Server', {
             xtype: 'fieldset',
             title: Strings.sharedPreferences,
             items: [{
-                xtype: 'combobox',
+                xtype: 'customComboBox',
                 name: 'map',
                 fieldLabel: Strings.mapLayer,
                 store: 'MapTypes',
                 displayField: 'name',
-                valueField: 'key',
-                editable: false
+                valueField: 'key'
             }, {
                 xtype: 'textfield',
                 name: 'bingKey',
@@ -76,13 +76,12 @@ Ext.define('Traccar.view.dialog.Server', {
                 name: 'forceSettings',
                 fieldLabel: Strings.serverForceSettings
             }, {
-                xtype: 'combobox',
+                xtype: 'customComboBox',
                 name: 'coordinateFormat',
                 fieldLabel: Strings.settingsCoordinateFormat,
                 store: 'CoordinateFormats',
                 displayField: 'name',
-                valueField: 'key',
-                editable: false
+                valueField: 'key'
             }]
         }, {
             xtype: 'fieldset',
diff --git a/web/app/view/dialog/User.js b/web/app/view/dialog/User.js
index 36bccfe..ccafc5e 100644
--- a/web/app/view/dialog/User.js
+++ b/web/app/view/dialog/User.js
@@ -19,6 +19,7 @@ Ext.define('Traccar.view.dialog.User', {
     extend: 'Traccar.view.dialog.BaseEdit',
 
     requires: [
+        'Traccar.view.CustomComboBox',
         'Traccar.view.dialog.UserController'
     ],
 
@@ -56,13 +57,12 @@ Ext.define('Traccar.view.dialog.User', {
                 name: 'phone',
                 fieldLabel: Strings.sharedPhone
             }, {
-                xtype: 'combobox',
+                xtype: 'customComboBox',
                 name: 'map',
                 fieldLabel: Strings.mapLayer,
                 store: 'MapTypes',
                 displayField: 'name',
-                valueField: 'key',
-                editable: false
+                valueField: 'key'
             }, {
                 xtype: 'numberfield',
                 reference: 'latitude',
@@ -87,13 +87,12 @@ Ext.define('Traccar.view.dialog.User', {
                 name: 'twelveHourFormat',
                 fieldLabel: Strings.settingsTwelveHourFormat
             }, {
-                xtype: 'combobox',
+                xtype: 'customComboBox',
                 name: 'coordinateFormat',
                 fieldLabel: Strings.settingsCoordinateFormat,
                 store: 'CoordinateFormats',
                 displayField: 'name',
-                valueField: 'key',
-                editable: false
+                valueField: 'key'
             }]
         }, {
             xtype: 'fieldset',