Question

我尝试使用加号和减号按钮为数量构建输入字段。更喜欢了解复合控件是如何工作的。我找到了this documentation。

我以为我可以像这样使用新控件：

new ex.perimental.Input({
  width: "14em",
  editable: true,
  input: new sap.m.Input({
      width: "8em",
      value: {
          path: "model>Quantity",
          type: new sap.ui.model.type.Integer({}, {
            minimum:0
          })    
      },
      description: "{model>Unit}"
  }),
})

控制代码如下所示：

sap.ui.define([
  "sap/ui/core/Control",
  "sap/m/Button",
  "sap/m/Input"
], function(Control, Button, Input) {
  "use strict";

  return Control.extend("ex.perimental.Input", {
    metadata: {
      properties: {
        width: {
          type: "string",
          defaultValue: "14em",
        },
        editable: {
          type: "boolean",
          defaultValue: false,
        },
      },
      aggregations: {
        _increaseButton: {
          type: "sap.m.Button",
          multiple: false,
          visibility: "hidden",
        },
        _decreaseButton: {
          type: "sap.m.Button",
          multiple: false,
          visibility: "hidden",
        },
        input: { type: "sap.m.Input", multiple: false },
        _hBox: { type: "sap.m.HBox", multiple: false, visibility: "hidden" },
      },
      events: {
        increase: {},
        decrease: {},
      },
    },

    _onDecrease: function(oEvent) {
      var oResourceBundle = this.getModel("i18n").getResourceBundle();
      var oldValue = this.getAggregation("input").getValue();
      var newValue = 0;
      if (!isNaN(Number(oldValue))) {
        newValue = Number(oldValue) - 1;
      }
      oInput.setValue(newValue);
      this.fireEvent("decrease", {
        oldValue: oldValue,
        newValue: newValue,
      });
    },

    _onIncrease: function(oEvent) {
      var oResourceBundle = this.getModel("i18n").getResourceBundle();
      var oldValue = this.getAggregation("input").getValue();
      var newValue = 0;
      if (!isNaN(Number(oldValue))) {
        newValue = Number(oldValue) + 1;
      }
      oInput.setValue(newValue);
      this.fireEvent("increase", {
        oldValue: oldValue,
        newValue: newValue,
      });
    },

    init: function() {
      this.setAggregation(
        "_decreaseButton",
        new Button({
          icon: "sap-icon://sys-minus",
          press: this._onDecrease.bind(this),
        })
      );
      this.setAggregation(
        "_increaseButton",
        new Button({
          icon: "sap-icon://sys-add",
          press: this._onIncrease.bind(this),
        })
      );
      this.setAggregation(
        "_hBox",
        new sap.m.HBox({
          items: [
            this.getAggregation("_decreaseButton"),
            this.getAggregation("_increaseButton"),
          ],
        })
      );
    },

    setEditable: function(sValue) {
      debugger;
      // aggregations will be null now
      // I assume because they are reused in the HBox control
      //    this.getAggregation("_increaseButton").setEditable(sValue);
      //    this.getAggregation("_decreaseButton").setEditable(sValue);
      //    this.getAggregation("input").setEditable(sValue);
    },

    setWidth: function(sValue) {
      this.getAggregation("_hBox").setWidth(sValue);
    },

    setInput: function(oInput) {
      this.setAggregation("input", oInput);
      var oHBox = this.getAggregation("_hBox");
      oHBox.insertItem(oInput, 1);
    },

    renderer: function(oRenderManager, oControl) {
      oRenderManager.write("<div");
      oRenderManager.writeControlData(oControl);
      oRenderManager.addClass("myStyle");
      oRenderManager.writeClasses();
      oRenderManager.write(">");
      oRenderManager.renderControl(oControl.getAggregation("_hBox"));
      oRenderManager.write("</div>");
    }

  });
});

它将被渲染，但setEditable无效。无法通过getAggregation访问按钮（在HBox控件内部再次使用）。此外，无法访问输入字段（从外部设置）。

