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

其想法是在MultimboBox控件下有一个HBox容器，将选定的令牌推送到该容器中。我学习了不同的教程，但都没有成功。现在简单地显示了一个多mbobox

这个想法：

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

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>');
    }
  });
});

sap.ui.define([
“sap/m/Multimbobox”，
“sap/m/HBox”
]，功能（多芯盒，HBox）{
"严格使用",；
/**
*新的带标记的多mbobox的构造函数。
*/
返回MultiComboBox.extend（'drex.control.DropDownWithTags'{
元数据：{
聚合：{
_令牌容器：{type:'sap.m.HBox'，multiple:false}
},
},
init：函数（）{
MultiComboBox.prototype.init.apply（这是参数）；
这个.setAggregation（“'u tokenscocontainer'，new HBox（））；
},
_addToken:函数（）{
this.getAggregation（“'u tokenscocontainer'）.insertItem（{text:'test'}）；
},
_handleSelectionLiveChange:函数（oControlEvent）{
这个。_addToken（）；
MultiComboBox.prototype.\u handleSelectionLiveChange.apply（这是参数）；
},
渲染器：函数（rm、DropDownWithTags）{
rm.write（“”）；
rm.renderControl（DropDownWithTags.getAggregation（“令牌容器”）；
rm.write（“”）；
}
});
});

XML（除了名称之外，没有任何更改，这可能是个问题吗？）。将HBox聚合添加到它没有帮助

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

---

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

有很多方法可以做到这一点。这里有一条路

sap.ui.define([
“sap/ui/core/Control”，
“sap/ui/core/Item”，
“sap/m/Multimbobox”，
“sap/m/HBox”，
“sap/m/Text”
]，功能（控件、项、多字符框、HBox、文本）{
Control.extend（'DropDownWithTags'{
元数据：{
聚合：{
组合：{type:'sap.m.MultiComboBox'，multiple:false}，
_hbox:{type:'sap.m.hbox'，multiple:false}
},
},
init：函数（）{
Control.prototype.init.apply（这是参数）；
此.setAggregation（“U hbox”），新hbox({
项目：[
]
}));
},
渲染器：函数（rm、oControl）{
rm.write（“”）；
rm.write（“”）；
rm.renderControl（oControl.getAggregation（'combo'）；
rm.write（“”）；
rm.write（“”）；
rm.renderControl（oControl.getAggregation（“uhbox”）；
rm.write（“”）；
rm.write（“”）；
},
onAfterRendering:函数（）{
var combo=this.getAggregation（'combo'）
var hbox=this.getAggregation（“u hbox”）；
combo.attachEvent（“selectionChange”，function（））{
hbox.destroyItems（）；
var text=this.getSelectedItems（）.map（函数（项）{
return item.getText（）；
});
如果（text.length>0）{
addItem（新文本（{Text:Text.join（“，”）}））
}
})
}
});
var combo=新的DropDownWithTags({
组合：新的多mbobox({
项目：[
新项目({
键：“测试”，
文本：“测试”
}),
新项目({
密钥：“test1”，
文本：“test1”
})
]
})
});
combo.placeAt（“内容”）
});