Sencha Touch 2: анализ данных или как обмениваться динамической информацией между sencha и javascript - PullRequest
Новая
       25

Sencha Touch 2: анализ данных или как обмениваться динамической информацией между sencha и javascript

0 голосов
/ 26 марта 2012

Я хотел бы начать быстро. В чем моя проблема: В ST2 я структурировал свое приложение по шаблону MVC. У меня есть магазин, модель, контроллер и представления (для получения дополнительной информации прокрутите вниз).

Рабочий процесс:

  • Я щелкаю элемент списка (List View со списком элементов из магазина)
  • Контроллер действует для события 'itemtap'
  • Функция контроллера ищет основной вид и выдвигает подробный вид
  • Данные записи будут установлены как данные
  • Подробное представление использует .tpl для генерации вывода и использует данные

Задача Теперь я хочу добавить кнопку или ссылку, чтобы включить поддержку аудио. Я подумал о функции JavaScript, которая использует метод Media из Phonegap для воспроизведения аудио и я хочу динамически добавлять эту функциональность в моем подробном представлении.

Ты хоть представляешь, как я могу добиться такого поведения? Я ищу типичное решение "сенча", если оно есть.

Подробный обзор всех файлов начинается здесь

В моем списке отображаются некоторые данные, а в подробном представлении отображается дополнительная информация для выбранной записи. Список и подробный вид, собранные в контейнере, я дам вам обзор:

Контейнер: 

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

Пух, много чего почитать

1 Ответ

0 голосов
/ 27 марта 2012

Здесь вы можете увидеть пример загрузки аудио с внешнего URL-адреса с помощью Sencha Touch «Audio» Component.Не работал с этим, но я думаю, что он соответствует вашим потребностям.Объявить это так просто: 

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

Я бы повторно использовал компонент и загружал песни или звуковые элементы, устанавливая URL-адрес динамически.Кстати, я попробовал это на Chrome и Ipad2 и работал нормально, но не получилось в браузере HTC Desire Android 2.2 по умолчанию.

...