为什么byId找不到控件？

Question

我试图通过sap.m.Input调用获得byId控件，如下所示：

​

​

如你所见，我打电话：

this.byId("CharInput-001-ZPM_TEST_01-ZPM_TEST_5")

使用正确的id并获取未定义的。我做错了什么？

提示： id是在运行时自动生成的，这意味着，我单击一个按钮，sap.m.Input字段将自动生成，并放置在SimpleForm控件中。

​

​

通过使用SimpleForm id调用，可以找到该控件：

​

​

碎片：

sap.ui.define([
    "sap/m/Dialog",
    "sap/m/Text",
    "sap/m/Button"
], function (Dialog, Text, Button) {
    "use strict";

    const fnNumList = () => {
        return new sap.m.ObjectListItem({
            number: "{ValueHelp>NumValueFrom}",
            numberUnit: "{ValueHelp>UnitOfMeasurement}"
        });
    };

    const fnCharList = () => {
        return new sap.m.StandardListItem({
            description: "{ValueHelp>CharValue}"
        });
    };

    const fnCurrList = () => {
        return new sap.m.ObjectListItem({
            number: "{ValueHelp>CurrValueFrom}",
            numberUnit: "{ValueHelp>CurrCurrencyFrom}"
        });
    };

    const fnDateList = () => {

        const oDatePicker = new sap.m.DatePicker({
            dateValue: "{ValueHelp>DateValueFrom}",
            valueFormat: "dd-MM-yyyy",
            displayFormat: "dd-MM-yyyy",
            editable: false
        });

        return new sap.m.CustomListItem({
            content: oDatePicker
        });
    };

    const fnTimeList = () => {
        const oTimePicker = new sap.m.TimePicker({
            valueFormat: "HH:mm:ss",
            displayFormat: "HH:mm:ss",
            support2400: true,
            dateValue: "{ValueHelp>TimeValueFrom}",
            editable: false
        });

        return new sap.m.CustomListItem({
            content: oTimePicker
        });
    };

    const fnDetermineListType = (oValueHelp) => {
        switch (oValueHelp.DataType) {
        case "NUM":
            return fnNumList();
        case "DATE":
            return fnDateList();
        case "TIME":
            return fnTimeList;
        case "CURR":
            return fnCurrList();
        default:
            return fnCharList();
        }
    };

    const fnCreateList = (oValueHelp) => {
        const oNewList = new sap.m.List({
            includeItemInSelection: true,
            mode: sap.m.ListMode.SingleSelect
        });

        oNewList.bindItems({
            path: "ValueHelp>/",
            template: fnDetermineListType(oValueHelp)
        });

        return oNewList;
    };

    const fnDestroyDialog = (oDialog) => {
        oDialog.close();
        oDialog.destroy();
    };

    return {

        showSingle: function (aCharsHelpValues, fnGetSelectedObject, sValueHelpField) {
            const oList = fnCreateList(aCharsHelpValues[0]);
            const oDialog = new Dialog({
                title: aCharsHelpValues[0].CharValue,
                content: oList,
                beginButton: new sap.m.Button({
                    text: "OK",
                    press: function () {
                        fnGetSelectedObject(oList.getSelectedItem().getBindingContext("ValueHelp").getObject(), sValueHelpField);
                        fnDestroyDialog(oDialog);
                    }
                }),
                endButton: new sap.m.Button({
                    text: "Close",
                    press: function () {
                        fnDestroyDialog(oDialog);
                    }
                })
            });

            return oDialog;
        }
    };

});

更新输入是用以下方式生成的：

    _buildCharacInputId: function (oData) {
        return "CharInput:" + oData.Classtype + ":" + oData.Classnum + ":" + oData.NameChar;
    },

_determineCtrlForChars: function (oData) {
            const sId = this._buildCharacInputId(oData);
            const self = this;
            switch (oData.DataType) {
            case "CHAR":
                return new sap.m.Input(sId, {
                    maxLength: oData.NumberDigits,
                    type: sap.m.InputType.Text,
                    showValueHelp: oData.WithValues,
                    valueHelpRequest: self._onCharValueHelp.bind(self)
                });
            case "CURR":
                return new sap.m.MaskInput(sId, {
                    mask: oData.Template.replace(/_/g, "9") + (oData.Currency ? " ".concat(oData.Currency) : "")
                });
            case "DATE":
                return new sap.m.DatePicker(sId, {
                    valueFormat: "dd-MM-yyyy",
                    displayFormat: "dd-MM-yyyy"
                });
            case "NUM":
                return new sap.m.MaskInput(sId, {
                    mask: oData.Template.replace(/_/g, "9") + (oData.UnitTExt ? " ".concat(oData.UnitTExt) : "")
                });
            case "TIME":
                return new sap.m.TimePicker(sId, {
                    valueFormat: "HH:mm:ss",
                    displayFormat: "HH:mm:ss",
                    support2400: true
                });
            default:
                throw "Not supported type. Please contact app developer.";
            }
        },

Answer 1

id不是在View作用域中生成的，因此它将没有正确的DOM id。

控制器中的以下代码创建一个类似于CharInput-001-ZPM_TEST_01-ZPM_TEST_5的id

_buildCharacInputId: function (oData) {
    return "CharInput:" + oData.Classtype + ":" + oData.Classnum + ":" + oData.NameChar;
},
//...
const sId = this._buildCharacInputId(oData);

使用createId()将在视图前缀，以便id为__xmlview1--CharInput-001-ZPM_TEST_01-ZPM_TEST_5

//...
const sId = this.createId(this._buildCharacInputId(oData));