javascript - 如何改进 VirtualList 中的列表项

Question

你看，实际上我有一个虚拟列表小部件:

var list = new qx.ui.list.List().set({labelPath: "label"});

所以我使用 Json 存储从服务器检索数据:

var store = new qx.data.store.Json('my/resource/data.json');
store.bind("model", list, "model");

那行得通。但我需要更丰富的列表元素，不仅仅是一个图标，还有一些描述和状态。该数据位于服务器返回的 json 中，但现在我可以自定义项目元素来显示它吗？

Answer 1

qooxdoo 中的列表使用 qx.ui.form.ListItem默认情况下。您可以通过列表中的 createItem 覆盖它 delegate .

This example来自 demobrowser 展示了如何将委托(delegate)与 createItem 和 bindItem 一起使用。

如果您对列表项的外观有真正的自定义想法，您需要做的是:

• 创建一个实现 qx.ui.form.IModel 的自定义 ListItem 类(可能包括 qx.ui.form.MModelProperty) .使用属性和子控件。也许从 qx.ui.form.ListItem 继承并覆盖布局/子控件是一个好的开始，但您也可以从 qx.ui.core.Widget 继承- 需要注意状态等。
• 使用主题机制将其设计成您想要的样式。
• 使用 setDelegate() 覆盖 createItem 和 bindItem 将所需的模型属性连接到您的自定义列表项。

由于问题没有进一步深入，这可能会给你一个起点。