Sencha touch DataView和将包装所有项目的自定义模板

Sencha touch DataView和将包装所有项目的自定义模板,sencha-touch,sencha-touch-2,Sencha Touch,Sencha Touch 2,我有一个DataView类型的容器: Ext.define('CustomView', { extend: 'Ext.DataView' }); 另外,我还有一个远程存储,它包含:[{id:1,名称:'abc'},{id:2,名称:'test'}] 我想以html的方式在dataview中显示这些项目: <ul> <li>abc</li> <li>test</li> </ul> abc 试验

我有一个DataView类型的容器:

Ext.define('CustomView', {
    extend: 'Ext.DataView'
});
另外,我还有一个远程存储,它包含:
[{id:1,名称:'abc'},{id:2,名称:'test'}]

我想以html的方式在dataview中显示这些项目:

<ul>
     <li>abc</li>
     <li>test</li>
</ul>
  • abc
  • 试验
在Sencha Touch 1中,我们可以通过设置tpl配置和xtemplate标记来实现这一点。在Sencha Tocuh 2中,它不再工作了,因为setTpl只在“数据”存在并且我使用存储时才工作。setItemTpl为每个项目设置一个模板,因此它也不起作用。我可以手动呈现模板并使用setHtml,但“tap”事件对项目不起作用


如何设置模板,使其在SC2中呈现所需的html,并保留tap事件?

dataview
用于商店的自定义呈现()

“如果要多次显示同一组件的集合,请使用DataView”

不幸的是,它也有与
listview
相同的限制,因为您只能指定
itemTpl
(或
dataitem
)并且不能控制为整个组件生成的标记


我认为您最好的选择是使用
面板
创建自定义视图,并自己编写
存储
读取逻辑

您不能使用
列表视图的任何原因?我不明白为什么
setItemTpl
不起作用。您能解释一下吗?@Jayraj,因为listview与dataview相同,但提供了我不需要的其他列表功能
setItemTpl
为每个项目设置tpl,所以我会得到两个ul-s:
。这是
[{id:1,name:'abc'},{id:2,name:'test'}]
在您的视图中应该是一行还是两行?@Jayraj它应该为两个项目呈现我在问题中发布的html。是的,我理解。但是为什么不指定
itemTpl:“
  • {name}
  • ,并在存储上使用
    getData
    方法来获取数据呢?这样,您就可以使用常规的
    列表视图
    ,并点击
    事件。除非您只想要
    • etc
    • etc
      • 而绝对不想要其他标记。我如何更改整个面板的标记?我想我只有布局来安排我的项目和tpl配置,只与数据。。。同样的问题。很奇怪,sencha团队改变了行为,在版本1中,您可以使用tpl和itemSelector做很多有用的事情;(
        panel
        s在Sencha Touch 2中支持XTemplate。可以使用
        tpl
        config属性指定要编写的XTemplate。并且
        data
        config可以用于指定要应用于
        tpl
        的数据。正如我在问题中提到的,dataview也有
        tpl
        data
        。B但是我不能使用
        data
        ,因为我使用ajax的
        store
        来检索数据。所以你可以使用store的
        getData
        方法来获取正确的数据?并在面板的配置中使用该值?然后我需要在面板渲染之前获取数据并重新绘制以进行拉式更新和分页…看起来很复杂,但我认为这很难这是唯一的办法,谢谢。