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

1

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

但是当你把它改成

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

代码将起作用。

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

于 2013-06-13T13:16:55.067 回答
0

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

我想全屏设置图像。

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

于 2013-07-03T13:51:36.030 回答