Question

I’m developing a Sencha Touch application in which I’m doing lots of Ext.extend and creating my own custom components and classes. I’m relatively new to the Sencha Touch realm, and I’m having a bit of a problem trying to use one of my components inside an Ext.XTemplate. Here’s a concept of what I’m trying to do in some code:

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

And now the semi-code for my Video Component that I need included above:

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

Does anyone have any ideas on how I can accomplish this?

Thanks!

Answer 1

[Sencha Person] Our template language currently is a bit restrictive. Once you drop into HTML for an item renderer, you cannot get back to the component level. You can achieve the desired result by extending panel as a custom component that iterates through a data list and creates and adds the items to the DOM.

We’d like to make our templating much more flexible so you can accomplish what you’re looking to do more easily, but at least in Touch 1.0, it’s not a basic task.