Question

I’d like to start quick.
What is my problem:
Within ST2 I structured my application with the MVC pattern. I have a store, a model, a controler and the views (for more information scroll down).

Workflow:

• I click a list item (List View with a list of elements from store)
• Controller acts for the event ‘itemtap’
• Controller function is looking for main view and pushes a detail view
• Record data will be set as data
• Detail view uses .tpl to generate the output and uses the data

Problem
Now I want to add a button or link to enable audio support.
I thought about a javascript function which uses the Media method from Phonegap to play audio
and I want to add this functionality dynamicly within my detail view.

Do you have any idea how I can achive that behavoir? I’m looking for a typical “sencha” solution, if there is any.

Detail Overview of all files starts here

My list shows up some data and a detail view visualize further information to a selected record.
The list and the detail view a collected within a container, I’ll give you an overview:

Container:

Ext.define('MyApp.view.ArtistContainer', {
  extend: 'Ext.navigation.View', 
  xtype: 'artistcontainer', 
  layout: 'card',
  requires: [
    'MyApp.view.ArtistList',
    'MyApp.view.ArtistDetail'
  ],

  config: {
    id: 'artistcontainer',
    navigationBar: false,
    items: [{
        xtype: 'artistlist'
    }]}
});

List

Ext.define('MyApp.view.ArtistList', {
  extend: 'Ext.List',
  xtype: 'artistlist', 

  requires: [
    'MyApp.store.ArtistStore'
  ],
  config: {
    xtype: 'list',
    itemTpl: [
        '<div>{artist}, {created}</div>'
    ],
    store: 'ArtistStoreList'
  }
});

Detail View

Ext.define('MyApp.view.ArtistDetail', {
  extend: 'Ext.Panel', 
  xtype: 'artistdetail', 

  config: {
    styleHtmlContent: true,

    scrollable: 'vertical',
    title: 'Details', 
    tpl: '<h2>{ title }</h2>'+
          '<p>{ artist }, { created }</p>'+
          '<a href="#">{ audio }</a>'+
          '',
    items: [
        //button
        {
            xtype: 'button',
            text: 'back',
            iconCls: 'arrow_left',
            iconMask: true,
            handler: function() {
                var elem = Ext.getCmp("artistcontainer");
                elem.pop();
            }
        }
    ] 
  }
});

And finally the controller

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

  config: {
    refs: {
        artistContainer: 'artistcontainer', 
    },
    control: {
        'artistlist': {
            itemtap: 'showDetailItem'
        }
    }
  },

  showDetailItem: function(list, number, item, record) {
    this.getArtistContainer().push({
        xtype: 'artistdetail',
        data: record.getData()
    });
  }
}); 

Puh, a lot of stuff to Read

Answer 1

Here you can see an example of how to load audio from an external url with Sencha Touch “Audio” Component. Haven’t work with it but I think it fits your needs. Declaring it is as simple as follows:

var audioBase = {
        xtype: 'audio',
        url  : 'crash.mp3',
        loop : true
    };

Iwould reuse the component and load the songs or sound items by setting the url dynamically. By the way I tried it on Chrome and Ipad2 and worked fine but failed on HTC Desire Android 2.2 default browser.