Geek Answers Handbook

Sencha Touch 2: intuition of data or the exchange of dynamic information between sencha and javascript

I want to start fast. What is my problem: In ST2, I structured my application with an MVC pattern. I have a store, model, controller and views (scroll down for more information).

The working process:

  • I click on a list item ( List Viewwith a list of items from the repository)
  • Controller valid for 'itemtap' event
  • The controller function searches for the main view and pushes the detailed view
  • Record data will be set as data
  • Detailed view uses .tplto generate output and uses data

Problem Now I want to add a button or link to enable sound support. I thought of a javascript function that uses the Media method from Phonegap to play audio and I want to add this functionality dynamically in my detailed view.

Do you know how I can achieve this behavior? I am looking for a typical sencha solution, if any.

Details Overview of all files starts here

Some data is displayed in my list, and a detailed view visualizes additional information for the selected record. The list and detailed view collected in the container, I will 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'
  }
});

Detailed 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()
    });
  }
});

Pooh, a lot of reading material

0
source share
1

URL Sencha Touch "Audio" Component. , , . :

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

, URL. , Chrome Ipad2 , HTC Desire Android 2.2 .

0

More articles:


All Articles