在Sencha Touch中禁用loadMask的灰色背景

我有一個loadMask。這會設置一個灰色背景，並在其上加載加載圖像。從the documentation：在Sencha Touch中禁用loadMask的灰色背景

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

問題是我只想要小方與加載圖像和「載入中...」的標籤，我需要擺脫灰色背景的。

這個灰色背景在.x-mask x-mask-gray div中得到黎明。我曾嘗試將這個div的CSS設置爲寬度和高度的不同值，但我無法使其工作。

這裏是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>

如果你看到，寬度設置爲1124px和高度575px，我需要消失，使其0像素或刪除整個X-面具灰色，但沒有刪除子節點。並希望查看「Loading ...」標籤居中。

我希望你能幫助我，任何建議，非常感謝。

來源

2011-06-30 marimaf

你最好的選擇是覆蓋這些樣式，但只是使背景透明，而不是試圖完全去除DIV。

如果添加以下CSS，它將使蒙版的背景透明。

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

或者，可以覆蓋Ext.LoadMask的onBeforeLoad方法和在真通過作爲掩模（）方法的最後一個參數（這是「透明」的參數），這將除去的x掩模從掩蔽DIV -gray類，如下：

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();

不幸的是，你仍然需要爲.X-面膜類的CSS重寫這個解決方案，因爲它仍然增加了30％不透明的背景。

希望這有助於

斯圖爾特

來源

2011-07-06 13:36:30 Stuart

在Sencha Touch中禁用loadMask的灰色背景

回答

相關問題