sencha touch-ändern der Farbe eines bestimmten Listenelements
habe eine sehr einfache list-Komponente, aber möchten, ändern Sie die Zeile Farbe einiger Zeilen abhängig von einem Wert/ich habe versucht die Einstellung eines tpl, aber es scheint nicht zu funktionieren. Jede Hilfe würde geschätzt
Ext.create('Ext.dataview.List', {
id : 'mylist',
store: myStore,
tpl: new Ext.XTemplate(
'<tpl for=".">'
' <tpl if="val == 0"><div style="background-color:red">{name}</div></tpl>',
' <tpl if="val == 1"><div>{name}</div></tpl>',
'</tpl>'
)
});
- Dein code sollte funktionieren, ich denke, wenn Sie Ihre Daten sieht wie folgt aus:
[{val: 1, name: 'name1'}...]
InformationsquelleAutor neolaser | 2011-10-14
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ah, grundlegende Fehler, das ist, was du hast in deinem code ::
Und das ist, was es sein sollte, statt :::
** Beachten Sie die drei "gleich" Zeichen, die Sie hinzufügen müssen zwischen den beiden Werten, du bist wirklich zu vergleichen. Wenn du also normalerweise schrieb
Dann in einer Vorlage, wäre
Also eine bedingte Anweisung wie
Wird
EDIT :: das Hinzufügen der Kodierung für die gesamte Zeile mit der Hintergrundfarbe gefüllt zugeordnet
HINWEIS: Bitte machen Sie eine separate XTemplate-Objekt, und nicht inline tpl-code. Das wird Ihnen erlauben, zu nutzen, das volle Potenzial der XTemplate, einschließlich der Funktionen, die sind unglaublich cool !
Versuch 1 ::
tpl-Code Hinzugefügt werden, um mit der Hintergrundfarbe
//Hinweis : ich habe in der Hilfsfunktionen, die ich mit ändern der Hintergrundfarbe der Klasse. Meine tpl, verwendet grundsätzlich anderen Farbe auf jeder Liste Linie. Also, wenn die erste Zeile ist grün, die zweite gelb, die Dritte grün, die vierte ist gelb, und so weiter.
Zugehörigen CSS Hinzugefügt werden (für die listClasses ausgewählt, die in den li-tag)
BEARBEITEN-Studie 2 :: Neue CSS Hinzugefügt werden
CSS
Hinzufügen der CSS-Code, fügen Sie Folgendes zu der Liste Objekt ::
.x-list-item-body
auf 0px! Vielen Dank für Ihre Hilfe.Dies ist möglicherweise zu spät, aber können Sie es auf diese Weise
und in der css-Datei fügen Sie einfach die Liste Stil
Hier ist was ich tun:
In meiner css anstelle von einer Hintergrundfarbe verwende ich einen hintergrund-Verlauf: