Results 1 to 5 of 5

Thread: Displaying parsed data - new to Sencha and very confused

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Vote Rating

    Default Answered: Displaying parsed data - new to Sencha and very confused

    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('', {
        extend: '',
        requires: [
        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>',
        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: '',
        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;
        onTracksContainerShow: function(component, options) {
            var albumStore = Ext.create('');
            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!!

  2. Here's an update. Hopefully this can give you some ideas to get you started:

    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 They are pretty good.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts