どのように私は2つのExt.form.Panelに触れるために背景画像を置くことができますか？

Question

は

私は画面全体に伸ばし背景画像にパネルを作りたいフィールドセット、とformPanelを持っています、私はちょうどパネルにCSSクラスを追加しましたが、それは、正常に動作していません画像はちょうどここにいないフルスクリーンモード でフィールドセットの領域に部分的に登場したコードは次のとおりです。 login.js

Ext.define('MOICTouch.view.tablet.Login', { 
    extend: 'Ext.form.Panel', 
    xtype: 'LoginForm', 
    config: { 
     fullscreen: true, 
     cls: 'login-form', 
     layout: { 
      align: 'center', 
      pack: 'center', 
      type: 'fit' 
     }, 
     items: [{ 
      xtype: 'button', 
      text: '\u062F\u062E\u0648\u0644', 
      ui: 'confirm', 
      docked: 'bottom', 
      width: 500, 
      handler: function() { 
       this.up('formpanel').submit(); 
      } 
     }, { 
      xtype: 'fieldset', 
      title: '\u062A\u0633\u062C\u064A\u0644 \u062F\u062E\u0648\u0644', 
      docked: 'bottom', 
      width: 500, 
      applyTitle: function (title) { 
       if (typeof title == 'string') { 
        title = { 
         title: title 
        }; 
       } 

       Ext.applyIf(title, { 
        docked: 'top', 
        baseCls: 'login-form-fieldset-title' 
       }); 

       return Ext.factory(title, Ext.Title, this.getTitle()); 
      }, 
      items: [{ 
       xtype: 'textfield', 
       name: 'userName', 
       label: '\u0627\u0633\u0645 \u0627\u0644\u0645\u0633\u062A\u062E\u062F\u0645', 
       getElementConfig: function() { 
        var prefix = Ext.baseCSSPrefix; 

        return { 
         reference: 'element', 
         className: 'x-container', 
         children: [{ 
          reference: 'label', 
          cls: 'login-form-label', 
          children: [{ 
           tag: 'span' 
          }] 
         }, { 
          reference: 'innerElement', 
          cls: prefix + 'component-outer' 
         }] 
        }; 
       } 
      }, { 
       xtype: 'passwordfield', 
       name: 'password', 
       label: '\u0643\u0644\u0645\u0629 \u0627\u0644\u0645\u0631\u0648\u0631', 
       getElementConfig: function() { 
        var prefix = Ext.baseCSSPrefix; 

        return { 
         reference: 'element', 
         className: 'x-container', 
         children: [{ 
          reference: 'label', 
          cls: 'login-form-label', 
          children: [{ 
           tag: 'span' 
          }] 
         }, { 
          reference: 'innerElement', 
          cls: prefix + 'component-outer' 
         }] 
        }; 
       } 
      }] 
     }] 
    } 
}); 

app.css

.login-form { 
    direction: rtl; 
    background: transparent url('../images/login-bg.jpg') no-repeat top right; 
} 
.login-form-fieldset-title { 
    text-shadow: #fff 0 1px 1px; 
    color: #333333; 
    margin: 1em 0.7em 0.3em; 
    color: #333333; 
    font-weight: bold; 
    white-space: nowrap; 
    text-align: center; 
} 
.login-form-label { 
    text-shadow: #fff 0 1px 1px; 
    color: #333333; 
    text-shadow: rgba(255, 255, 255, 0.25) 0 0.08em 0; 
    background-color: #f7f7f7; 
    padding: 0.6em; 
    border-top: 1px solid white; 
    display: none; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: block; 
} 

とここ（IPAD 2からスナップ）のスクリーンショット

Answer 1

とあなたのapp.cssファイルでは、panelBackgroundを

と定義するだけです

.panelBackground { 
    background: url('/public/images/log.png') no-repeat center; 
} 

Answer 2

は、私は、これは動作するはずだと思うです：あなただけ

cls: 'panelBackground', 

を追加パネルで

.x-form .x-scroll-container { 
    background: transparent url('../images/login-bg.jpg') no-repeat top right; 
} 

Answer 3

formpanelあなたはパネルの背景を追加したい場合は、あなただけの設定CLSを設定する必要があるパネル 異なっている：「ログイン・フォームの あなたはCLSを設定します。formpanel用のログイン・フォームの、 formpanelのbaseClsの優先度が高いのでbaseCls： ''を設定できるので、動作しません。次に、プロパティclsがformpanelで動作します