javascript - 如何在 ExtJS 列表 itemTpl 中显示星级小部件？

Question

我正在开发 Sencha Touch 2 应用程序并使用来自 http://podlipensky.com/post/2012/03/20/Sencha-Touch-2-ExtuxtouchRating.aspx 的星级评级小部件

我想显示配置如下的列表中每个项目的评级:

Ext.define('Schneehoehen.view.LoipenUebersicht', {
extend: 'Ext.navigation.View',
xtype: 'loipenuebersicht',

config: {
    items: [{
        xtype: 'list',
        title: 'Loipen Übersicht',
        itemTpl: '{label}', // I would like to show the widget next to the label
        onItemDisclosure: true,

        store: Ext.create('Schneehoehen.store.LoipenUebersichtStore')
    }]
}
})

现在我想知道如何在 itemTpl 中包含我的星级评分小部件。

小部件使用以下代码显示在另一个 View 的表单中:

new Ext.ux.touch.Rating({
   itemsCount: 5, 
   label: 'Image less', 
   cls: 'x-imageless-rating', 
   itemCls: 'x-imageless-star', 
   itemHoverCls: 'x-imageless-hover'
})

提前致谢!约翰内斯

Answer 1

您在这里需要的是如何在列表的 itemTpl 模板中获取 XType 或其他组件。我不知道直接方法，但即使您设法使用模板方法编写自己的方法，也很难将它们放在列表项中。另外为什么有那么多组件占用dom。

如果您可以在这里稍微修改一下您的方法，swarm online 上有一个漂亮的插件，它可能可以帮助您解决这个问题。 http://www.swarmonline.com/2011/03/ext-ux-touch-listoptions-demo/

此插件在列表行的滑动上添加了 Twitter 应用程序样式菜单。您可以在此区域添加星级。我记得我曾在 POC 中使用过它，并将 Sencha 按钮添加到显示的菜单中。我不确定他们是否更新了他们的代码以与 Sencha Touch 2 兼容，但如果您仔细查看源代码，就会发现其中的内容并不多。