Wie kann ich ein hintergrund Bild zu sencha touch 2 Ext.form.Panel?

ich bin eine formPanel mit einem fieldset , ich möchte das panel mit einem Bild im hintergrund erstreckte sich über den gesamten Bildschirm, habe ich nur noch einen css Klasse auf das panel, aber es hat nicht richtig funktioniert, das Bild erschien nur teilweise in den Bereich der fieldset nicht in fullscreen - Modus
hier ist der code:
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;
}

und hier ist der Screenshot (aufgeschnappt von IPAD 2)
Wie kann ich ein hintergrund Bild zu sencha touch 2 Ext.form.Panel?

InformationsquelleAutor aomar | 2012-02-23

Schreibe einen Kommentar