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)
InformationsquelleAutor aomar | 2012-02-23
Du musst angemeldet sein, um einen Kommentar abzugeben.
panel-fügen Sie einfach
und in Ihrer app.css-Datei, die Sie gerade definieren, panelBackground als
InformationsquelleAutor Nag
formpanel unterscheidet sich von panel
wenn Sie möchten, fügen Sie einen hintergrund für ein panel,die Sie gerade benötigen, setzen der config-cls:'login-form'
wenn Sie festlegen, cls:'login-form' für das formpanel,es wird nicht funktionieren, weil formpanel ist baseCls hat eine höhere Priorität,so dass wir können die baseCls:",dann die Eigenschaft cls wird die Arbeit für formpanel
InformationsquelleAutor navee
Ich denke, das sollte funktionieren:
InformationsquelleAutor Swar