Включение компонента Sencha в XTemplate - PullRequest
Новая
       18

Включение компонента Sencha в XTemplate

3 голосов
/ 11 ноября 2011

Я занимаюсь разработкой приложения Sencha Touch, в котором я делаю много Ext.extend и создаю свои собственные компоненты и классы.Я относительно новичок в сфере Sencha Touch, и у меня возникла небольшая проблема при попытке использовать один из моих компонентов внутри 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);

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

Спасибо!

Ответы [ 2 ]

1 голос
/ 15 ноября 2011

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

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

1 голос
/ 13 ноября 2011

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

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

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

...