Question

我想改变标准＆＃34; pen＆＃34;

的图标

DetailAndActive类型的StandardListItem

。有办法吗？

到目前为止我的XML：

            <List
                id="master1List"
                items="{/path}"
                mode="{device>/listMode}"
                select="onSelect"
                itemPress="showDetail"
                growing="true"
                growingScrollToLoad="true">
                <items>
                    <StandardListItem 
                        type="DetailAndActive" 
                        activeIcon="sap-icon://message-information"
                        id="master1ListItem"
                        press="onSelect" 
                        title="{title}">
                    </StandardListItem>
                </items> 
</List>

据我所知，只有属性＆＃34; icon＆＃34; （我不需要）和＆＃34; activeIcon＆＃34; （我设置但是也没有在itemPress / tab上显示）。我以为我可以通过css更改它，但它是在数据属性中设置的（Icon字体，而不是我可以覆盖的uri）然后应用：

    .sapUiIcon:before {
  content: attr(data-sap-ui-icon-content);
...

谢谢..

[编辑：] 我接受以下答案是正确的，因为它有效。但是，正如您可以在我的评论中读到的那样，我希望通过使用聚合元数据来接受控件，如here所述：

    metadata: {
    aggregations: {
        "Button" : {type : "sap.m.Button", multiple : false, visibility: "public"}
    },
    defaultAggregation: "Button"
},

到目前为止，我现在可以在我的XML视图中向ListItem添加一个Button控件，但是它没有渲染:-)我还想到了什么想法？

Answer 1

图标在控件的深处硬编码。我发现我可以扩展StandardListItem来获得你想要的结果。

sap.m.StandardListItem.extend('my.StandardListItem', {
    renderer: {},
    constructor: function(sId, mProperties) {
        sap.m.StandardListItem.prototype.constructor.apply(this, arguments);
    var sURI = sap.ui.core.IconPool.getIconURI("action");
    this._detailIcon =
        new sap.ui.core.Icon({
            src:sURI})
        .setParent(this, null, true)
        .addStyleClass("sapMLIBIconDet");            
    }
});

http://jsbin.com/tuqufe/1/edit?js,output

有一个有效的例子

坏消息是，在下一个版本（1.28。？）中，完成此操作的方式会发生显着变化，因此您需要重做扩展控件。

[编辑：]抱歉，我忘了这个。我刚刚使用OpenUI5 V1.30 beta库构建了一个快速示例。现在关键代码看起来像这样......

sap.m.StandardListItem.extend('my.StandardListItem', {
    metadata: {
        properties: {
            "detailIcon": "string"
        }
    },
    renderer: {},
    setDetailIcon: function(icon) {
        this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);
    }
});

http://jsbin.com/bayeje/1/edit?js,output

有一个示例

UI5 StandardListItem DetailAndActive更改图标

1 个答案: