Mobile Anwendungen für iOS, Android und BlackBerry Touch

Sencha Touch
Kommentare

Gruppierte Listen

Bevor wir nun Verhalten für die Filmliste definieren, benötigen wir erst noch die Bookmarks-Liste. Ziel ist es, Filme von der Liste bookmarken zu können und dadurch – technisch gesehen

Gruppierte Listen

Bevor wir nun Verhalten für die Filmliste definieren, benötigen wir erst noch die Bookmarks-Liste. Ziel ist es, Filme von der Liste bookmarken zu können und dadurch – technisch gesehen – Datensätze von einem Store in den anderen zu kopieren. Die Store-Definition spare ich mir aus Platzgründen an dieser Stelle (Sie finden sie in den Dateien js/store/LocalMovieList.js und js/store/AbstractMovieList.js – hier ist also der vorhin erwähnte zweite Store), interessanter wird es bei der Liste: Diese ist nämlich alphabetisch gruppiert und zeigt außerdem einen Buchstabenindex an (Abbildung 4).

Abb. 4: Die fertig konfigurierte Bookmarks-ListeAbb. 4: Die fertig konfigurierte Bookmarks-Liste (Vergrößern)

Um die Gruppierung für die Liste zu aktivieren, muss man einerseits die Liste mit grouped: true konfigurieren und andererseits im jeweiligen Store die Methode getGroupString implementieren, in der man den Teil aus dem (als Parameter übergebenen) Datensatz extrahieren muss, nach dem gruppiert werden soll (in unserem Fall ist das einfach nur der erste Buchstabe des Filmtitels).

Den Buchstabenindex aktivieren Sie zunächst, indem sie die Liste einfach mit indexBar: true konfigurieren. Es gibt zudem aber auch die Möglichkeit, ein Objekt zu übergeben, indem man den Buchstabenindex genauer konfigurieren kann, etwa an welcher Stelle er angedockt werden soll (links oder rechts), ob er vertikal oder horizontal verlaufen oder ob ein Zeichen vorangestellt werden soll (z.B. #, falls die Liste auch numerische Einträge enthält). Die konfigurierte Liste sehen Sie in Listing 8, die Methode getGroupString des Stores finden Sie aus Platzgründen auf der Heft-CD in der Datei js/lib/AbstractMovieList.js.

Listing 8: Gruppierte Liste mit Buchstabenindex

this.list = new Ext.List({
    height: '100%',
    scroll: 'vertical',
    grouped: true,
    indexBar: {
        dock: 'right',
        listPrefix: '#'
    },
    itemTpl: '{title}',
    store: this.movieStore
});

Filme bookmarken

Jetzt, da beide Listen fertig konfiguriert sind, soll als Nächstes die Bookmark-Funktionalität implementiert werden. Hierfür müssen also die beiden Panels irgendwie miteinander agieren: Dafür müssen wir über das anfangs definierte TabPanel Score11.Mobile.MainWindow gehen, da dort beide Panels im selben Scope definiert wurden und wir sie daher miteinander agieren lassen können. Angefangen bei der Liste des Home-Panels müssen wir zunächst einmal abfangen, wenn ein Film angetippt wird. Hierbei feuert die Liste praktischerweise das Event itemtap. Da sich die Liste aber im Panel befindet, sind wir noch eine Ebene zu tief. Um das Event weiter nach oben durchzureichen, müssen wir dem Home-Panel als Erstes sagen, dass es jetzt ebenfalls Events des Typs itemtap feuern kann, das erledigen wir über die Methode addEvents(). Anschließend müssen wir nur noch das Event itemtap auf der Liste abfangen und entsprechend weiterleiten. Wie daraufhin das Panel, das wir ursprünglich in Listing 4 definiert haben, aussieht, sehen Sie in Listing 9.

Listing 9: Panel mit Custom Events

Score11.Mobile.Home = Ext.extend(Ext.Panel, {
    iconCls: 'home',
    title: 'Home',
    movieStore: null,
    constructor: function(config) {
        this.addEvents('itemtap');
        Score11.Mobile.Home.superclass.constructor.call(this, config);
    },
    initComponent: function() {
        this.list = new Ext.List({
            height: '100%',
            scroll: 'vertical',
            itemTpl: '{title}',
            store: this.movieStore,
            listeners: {
                itemtap: Ext.createDelegate(function(list, index, item, event) {
                    this.fireEvent('itemtap', list, index, item, event);
                }, this)
            },
            plugins: [
                new Ext.plugins.ListPagingPlugin({
                    autoPaging: true
                }),
                new Ext.plugins.PullRefreshPlugin()
            ]
        });
    }
});

Mit Ext.createDelegate() teilen wir dem Event Callback mit, dass es im Kontext des aktuellen Objekts ausgeführt werden soll. Selbstverständlich lassen sich Event Listener auch wie bei Ext JS über die on()-Methode registrieren, ein Beispiel dazu sehen Sie gleich.

Nachdem das Event nun nach oben durchgereicht wurde, lässt es sich im MainWindow abfangen und dem User kann eine Abfrage angezeigt werden, ob er den Film bookmarken möchte oder nicht. Dafür eignet sich hervorragend ein sog. ActionSheet, welches Sie in Abbildung 5 sehen können.

Abb. 5: ActionSheetAbb. 5: ActionSheet (Vergrößern)

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -