dojo - 如何在 dojox.mobile.EdgeToEdgeList 中创建等高的 ListItems？

Question

我有一个标准dojox.mobile.EdgeToEdge列表，里面有一组dojox.mobile.ListItems。我需要确保每个列表项的高度相同。请参阅下面绘制不佳的表示：

EdgeToEdgeList带s 的标准ListItem：

+-------------------+
| Standard ListItem |
|-------------------|
| Standard ListItem |
|-------------------|
| Standard ListItem |
|-------------------|
| Standard ListItem |
+-------------------+

EdgeToEdgeList具有可变高度列表项的标准；通过variableHeight在列表项上设置属性来实现：

+-------------------+
| Standard ListItem |
|-------------------|
| Standard ListItem |
|-------------------|
| Standard ListItem |
| with some long    |
| text and variable |
| height that wraps |
| to next line      |
|-------------------|
| Standard ListItem |
+-------------------+

EdgeToEdgeList具有相等高度的列表项（较小的列表项“占据”最大高度）：

+-------------------+
|                   |
|                   |
| Standard ListItem |
|                   |
|                   |
|-------------------|
|                   |
|                   |
| Standard ListItem |
|                   |
|                   |
|-------------------|
| Standard ListItem |
| with some long    |
| text and variable |
| height that wraps |
| to next line      |
|-------------------|
|                   |
|                   |
| Standard ListItem |
|                   |
|                   |
+-------------------+

我正在尝试复制第三种解决方案。有没有标准的方法来做到这一点？

编辑：我没有提到我正在以编程方式构建列表，所以我事先不知道最大项目的高度。像这样的东西可以吗？

var largest = 0;
array.forEach(list.getChildren(), function(child) {
    var childHeight = domStyle.get(child.domNode, 'height');

    largest = (childHeight > largest) ? childHeight : largest;
});

array.forEach(list.getChildren(), function(child) {
    domStyle.set(child.domNode, 'height', largest + 'px');
});

这似乎有点“hack-y”。

Answer 1

覆盖.mblListItemCSS 类中的 height 属性。

我相信默认情况下高度是 43px。

编辑：我认为您的代码可以工作，但是您需要将ListItem's 设置为 variableHeight 以便 Dojo 计算给每个高度的高度，然后取最大值并将其应用于每个高度。与您编写的类似，但添加了 variableHeight，然后在应用最大高度时将其删除。

var largestHeight = 0;
var list = dijit.byId("list");
dojo.forEach(data, function(record) {
    var listItem = new dojox.mobile.ListItem({
        label: data.label
        variableHeight: true,
    }); 
    list.addChild(listItem); 
    var currentHeight = (dojo.style(listItem.domNode, 'height');
    largestHeight = (currentHeight > largestHeight ? currentHeight : largestHeight);
});

dojo.query('.mblListItem', dojo.byId('list')).forEach(function(node) {
    dojo.removeClass(node, 'mblVariableHeight');
    dojo.style(node, 'height', largestHeight + 'px');
});