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

问题描述

这个想法是在 MultiComboBox 控件下有一个 HBox 容器，选定的令牌将被推送到该容器.我遵循了不同的教程，但没有成功.现在只显示了一个 multiComboBox.

想法:

自定义控件的简化(测试)实现:

sap.ui.define(['sap/m/MultiComboBox','sap/m/HBox'], 函数 (MultiComboBox, HBox) {'使用严格';/*** 带有令牌的新 MultiCombobox 的构造函数.*/返回 MultiComboBox.extend('drex.control.DropDownWithTags', {元数据:{聚合:{_tokensContainer: { type: 'sap.m.HBox', multiple: false }},},初始化:函数(){MultiComboBox.prototype.init.apply(this, arguments);this.setAggregation('_tokensContainer', new HBox());},_addToken: 函数 () {this.getAggregation('_tokensContainer').insertItem({text: 'test'});},_handleSelectionLiveChange:函数(oControlEvent){this._addToken();MultiComboBox.prototype._handleSelectionLiveChange.apply(this, arguments);},渲染器:函数(rm，DropDownWithTags){rm.write('<div');rm.writeControlData(DropDownWithTags);rm.write('>');rm.renderControl(DropDownWithTags.getAggregation('_tokensContainer'));rm.write('</div>');}});});

XML(除了名称没有变化，这会不会有问题?).向其添加 HBox 聚合没有帮助.

/所有疾病'}"selectedKeys="{filterModel>/disease}"selectionFinish="onSelectDisease"><core:Item key="{diseaseList>id}" text="{diseaseList>Name}"/></drex:DropDownWithTags>

知道为什么会这样吗?我看不到我的错误.

解决方案

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

sap.ui.define(['sap/ui/core/控制','sap/ui/core/item','sap/m/MultiComboBox','sap/m/HBox','汁液/米/文本']、函数(控件、项目、MultiComboBox、HBox、文本){Control.extend('DropDownWithTags', {元数据:{聚合:{组合:{ 类型:'sap.m.MultiComboBox'，多个:假}，_hbox: { type: 'sap.m.HBox', multiple: false }},},初始化:函数(){Control.prototype.init.apply(this, arguments);this.setAggregation('_hbox', new HBox({项目: []}));},渲染器:函数(rm，oControl){rm.write('<div');rm.writeControlData(oControl);rm.write('>');rm.write('
');rm.renderControl(oControl.getAggregation('combo'));rm.write('</div>');rm.write('
');rm.renderControl(oControl.getAggregation('_hbox'));rm.write('</div>');rm.write('</div>');},onAfterRendering:函数(){var 组合 = this.getAggregation('组合')var hbox = this.getAggregation('_hbox');combo.attachEvent("selectionChange", function() {hbox.destroyItems();var text = this.getSelectedItems().map(function(item) {返回 item.getText();});如果(文本长度> 0){hbox.addItem(new Text({ text: text.join(",")}))}})}});var 组合 = new DropDownWithTags({组合:新的 MultiComboBox({项目: [新物品({关键测试"，文字:测试"}),新物品({键:测试1"，文本:测试1"})]})});组合.placeAt("内容")});

The idea is to have a HBox container under the MultiComboBox control to which selected tokens will be pushed. I have followed different tutorials and couldn't get a success. A multiComboBox is simply now shown.

The idea:

Simplified (testing) implementation of custom control:

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 (no change, except for a name, could that be a problem?). Adding HBox aggregation to it does not help.

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

Any idea why it happens ? I cannot see my mistake.

解决方案

there are many ways to do this. here is one way

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 容器和继承但自定义的事件扩展控制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！