使用 HBox 容器和继承但自定义的事件扩展控件

Question

想法是在 MultiComboBox 控件下有一个 HBox 容器，选定的标记将被推送到该容器。我遵循了不同的教程，但无法获得成功。现在只显示了一个 multiComboBox。

想法：

自定义控件的简化（测试）实现：

sap.ui.define([
  'sap/m/MultiComboBox',
  'sap/m/HBox'
], function (MultiComboBox, HBox) {
  'use strict';

  /**
   * Constructor for a new MultiCombobox with tokens.
   */
  return MultiComboBox.extend('drex.control.DropDownWithTags', {
    metadata: {
      aggregations: {
        _tokensContainer: { type: 'sap.m.HBox', multiple: false }
      },
    },

    init: function () {
      MultiComboBox.prototype.init.apply(this, arguments);
      this.setAggregation('_tokensContainer', new HBox());
    },

    _addToken: function () {
      this.getAggregation('_tokensContainer').insertItem({text: 'test'});
    },

    _handleSelectionLiveChange: function(oControlEvent) {
      this._addToken();
      MultiComboBox.prototype._handleSelectionLiveChange.apply(this, arguments);
    },

    renderer: function (rm, DropDownWithTags) {
      rm.write('<div');
      rm.writeControlData(DropDownWithTags);
      rm.write('>');
      rm.renderControl(DropDownWithTags.getAggregation('_tokensContainer'));
      rm.write('</div>');
    }
  });
});

XML（没有变化，除了名字，这会是个问题吗？）。添加HBox聚合并没有帮助。

<drex:DropDownWithTags
    items="{
            path: 'diseaseList>/allDiseases'
    }"
    selectedKeys="{filterModel>/disease}"
    selectionFinish="onSelectDisease">
    <core:Item key="{diseaseList>id}" text="{diseaseList>Name}"/>
</drex:DropDownWithTags>

知道为什么会这样吗？我看不出我的错误。

Answer 1

有很多方法可以做到这一点。这是一种方式

sap.ui.define([
    'sap/ui/core/Control',
    'sap/ui/core/Item',
    'sap/m/MultiComboBox',
    'sap/m/HBox',
    'sap/m/Text'
    ], function (Control, Item, MultiComboBox, HBox, Text) {
    Control.extend('DropDownWithTags', {
        metadata: {
        aggregations: {
            combo: { type: 'sap.m.MultiComboBox', multiple: false },
            _hbox: { type: 'sap.m.HBox', multiple: false }
        },
        },

        init: function () {
        Control.prototype.init.apply(this, arguments);
        this.setAggregation('_hbox', new HBox({
            items: [
            ]
        }));
        },

        renderer: function (rm, oControl) {
        rm.write('<div');
        rm.writeControlData(oControl);
        rm.write('>');
        rm.write('<div>');
        rm.renderControl(oControl.getAggregation('combo'));
        rm.write('</div>');
        rm.write('<div>');
        rm.renderControl(oControl.getAggregation('_hbox'));
        rm.write('</div>');
        rm.write('</div>');
        },

        onAfterRendering: function() {
        var combo = this.getAggregation('combo')
        var hbox = this.getAggregation('_hbox');
        combo.attachEvent("selectionChange", function() {
            hbox.destroyItems();
            var text = this.getSelectedItems().map(function(item) {
            return item.getText();
            });
            if (text.length > 0) {
            hbox.addItem(new Text({ text: text.join(",")}))
            }
        })
        }
    });

    var combo = new DropDownWithTags({
        combo: new MultiComboBox({
        items: [
            new Item({
            key: "test",
            text: "test"
            }),
            new Item({
            key: "test1",
            text: "test1"
            })
        ]
        })
    });
    combo.placeAt("content")
});

使用 HBox 容器和继承但自定义的事件扩展控件

Extend control with HBox container and inherited but customized event

sapui5