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:
Code:
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:
Code:
{
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:
Code:
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!!