Displaying parsed data - new to Sencha and very confused

[keweli]

Hello, I have spent many hours trying to understand Sencha and reading tutorials which I am finding to be really poor. If someone could answer my questions it would be really good:

Just as a learning exercise, I have decided to make a simple album track list. The user will basically select an album and it will display a list of tracks from the selected album. Then they can select the track and see the track's lyrics. To start off, I have put the data in the actual store:

Ext.define('MyApp.store.AlbumStore', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Album'
    ],

    config: {
        autoLoad: true,
        data: [
            {
                id: 0,
                title: '\'F\' Debut',
                year: 2004,
                cover_url: 'img/albums/f_debut.jpg'
            },
            {
                id: 1,
                title: 'Funny Girl',
                year: 2005,
                cover_url: 'img/albums/funny_girl.jpg'
            }
        ],
        model: 'MyApp.model.Album',
        storeId: 'albumStore'
    }
});

I created a list inside a container which allows the user to select the album:

{
    xtype: 'list',
    id: 'albumList',
    itemId: 'mylist',
    style: 'background-color: grey;',
    layout: {
        type: 'fit'
    },
    itemTpl: [
        '<div style="height:75px;">',
        '    <img src="{cover_url}" width="75" height="75" alt="{title}" style="float:left;" />',
        '    <span style="float:right;margin:15px 0;">{title} ({year})</span>',
        '</div>'
    ],
    store: 'albumStore'
}

Next I made a controller which listens for when an album is selected and gets its index:

Ext.define('MyApp.controller.AlbumController', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            albumList: '#albumList',
            tracksContainer: '#tracksContainer',
            lyrics: '#lyrics'
        },

        control: {
            "#albumList": {
                itemtap: 'onAlbumItemTap'
            },
            "#tracksContainer": {
                show: 'onTracksContainerShow'
            }
        }
    },

    onAlbumItemTap: function(dataview, index, target, record, e, options) {
        var tracksContainer = Ext.create('MyApp.view.TracksContainer');
        this.selectedAlbumId = index;
        Ext.Viewport.setActiveItem(tracksContainer);
    },

    onTracksContainerShow: function(component, options) {
        var albumStore = Ext.create('MyApp.store.AlbumStore');
        var title = albumStore.getAt(this.selectedAlbumId).get('title');
        var year = albumStore.getAt(this.selectedAlbumId).get('year');
        alert('Selected track is ' + title + ' (' + year + ')!');
    }

});

The function (onAlbumItemTap) records the selected album id and then opens the trackContainer. At this point I cannot figure out what to do next. I want to do 2 things:
1) In the new trackContainer opened, show the title/year of the album (i only know how to display it in an alert but I want it on the actual page). Do I have to use javascript to change the html? (e.g. set innerHTML of <span id="title">)
2) I want to show a list of tracks for the album just like how I showed a list of albums, but this time the tracks selected must be only for the selectedAlbumId chosen. In the previous album list I just selected store: 'albumStore' which took all albums. I don't see any option of allowing me to get only certain ones.

Any help is much appreciated! Thanks!!

[pentool]

You could use a navigation view. Here's a sample (just hit RUN at the top):
http://www.senchafiddle.com/#Drru4

You could do tracks similarly. Currently, when you tap on an album, I just simply display the lyrics. Instead, you can push a navigation view with the tracks. Then, when you select a track, just push yet another navigation view which displays the lyrics.

Then tap "Back" in the titlebar to go back to the tracks, and tap "Back" again to get back to the albums.

[keweli]

Thanks so much pentool, really appreciate your help!
I think your way of using a navigation view is better in this scenario. Pity I could not find a tutorial on this.
There are still 2 minor things I want to ask however:
- I do not really see how to push the navigation view with the tracks I want. In your Main.js example, it just uses store: 'AlbumStore' to load all albums. If I want to load TracksStore instead with the albumId of 1 for example, how can I do that?
- Is it possible to use a template in the onAlbumItemTap function? (e.g. I just parse in the title, lyrics and the template will specify the html tags and put {title} in the right places).

Thanks again champ, really appreciate it.

[pentool]

Here's an update. Hopefully this can give you some ideas to get you started:
http://www.senchafiddle.com/#S2DsS

I don't use separate stores for albums and tracks. Ideally they should be a single store, since tracks are part of the album. However, I do define two separate models (albeit in a single model file just for time and space saver). One for the album and one for the track. Read up on the data associations (eg hasmany, belongsto, etc) how to join models (this is still a little new to me as well).

Also, if you haven't found it yet, check out the tutorials on http://www.miamicoder.com. They are pretty good.

[keweli]

Cheers buddy, you are a lifesaver. I feel I am finally understanding something.
That site will also be useful