如何将背景图像放到sencha touch 2 Ext.form.Panel？

Question

我正在使用带有 fieldset 的 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

在面板中添加

cls: 'panelBackground',

在app.css文件中，您只需将panelBackground定义为

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

Answer 2

formpanel与面板不同 如果你想为面板添加背景，你只需要设置配置cls：'login-form' 当您为formpanel设置cls：'login-form'时，它将无效，因为formpanel的baseCls具有更高的优先级，因此我们可以设置baseCls：''，然后属性cls将适用于formpanel

Answer 3

我认为这应该有效：

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