Блог

Я разрабатываю приложение Sencha Touch, в котором я делаю много Ext.extend и создаю свои собственные пользовательские компоненты и классы. Я относительно новичок в области сенсорного управления Sencha, и у меня возникла небольшая проблема при попытке использовать один из моих компонентов внутри Ext.XTemplate . Вот концепция того, что я пытаюсь сделать в некотором коде:

 MyObj = Ext.extend(Ext.Panel, {
    cls: 'myClass',
    layout: 'card',
    scroll: 'vertical',
    monitorOrientation: true,
    config: myConfigObject.localObjectType,
    loc: 'en_US',
    initComponent: function() {
        // some random init code here…
        // Including:

        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
            '<tpl if="Available === true"><div class="itemAvail"></tpl>',
            '<tpl if="Available !== true"><div class="itemNotAvail"></tpl>',
            '<div class="formText">',
            // INSERT MY VIDEO COMPONENT HERE…
            '</div>',
            '</div>',
            '</tpl>',
            { compiled : true }
        );
    },
    // Object definition continues, but I don't think it's germane to this discussion…
});

Ext.reg('videoList', MyApp.views.VideoList);
  

И теперь полукод для моего видеокомпонента, который мне нужен, включен выше:

 MyVideoComponent = Ext.extend(Ext.Panel, {
    programID: null,
    chapterID: null,
    video: null,
    videoPlayer: null,

    initComponent: function() {
        var progID = this.programID;
        var chapID = this.chapterID;

        // Set up the video object based on progID and chapID

        this.videoPlayer = new Ext.Video({
            id: "videoPlayer",
            url: video.URL,
            posterURL: video.posterURL,
            fullscreen: true,
            autoResume: true,
            // configure listeners for play/end/error
        });

        // Call superclass.initComponent()
    },

    // Create listener callbacks for onPlay, onEnded, onError…

});

Ext.reg('videoComponent', MyApp.components.VideoComponent);
  

Есть ли у кого-нибудь идеи о том, как я могу этого добиться?

Спасибо!

[Sencha Person] В настоящее время наш язык шаблонов немного ограничен. Как только вы переходите в HTML для средства визуализации элементов, вы не можете вернуться к уровню компонентов. Вы можете достичь желаемого результата, расширив panel как пользовательский компонент, который выполняет итерации по списку данных, создает и добавляет элементы в DOM.

Мы хотели бы сделать наши шаблоны намного более гибкими, чтобы вы могли легче выполнять то, что хотите, но, по крайней мере, в Touch 1.0 это не является базовой задачей.

Поскольку представленный вами код довольно концептуальный, я могу лишь дать общее направление возможным решениям:

Я бы попытался разбить содержимое страницы на несколько компонентов и упорядочить их (включая видеокомпонент) с помощью системы компоновки, предоставляемой Sencha Touch.

При использовании Extjs / Sencha Touch «правильный» способ представления представлений — не записывать их в html, а создавать их с использованием компонентов в библиотеке, насколько это возможно.