Posted on
by

To make the GUI more intuitive we must avoid to overload it with components. For this purposes we can hide some elements and show them only when they are required to use.

The following override will add ‘hideable‘  property to trigger class, make it hidden by default and show only on field mouse over event.

 

 

Ext.define('overrides.form.field.Base', {
    override: 'Ext.form.field.Base',

    initComponent: function() {
        this.hideHideableTriggers();
        this.callParent();
    },

    initEvents: function(){
        this.callParent();
        this.el.mon(this.el, {
            mouseover: this.onMouseOver,
            mouseleave: this.onMouseLeave
        });
    },

    hideHideableTriggers: function() {
        var triggers = this.getTriggers();
        Ext.Object.each(triggers, function(triggerName, trigger) {
            trigger.hidden = (trigger.hideable === true);
        }, this);
    },

    onMouseOver: function(event) {
        this.component.setTriggersHidden.call(this.component, false);
    },

    onMouseLeave: function(event) {
        this.component.setTriggersHidden.call(this.component, true);
    },

    setTriggersHidden: function(hide) {
        var triggers = this.getTriggers();
        Ext.Object.each(triggers, function(triggerName, trigger) {
            if(trigger.hideable) {
                hide? trigger.hide(): trigger.show();
            }
        }, this);
    }
});

Override works with ExtJs 6.0 – 6.3.5.

Usage sample: