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 Touch提供的布局系统组织它们（包括视频组件）。

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

Answer 2

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

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

在XTemplate中包含Sencha组件

2 个答案: