Sencha Touch 2:数据指示或如何在sencha和javascript之间共享动态信息 [英] Sencha Touch 2: data intigration or how to share dynamic information between sencha and javascript

问题描述

我想快速开始. 我的问题是什么: 在ST2中，我使用MVC模式构造了我的应用程序.我有一个商店，一个模型，一个控制器和一个视图(有关更多信息，请向下滚动).

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).

工作流程:

• 我单击一个列表项(带有商店中元素列表的List View)
• 控制器负责事件'itemtap'
• 控制器功能正在寻找主视图并推送详细视图
• 记录数据将被设置为数据
• 详细信息视图使用.tpl生成输出并使用数据

• 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

问题 现在，我想添加一个按钮或链接以启用音频支持. 我想到了一个JavaScript函数，该函数使用Phonegap的Media方法播放音频 并且我想在我的详细信息视图中动态添加此功能.

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.

所有文件的详细信息概述从此处开始

我的列表显示了一些数据，详细视图将可视化更多信息显示给选定的记录. 列表和详细信息查看了容器中收集的内容，我将为您提供概述:

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:

容器:

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'
    }]}
});

列表

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

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

详细信息视图

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

最后是控制器

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

P，有很多东西要读

推荐答案

这里，您将看到一个示例，该示例说明了如何使用Sencha Touch音频"组件从外部URL加载音频.尚未使用它，但我认为它符合您的需求.声明起来很简单，如下所示:

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
    };

我将重用该组件，并通过动态设置url来加载歌曲或声音项目.顺便说一下，我在Chrome和Ipad2上尝试了一下，效果很好，但是在HTC Desire Android 2.2默认浏览器上却失败了.

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.

这篇关于Sencha Touch 2:数据指示或如何在sencha和javascript之间共享动态信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！