Отключить серый фон loadMask в Sencha Touch

У меня есть загрузочная маска. Это устанавливает серый фон и, кроме того, загрузочное изображение с надписью «Загрузка». Из документации:

// Basic mask:
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();

Проблема в том, что мне нужен только маленький квадратик с загружаемым изображением и надписью «загрузка...», мне нужно избавиться от серого фона.

Этот серый фон появляется в .x-mask x-mask-grey div. Я попытался установить CSS этого div для разных значений ширины и высоты, но я не могу заставить его работать.

вот HTML:

<div class="x-mask x-mask-gray" id="ext-gen1099" style="width: 1124px; height: 575px; ">
    <div class="x-mask-loading">
    <div class="x-loading-spinner">
        <span class="x-loading-top"></span>
        <span class="x-loading-right"></span>
        <span class="x-loading-bottom"></span>
        <span class="x-loading-left"></span>
    </div>
    <div class="x-loading-msg">Loading...</div>
    </div>
</div>

Если вы видите, что ширина установлена ​​​​на 1124 пикселя, а высота на 575 пикселей, мне нужно, чтобы это исчезло, сделайте его 0 пикселей или удалите весь x-mask-grey, но не удаляя дочерние узлы. И, надеюсь, просмотрите метку «Загрузка ...» по центру.

Я надеюсь, что вы можете мне помочь, любые предложения очень ценятся.


loader sencha-touch
person marimaf    schedule 30.06.2011    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Лучше всего переопределить эти стили, но просто сделать фон прозрачным, а не пытаться полностью удалить DIV.

Если вы добавите следующий CSS, фон маски останется прозрачным.

.x-mask, .x-mask.x-mask-gray
{
    background-color: transparent;
}

В качестве альтернативы вы можете переопределить метод Ext.LoadMask onBeforeLoad и передать true в качестве последнего параметра метода mask() (который является «прозрачным» параметром), который удалит x-mask-grey. класс из маскирующего DIV, как показано ниже:

var myMask = new Ext.LoadMask(Ext.getBody(), {
    msg: "Please wait...",
    onBeforeLoad: function(){
            if (!this.disabled) {
                this.el.mask(Ext.LoadingSpinner + '<div class="x-loading-msg">' + this.msg + '</div>', this.msgCls, false);
                this.fireEvent('show', this, this.el, this.store);
            }
        }
    });
    myMask.show();

К сожалению, вам все равно потребуется переопределение CSS для класса .x-mask с этим решением, потому что оно по-прежнему добавляет фон с непрозрачностью 30%.

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

Стюарт

person Stuart    schedule 06.07.2011