Question

我有一个多功能盒，里面有物品。目前，组合框和项目的宽度不相等：

current version

我想让两个元素的宽度相同，如下所示：

this

我曾尝试过

<MultiComboBox width="auto">
<items>
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>

也是这个

<MultiComboBox width="100%">
<items>
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>

和这个

<MultiComboBox>
<items width="100%">
<core:Item key="ac" text="ac"/>
</items>
</MultiComboBox>

然而，没有任何工作。有人能建议我吗？

Answer 1

实际上你可以这样做。这就是诀窍：MultiComboBox有一个隐藏的聚合选择器，你可以通过函数 getPicker 获得。它返回一个sap.m.Popover实例，该实例又有2个属性（contentWidth和contentMinWidth），甚至还有beforeOpen。诀窍是在beforeOpen事件中设置contentWidth或contentMinWidth。

参见代码：

<!DOCTYPE html>
<html>
	<head>
		<meta name="description" content="UI5 table example with local JSON model" />
	<meta http-equiv='X-UA-Compatible' content='IE=edge' />
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
	
	<title>UI5 Table Example</title>
	
	<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
	<script id='sap-ui-bootstrap' type='text/javascript'
		src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
		data-sap-ui-theme='sap_bluecrystal'
		data-sap-ui-libs='sap.m,sap.ui.core'></script>

		<script>
          var oModel = new sap.ui.model.json.JSONModel([
            { key: "0", text: "First item text"},
            { key: "1", text: "Second item text"},
            { key: "2", text: "Third item text"},
            { key: "3", text: "Fourth item text"},
            { key: "4", text: "Fifth item text"},
            { key: "5", text: "Sixth item text"},
            { key: "6", text: "Seventh item text"},
          ]);
          
          var  oSelect = new sap.m.MultiComboBox("testSelect", {
            width: "15rem",
            items: { 
                      path: 'items>/', 
                      templateShareable: false, 
                      template: new sap.ui.core.Item({ key: '{items>key}', text: '{items>text}'})
                   }
          });
          
          oSelect.setModel(oModel, "items");
          
          // The trick - setting of contentWidth or contentMinWidth of Combobox Dropdown list
          
          var oPicker = oSelect.getPicker();
          if (oPicker) {
            oPicker.attachBeforeOpen(function() {
              // oPicker.setContentWidth(oSelect.getWidth()); // Item texts can be cut
              oPicker.setContentMinWidth(oSelect.getWidth());
            });
          } else {
            console.error("Picker is empty");
          }
          
          oSelect.placeAt("content");
		</script>
	</head>
	<body class="sapUiBody" id="content">
	</body>
</html>

制作多尺寸框和相同项目的大小

1 个答案: