在XTemplate中包含一个Sencha组件

我正在开发一个Sencha Touch应用程序，其中我正在做很多Ext.extend并创建我自己的自定义组件和类。我对Sencha Touch领域相对来说比较陌生，在尝试使用Ext.XTemplate中的某个组件时，我遇到了一些问题。下面是我想要的一些代码做一个概念：在XTemplate中包含一个Sencha组件

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

没有人有任何的想法我怎么能做到这一点？

谢谢！

来源

2011-11-11 Mike

我认为最好是直接将播放器添加到项目中，而不是在其中使用XTemplate（顺便说一句，XTemplate总是被编译，不需要设置该配置选项），如果你想拥有，可以说，一个视图缩略图，那么你应该扩展DataView而不是Panel。 – VoidMain

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

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

来源

2011-11-14 23:10:07

我们从来没有能够以我们想要的精确方式得到这个工作。相反，我们必须添加一个带有图片的插页式页面，该图片显示“点击播放”，然后将视频加载到设备的本机视频播放器中。 – Mike

既然你提供的代码是相当的概念，我只能对可能的解决方案提供了一个总体方向：

我会尝试打破在页面中的内容分为多个组件并组织他们（包括视频组件）由Sencha Touch提供的版面系统。

当使用Extjs/Sencha Touch时，考虑视图的“正确”方法不是将它们写入html中，而是尽可能使用库中的组件构建它们。

来源

2011-11-12 22:22:10

如何分解内容似乎是一项艰巨的任务，直到我能够退后一步，看看Sencha Touch的大图。您将其分成多个组件的评论非常有意义，它是ST最强大的功能！干杯.. – M69

在XTemplate中包含一个Sencha组件

回答

相关问题