0

フォーム パネルに画像の背景を配置しようとしていますが、何も表示されません。このチュートリアルのコードを使用しています: http://miamicoder.com/2012/adding-a-login-screen-to -a-sencha-touch-application-part-2/

ここに私のログインビューがあります:

 Ext.define('MyApp2.view.Login', {
extend: 'Ext.form.Panel',
alias: "widget.loginview",
requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
config: {
    title: 'Login',
    cls:'panelBackground',
  // bodyStyle:'background-color:#fff;padding: 10px',
    items: [

        {
            xtype: 'label',
            html: 'Login failed. Please enter the correct credentials.',
            itemId: 'signInFailedLabel',
            hidden: true,
            hideAnimation: 'fadeOut',
            showAnimation: 'fadeIn',
            style: 'color:#990000;margin:5px 0px;'
        },
        {
            xtype: 'fieldset',
            title: 'Login Example',
            items: [
                {
                    xtype: 'textfield',
                    placeHolder: 'Username',
                    itemId: 'userNameTextField',
                    name: 'userNameTextField',
                    required: true
                },
                {
                    xtype: 'passwordfield',
                    placeHolder: 'Password',
                    itemId: 'passwordTextField',
                    name: 'passwordTextField',
                    required: true
                }
            ]
        },
        {
            xtype: 'button',
            itemId: 'logInButton',
            ui: 'action',
            padding: '10px',
            text: 'Log In'
        }
    ],
    listeners: [{
            delegate: '#logInButton',
            event: 'tap',
            fn: 'onLogInButtonTap'
        }]
},
onLogInButtonTap: function() {

    var me = this,
            usernameField = me.down('#userNameTextField'),
            passwordField = me.down('#passwordTextField'),
            label = me.down('#signInFailedLabel'),
            username = usernameField.getValue(),
            password = passwordField.getValue();

    label.hide();

    // Using a delayed task in order to give the hide animation above
    // time to finish before executing the next steps.
    var task = Ext.create('Ext.util.DelayedTask', function() {

        label.setHtml('');

        me.fireEvent('signInCommand', me, username, password);

        usernameField.setValue('');
        passwordField.setValue('');
    });

    task.delay(500);

},
showSignInFailedMessage: function(message) {
    var label = this.down('#signInFailedLabel');
    label.setHtml(message);
    label.show();
}
   });

そして私のapp.css：

  .panelBackground
     {
    background-image: url(http://localhost:8383/MyApp2/resources/images/login.png)        !important;
      background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
  }

Ps: index.html に入れようとしましたが、何も変わっていないようです。何が間違っているのでしょうか?

4

2 に答える 2

0

パネルの背景に画像を設定するために同じコードとトリングも使用していますが、画像に空白の境界線が表示されています。

画像をフルスクリーンに設定したい。

はいの場合、画像はフルスクリーンに収まりますか？コードを投稿してください。

于 2013-07-03T13:51:36.030 に答える