javascript - 使多组合框和项目的尺寸相同

标签 javascript sapui5

我有一个多功能组合盒,里面有元素。目前,组合框和项目的宽度不相等:

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>

但是,没有任何效果。有人能给我建议吗?

最佳答案

其实你可以做到这一点。这就是窍门:MultiComboBox 有一个隐藏的聚合picker,您可以通过函数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>

关于javascript - 使多组合框和项目的尺寸相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45543088/

相关文章:

sapui5 - UI5 VizFrame 单选

javascript - Coffeescript 循环谷歌位置自动完成

javascript - $http 中的 Angular 1 数据绑定(bind) promise 不起作用

javascript - Cube.js 后端错误继续等待问题

javascript - 如何使用 Filter "EQ"方法查找搜索字段的结果?

sap-fiori - SAPUI5中如何自定义Shell容器

javascript - 如何在javascript中只允许输入rh因子

javascript - 在Javascript/D3中,如何将5种颜色(十六进制格式)的色阶映射到17种颜色

sapui5 - 即使从模型更新了控件属性,也未触发控件事件

android - SAPUI5 Android 应用程序 - 资源未加载