Sencha TouchでloadMaskのグレーの背景を無効にする

Question

私はloadMaskを持っています。これは灰色の背景を設定し、その上にLoadingという画像を表示します。 the documentationから：

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

問題は、私は唯一のロードイメージと「ロード...」のラベルを持つ小さな正方形をしたいですが、私はグレーの背景を取り除く必要があります。

この灰色の背景は、.x-maskのx-mask-gray divで夜明けします。私は幅と高さの異なる値にこのdivのCSSを設定しようとしましたが、私はそれを動作させることはできません。

あなたは、幅が575pxに1124px、高さに設定されて表示された場合

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

、私はそれが0PXをしたりすることなく、X-マスクグレーが、全体を削除し、それが消える必要があります。ここに

はHTMLです子ノードを削除します。うまくいけば、 "Loading ..."ラベルが中央に表示されます。

私があなたを助けてくれることを祈っておりますが、いかなる提案も大変ありがとうございます。

Answer 1

これらのスタイルをオーバーライドするだけですが、DIVを完全に削除するのではなく、背景を透明にすることをお勧めします。

次のCSSを追加すると、マスクの背景が透明になります。

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

また、あなたはExt.LoadMaskのonBeforeLoadメソッドをオーバーライドして、X-マスクを削除します（「透明」パラメータである）マスク（）メソッドの最後のパラメータとしてtrueを渡すことができマスキングDIVから-grayクラスは、以下のように：それはまだ30％の不透明度の背景を追加するため

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のオーバーライドが必要になります。

希望これは

スチュアート

を支援