From 94953ba8ea46b353ee72629ea5bb3c3df3c450ea Mon Sep 17 00:00:00 2001 From: Dominik Csapak Date: Wed, 24 Jul 2019 09:21:12 +0200 Subject: [PATCH] ComboGrid: add trigger to delete from ComboGrid when we have a combogrid that may be empty, we now show a little 'x' where the user can delete the content this is not shown when the field is not allowed to be empty we add a new css for this because triggers need a background image with a very specific layout: 110x22px which is 5 icons in one image for the various states (normal, hover, active, focused, focused hover) the icon is taken from the theme-crisp form/tag-field-item-close.png but rearranged to fit the size Signed-off-by: Dominik Csapak --- css/Makefile | 2 +- css/ext6-pmx.css | 3 +++ form/ComboGrid.js | 18 ++++++++++++++++++ images/Makefile | 2 +- images/pmx-clear-trigger.png | Bin 0 -> 11118 bytes 5 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 css/ext6-pmx.css create mode 100644 images/pmx-clear-trigger.png diff --git a/css/Makefile b/css/Makefile index 36e62ff..5054b55 100644 --- a/css/Makefile +++ b/css/Makefile @@ -1,6 +1,6 @@ include ../defines.mk -CSS= +CSS=ext6-pmx.css all: diff --git a/css/ext6-pmx.css b/css/ext6-pmx.css new file mode 100644 index 0000000..898c5bc --- /dev/null +++ b/css/ext6-pmx.css @@ -0,0 +1,3 @@ +.pmx-clear-trigger { + background-image: url(../images/pmx-clear-trigger.png); +} diff --git a/form/ComboGrid.js b/form/ComboGrid.js index 608f613..aaaa107 100644 --- a/form/ComboGrid.js +++ b/form/ComboGrid.js @@ -38,6 +38,24 @@ Ext.define('Proxmox.form.ComboGrid', { editable: false, + triggers: { + clear: { + cls: 'pmx-clear-trigger', + weight: -1, + hidden: true, + handler: function() { + var me = this; + me.setValue(''); + } + } + }, + + setValue: function(value) { + var me = this; + me.triggers.clear.setVisible(!!value && me.allowBlank); + return me.callParent([value]); + }, + // override ExtJS method // if the field has multiSelect enabled, the store is not loaded, and // the displayfield == valuefield, it saves the rawvalue as an array diff --git a/images/Makefile b/images/Makefile index 002ad27..45bc50a 100644 --- a/images/Makefile +++ b/images/Makefile @@ -1,6 +1,6 @@ include ../defines.mk -IMAGES= +IMAGES=pmx-clear-trigger.png all: diff --git a/images/pmx-clear-trigger.png b/images/pmx-clear-trigger.png new file mode 100644 index 0000000000000000000000000000000000000000..cc374cf277060fbf6fee551c62927d4466609c80 GIT binary patch literal 11118 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