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 <d.csapak@proxmox.com>
This commit is contained in:
Dominik Csapak 2019-07-24 09:21:12 +02:00 committed by Thomas Lamprecht
parent 28de30b20e
commit 94953ba8ea
5 changed files with 23 additions and 2 deletions

View File

@ -1,6 +1,6 @@
include ../defines.mk
CSS=
CSS=ext6-pmx.css
all:

3
css/ext6-pmx.css Normal file
View File

@ -0,0 +1,3 @@
.pmx-clear-trigger {
background-image: url(../images/pmx-clear-trigger.png);
}

View File

@ -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

View File

@ -1,6 +1,6 @@
include ../defines.mk
IMAGES=
IMAGES=pmx-clear-trigger.png
all:

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB