Sencha Touch 2：数据集成或如何在sencha和javascript之间共享动态信息

Posted 2023-02-26

【中文标题】Sencha Touch 2：数据集成或如何在sencha和javascript之间共享动态信息

【英文标题】：Sencha Touch 2: data intigration or how to share dynamic information between sencha and javascript

【发布时间】：2012-03-25 20:17:15

【问题描述】：

我想快速开始。 我的问题是什么： 在 ST2 中，我使用 MVC 模式构建了我的应用程序。我有一个商店、一个模型、一个控制器和视图（更多信息向下滚动）。

工作流程：

我点击了一个列表项（List View 带有来自商店的元素列表） 控制器作用于事件“itemtap” 控制器功能正在寻找主视图并推送详细视图 记录数据将被设置为数据 详细视图使用.tpl生成输出并使用数据

问题 现在我想添加一个按钮或链接来启用音频支持。 我想到了一个javascript函数，它使用Phonegap的Media方法来播放音频 我想在我的详细视图中动态添加此功能。

您知道我如何实现这种行为吗？我正在寻找一个典型的“煎茶”解决方案，如果有的话。

所有文件的详细概述从这里开始

我的列表显示了一些数据，详细视图显示了所选记录的更多信息。 列表和详细视图收集在一个容器中，我给你一个概览：

容器：

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

呸，好多东西要读

【问题讨论】：

我不确定您是否需要问题中的所有这些细节。我还是不明白你真正想要什么：点击链接时需要播放音乐文件吗？

当我单击按钮或链接时，我正在尝试播放音乐。但是音乐数据文件是动态的。我想只是添加对javascript函数的引用并在参数中添加文件名。 javascript 函数将处理所有的音乐内容。

【参考方案1】：

Here 你可以看到如何使用 Sencha Touch“音频”组件从外部 url 加载音频的示例。没有使用它，但我认为它符合您的需求。声明就这么简单：

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

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