不确定如何正确行事。有人有想法吗？

EDIT2

这是最新版本，但仍无效。我问我如何将外部定义的输入控件放在内部Hbox控件内的正确位置，并能够在setEditable等方法中访问此控件？

sap.ui.define([
  "sap/ui/core/Control",
  "sap/m/Button",
  "sap/m/Input"
], function(Control, Button, Input) {
  "use strict";

  return Control.extend("ex.perimental.Input", {
    metadata: {
      properties: {
        width: {
          type: "string",
          defaultValue: "14em",
        },
        editable: {
          type: "boolean",
          defaultValue: false,
        },
      },
      aggregations: {
        _hBox: { type: "sap.m.HBox", multiple: false, visibility: "hidden" },
      },
      associations: {
        input: { type: "sap.m.Input", multiple: false, singularName: "input" },
      },
      events: {
        increase: {},
        decrease: {},
      },
    },

    _onDecrease: function(oEvent) {
      var oResourceBundle = this.getModel("i18n").getResourceBundle();
      var oldValue = this._input.getValue();
      var newValue = 0;
      if (!isNaN(Number(oldValue))) {
        newValue = Number(oldValue) - 1;
      }
      this._input.setValue(newValue);
      this.fireEvent("decrease", {
        oldValue: oldValue,
        newValue: newValue,
      });
    },

    _onIncrease: function(oEvent) {
      var oResourceBundle = this.getModel("i18n").getResourceBundle();
      var oldValue = this._input.getValue();
      var newValue = 0;
      if (!isNaN(Number(oldValue))) {
        newValue = Number(oldValue) + 1;
      }
      this._input.setValue(newValue);
      this.fireEvent("increase", {
        oldValue: oldValue,
        newValue: newValue,
      });
    },

    init: function() {
      this._decreaseButton = new Button({
        icon: "sap-icon://sys-minus",
        press: this._onDecrease.bind(this),
      });
      this._increaseButton = new Button({
        icon: "sap-icon://sys-add",
        press: this._onIncrease.bind(this),
      });
      this.setAggregation(
        "_hBox",
        new sap.m.HBox({
          items: [
            this._decreaseButton,
            this.getAssociation("input"),
            this._increaseButton,
          ],
        })
      );
    },

    setEditable: function(sValue) {
      var bEditable = false;
      if (sValue === true) {
        bEditable = true;
      }
      this._decreaseButton.setEnabled(bEditable);
      this._increaseButton.setEnabled(bEditable);
      // seems not always working
      this._input.setEditable(bEditable);
    },

    setWidth: function(sValue) {
      this.getAggregation("_hBox").setWidth(sValue);
    },

    setInput: function(oInput) {
      this.setAssociation("input", oInput);
      this._input = oInput;
      var oHBox = this.getAggregation("_hBox");
      oHBox.insertItem(oInput, 1);
    },

    renderer: function(oRenderManager, oControl) {
      oRenderManager.write("<div");
      oRenderManager.writeControlData(oControl);
      oRenderManager.addClass("myStyle");
      oRenderManager.writeClasses();
      oRenderManager.write(">");
      oRenderManager.renderControl(oControl.getAggregation("_hBox"));
      oRenderManager.write("</div>");
    }

  });
});

我仍然有关联处理问题（更新代码）我想处理关联应该做的不同？有时输入字段仍为null。

Answer 1

控件一次只能由一个控件聚合。这是关联（控制可能同时处于多个）和聚合之间的差异。

你在init中可以做的是：

this._decreaseButton = new Button (...)

基本上你只需要一个HBox聚合。如果您的按钮随后由HBox汇总，他们将知道父母的模型并被销毁。

您唯一需要检查Root控件是否为创建控件的祖先（使用myControl.getParent（））。

最好的问候，托拜厄斯

如何建立数量加/减复合控制？

EDIT2

1 个答案: