如何在sencha touch 2中设置背景图像

Question

我正在尝试将图像背景添加到我的表单面板，它没有显示任何内容，我正在使用此tutoriel中的代码：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中，但似乎什么都没有改变，我做错了什么？

Answer 1

问题是Ext.form.Panel，它在背景上方呈现滚动容器（您可以在Chrome调试器中查看它）。但我不知道如何禁用它。

但是当你改变它

Ext.define('MyApp2.view.Login', {
extend: 'Ext.Container',
alias: "widget.loginview",

代码将起作用。

我查看了其余的代码，使用容器而不是表单面板时没有问题。

Answer 2

我也使用相同的代码并在面板的背景中设置图像，但我在图像上得到空白边框。

我想全屏设置图像。

如果是，您的图像是否全屏显示，请发布您的代码。