How to set background image in sencha touch 2

Question

I'm trying to put an image background to my form panel, it doesn't display anything, I'm using the code in this tutoriel: http://miamicoder.com/2012/adding-a-login-screen-to-a-sencha-touch-application-part-2/

here is my login view:

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

and my 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: I've tried to put it in the index.html, but it seems that nothing is changing, what I'm doing wrong?

Answer 1

The problem is Ext.form.Panel, it renders a scroll container above the background (You can check it in the Chrome Debugger). But i don't know how to disable that.

But when you change it to

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

the code is going to work.

I had a look on the rest of your code, there will be no problem when using a container instead of a form panel.