From 18cd6ba4d5f3329db6bb9e4debfddfdfc49e76c2 Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Tue, 19 Dec 2017 10:59:05 +0500 Subject: Implement custom combobox with clear button --- web/app/Style.js | 1 - web/app/view/CustomComboBox.js | 31 +++++++++++++++++++++++++++++++ web/app/view/dialog/Device.js | 29 ++++++++++------------------- web/app/view/dialog/Geofence.js | 4 ++-- web/app/view/dialog/Group.js | 30 ++++++++++-------------------- web/app/view/dialog/Server.js | 11 +++++------ web/app/view/dialog/User.js | 11 +++++------ 7 files changed, 63 insertions(+), 54 deletions(-) create mode 100644 web/app/view/CustomComboBox.js 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 . + */ +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', -- cgit v1.2.3 From 86fc00eefa298670b47b4ee15f5d3237b0634efd Mon Sep 17 00:00:00 2001 From: Abyss777 Date: Tue, 19 Dec 2017 12:19:33 +0500 Subject: Rename Custom to ClearableComboBox --- web/app/view/ClearableComboBox.js | 31 +++++++++++++++++++++++++++++++ web/app/view/CustomComboBox.js | 31 ------------------------------- web/app/view/dialog/Device.js | 4 ++-- web/app/view/dialog/Geofence.js | 4 ++-- web/app/view/dialog/Group.js | 4 ++-- web/app/view/dialog/Server.js | 6 +++--- web/app/view/dialog/User.js | 6 +++--- 7 files changed, 43 insertions(+), 43 deletions(-) create mode 100644 web/app/view/ClearableComboBox.js delete mode 100644 web/app/view/CustomComboBox.js diff --git a/web/app/view/ClearableComboBox.js b/web/app/view/ClearableComboBox.js new file mode 100644 index 0000000..cf811d1 --- /dev/null +++ b/web/app/view/ClearableComboBox.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 . + */ +Ext.define('Traccar.view.ClearableComboBox', { + extend: 'Ext.form.field.ComboBox', + xtype: 'clearableComboBox', + + editable: false, + triggers: { + clear: { + cls: 'iconCls: x-fa fa-times', + handler: function (button) { + button.clearValue(); + } + } + } +}); diff --git a/web/app/view/CustomComboBox.js b/web/app/view/CustomComboBox.js deleted file mode 100644 index e3e4d81..0000000 --- a/web/app/view/CustomComboBox.js +++ /dev/null @@ -1,31 +0,0 @@ -/* - * 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 . - */ -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 12e7fb1..c024bf3 100644 --- a/web/app/view/dialog/Device.js +++ b/web/app/view/dialog/Device.js @@ -19,7 +19,7 @@ Ext.define('Traccar.view.dialog.Device', { extend: 'Traccar.view.dialog.BaseEdit', requires: [ - 'Traccar.view.CustomComboBox' + 'Traccar.view.ClearableComboBox' ], title: Strings.sharedDevice, @@ -46,7 +46,7 @@ Ext.define('Traccar.view.dialog.Device', { collapsible: true, collapsed: true, items: [{ - xtype: 'customComboBox', + xtype: 'clearableComboBox', name: 'groupId', fieldLabel: Strings.groupParent, store: 'Groups', diff --git a/web/app/view/dialog/Geofence.js b/web/app/view/dialog/Geofence.js index 7a425ba..65c32c0 100644 --- a/web/app/view/dialog/Geofence.js +++ b/web/app/view/dialog/Geofence.js @@ -19,7 +19,7 @@ Ext.define('Traccar.view.dialog.Geofence', { extend: 'Traccar.view.dialog.BaseEdit', requires: [ - 'Traccar.view.CustomComboBox', + 'Traccar.view.ClearableComboBox', 'Traccar.view.dialog.GeofenceController' ], @@ -46,7 +46,7 @@ Ext.define('Traccar.view.dialog.Geofence', { name: 'description', fieldLabel: Strings.sharedDescription }, { - xtype: 'customComboBox', + xtype: 'clearableComboBox', reference: 'calendarCombo', name: 'calendarId', store: 'Calendars', diff --git a/web/app/view/dialog/Group.js b/web/app/view/dialog/Group.js index 85c548a..8ce6282 100644 --- a/web/app/view/dialog/Group.js +++ b/web/app/view/dialog/Group.js @@ -19,7 +19,7 @@ Ext.define('Traccar.view.dialog.Group', { extend: 'Traccar.view.dialog.BaseEdit', requires: [ - 'Traccar.view.CustomComboBox' + 'Traccar.view.ClearableComboBox' ], title: Strings.groupDialog, @@ -41,7 +41,7 @@ Ext.define('Traccar.view.dialog.Group', { collapsible: true, collapsed: true, items: [{ - xtype: 'customComboBox', + xtype: 'clearableComboBox', name: 'groupId', store: 'Groups', queryMode: 'local', diff --git a/web/app/view/dialog/Server.js b/web/app/view/dialog/Server.js index fe4afb2..a39408d 100644 --- a/web/app/view/dialog/Server.js +++ b/web/app/view/dialog/Server.js @@ -19,7 +19,7 @@ Ext.define('Traccar.view.dialog.Server', { extend: 'Traccar.view.dialog.BaseEdit', requires: [ - 'Traccar.view.CustomComboBox', + 'Traccar.view.ClearableComboBox', 'Traccar.view.dialog.MapPickerController' ], @@ -32,7 +32,7 @@ Ext.define('Traccar.view.dialog.Server', { xtype: 'fieldset', title: Strings.sharedPreferences, items: [{ - xtype: 'customComboBox', + xtype: 'clearableComboBox', name: 'map', fieldLabel: Strings.mapLayer, store: 'MapTypes', @@ -76,7 +76,7 @@ Ext.define('Traccar.view.dialog.Server', { name: 'forceSettings', fieldLabel: Strings.serverForceSettings }, { - xtype: 'customComboBox', + xtype: 'clearableComboBox', name: 'coordinateFormat', fieldLabel: Strings.settingsCoordinateFormat, store: 'CoordinateFormats', diff --git a/web/app/view/dialog/User.js b/web/app/view/dialog/User.js index ccafc5e..be27a51 100644 --- a/web/app/view/dialog/User.js +++ b/web/app/view/dialog/User.js @@ -19,7 +19,7 @@ Ext.define('Traccar.view.dialog.User', { extend: 'Traccar.view.dialog.BaseEdit', requires: [ - 'Traccar.view.CustomComboBox', + 'Traccar.view.ClearableComboBox', 'Traccar.view.dialog.UserController' ], @@ -57,7 +57,7 @@ Ext.define('Traccar.view.dialog.User', { name: 'phone', fieldLabel: Strings.sharedPhone }, { - xtype: 'customComboBox', + xtype: 'clearableComboBox', name: 'map', fieldLabel: Strings.mapLayer, store: 'MapTypes', @@ -87,7 +87,7 @@ Ext.define('Traccar.view.dialog.User', { name: 'twelveHourFormat', fieldLabel: Strings.settingsTwelveHourFormat }, { - xtype: 'customComboBox', + xtype: 'clearableComboBox', name: 'coordinateFormat', fieldLabel: Strings.settingsCoordinateFormat, store: 'CoordinateFormats', -- cgit v1.2.3