UI5 StandardListItem DetailAndActive更改图标 [英] UI5 StandardListItem DetailAndActive change Icon

问题描述

我想更改

StandardAndActive类型的StandardListItem

StandardListItem of type DetailAndActive

。有没有办法这样做？

到目前为止我的XML：

my XML so far:

            <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> 

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

As far as I know there are only properties "icon" (which I do not need) and "activeIcon" (which I set but which is also not shown on itemPress/tab). I thought I might change it via css, but it is set in a data-attribute (Icon font, not a uri I could overwrite) and then applied:

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

谢谢..

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

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

到目前为止，我现在可以将List控件添加到ListItem中了。我的XML视图，但它没有渲染:-)还有什么想法我还想念这里吗？

This works so far that that I am now allowed to add a Button control to the ListItem in my XML view, but it is not rendered :-) Any ideas what I miss here additionally?

推荐答案

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

The icon is hardcoded deep in the control. I found I can extend the StandardListItem to get the result you want like this.

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。？）中，完成此操作的方式发生了显着变化，因此您需要重做扩展控件。

The bad news is that in the next release (1.28.?) the way that this is done changes significantly so you will need to redo the extended control.

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

Sorry I forgot about this one. I just built a quick sample with the OpenUI5 V1.30 beta library. Now the key code looks like this...

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更改图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！