Используя Sencha 6.5.3, как я могу настроить панель так, чтобы hideOnMaskTap был истинным, а прозрачный - верным?

Question

Используя Sencha 6.5.3, как мне настроить панель так, чтобы hideOnMaskTap было верно, а transparent было верно?

Я нашел это для прозрачной маски:

modal: {
  transparent: true
}

---

Вот как я создаю панель:

Ext.create({
        xtype: 'panel',
        cls: 'o-searcher-results',
        hideOnMaskTap: true,
        modal: {
            transparent: true
        },
        minHeight: '30%',
        maxHeight: '500px',
        scrollable: true,
        hidden: true
}));

, но она не работает.

Это скрипка сенчи.

Я использую Sencha 6.5.3 modern и Sencha Cmd 6.5.3.6

Answer 1

Вот способ, которым вы могли бы сделать это, сначала создайте класс для вашей маски:

.modal_mask{
    background: transparent !important;
}

Затем добавьте этих слушателей на панель, чтобы временно изменить класс маски

var mymask;
var panel = Ext.create({
    xtype: 'panel',
    title: 'Floated',
    html: 'context panel text',
    anchor: true,
    modal: true,
    hideOnMaskTap: true,
    listeners: {
        show: function(win) {

           //Find the mask    
           var dom = Ext.dom.Query.select('.x-mask');

           //store it (search again on hide event doesn't work, don't know why)
           mymask = Ext.get(dom[0]);

           //add a new class
           mymask.addCls('modal_mask');

        },
        hide:  function(win) {

            //Remove the class you just add
            mymask.removeCls('modal_mask');
        }
    }
});

Надеюсь, это поможет!