在 XTemplate 中包含 Sencha 组件

Question

我正在开发一个 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);

有人对如何实现此目标有任何想法吗？

谢谢！

Answer 1

[Sencha Person] 我们的模板语言目前有点限制。一旦放入项目渲染器的 HTML 中，您就无法返回到组件级别。您可以通过将 panel 扩展为自定义组件来实现所需的结果，该组件迭代数据列表并创建项目并将其添加到 DOM。

我们希望使我们的模板更加灵活，以便您可以更轻松地完成您想要做的事情，但至少在 Touch 1.0 中，这不是一项基本任务。

Answer 2

由于您提供的代码非常概念化，我只能提供可能的解决方案的总体方向：

我会尝试将页面中的内容分解为多个组件，并使用 Sencha 提供的布局系统组织它们（包括视频组件）触碰。

使用 Extjs/Sencha Touch 时，考虑视图的“正确”方式不是用 html 编写它们，而是尽可能使用库中的组件来构造它们。