Как добавить фоновое изображение в sencha touch 2 Ext.form.Panel?

Question

у меня formPanel с fieldset , я хочу сделать панель с фоновым изображением растянутой по всему экрану, я просто добавил css класс для панели, но он не работает должным образом, изображение только частично появилось в области fieldset , а не в режиме fullscreen , вот код: 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 отличается от панели, если вы хотите добавить фон для панели, вам просто нужно установить config cls: 'login-form', когда вы устанавливаете cls: 'login-form' для formpanel, он не будет работатьпотому что baseCls formpanel имеет более высокий приоритет, поэтому мы можем установить baseCls: '', тогда свойство cls будет работать для formpanel

Answer 3

Я думаю, что это должно работать:

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