Sencha Touch 2: data intigration or how to share dynamic information between sencha and javascript

问题

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

回答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.

来源：https://stackoverflow.com/questions/9863660/sencha-touch-2-data-intigration-or-how-to-share-dynamic-information-between-sen

标签

javascript

model-view-controller

cordova

sencha-touch

sencha-touch-2