UI5≥1.79

Question

我有sap.m.panel，我想扩展/折叠用户点击它的位置。但是，此事件仅在用户单击箭头时触发。

¿任何想法如何解决？

这是我的代码：

var panel = new sap.m.Panel();
panel.setExpandable(true);
panel.addStyleClass("someClass");
panel.setHeaderText("someText");
return panel;

谢谢！

Answer 1

我们有类似的要求，我们使用以下逻辑： 1.向Panel添加headerToolbar。 2.在headerToolbar上附加click事件。 3. onClickHandler检查Panel是否已经展开。如果是，请拼写或展开面板。

以下是代码。如果这有帮助，请告诉我：

XML：

        <Panel 
            expandable='true' expanded='false'>
            <headerToolbar>
                            <Toolbar id='idPanelHeader'>
                                <content>
                                    <Text text='Click Me!' />
                                </content>
                            </Toolbar>
                        </headerToolbar>
            <content>
                <Text text = 'Hey' />
            </content>
        </Panel>

Controller（在OnInit中做过）：

      var oPanelHeader = this.byId('idPanelHeader');
      oPanelHeader.attachBrowserEvent("click", function() {
          this.getParent().setExpanded(!this.getParent().getExpanded());
          // this points to HeaderToolbar and this.getParent will return the Panel.
      });

Answer 2

UI5≥1.79

从1.79开始，默认情况下可以单击sap.m.Panel的整个标题。¹

UI5 1.78及以下

添加headerToolbar并将其active属性设置为true。按下时，用expanded切换panel.setExpanded(!panel.getExpanded())属性值：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/m/Panel",
  "sap/m/Toolbar",
  "sap/m/Title",
  "sap/m/Text",
], (Panel, Toolbar, Title, Text) => {

  const panel = new Panel({
    expandable: true,
    headerToolbar: new Toolbar({
      active: true,
      content: new Title({ text: "Panel Header" }),
      press: () => panel.setExpanded(!panel.getExpanded()),
    }),
    content: new Text({ text: "Panel content" }),
  }).placeAt("content");

}));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>

¹提交：d8741f3

Sapui5面板可点击区域

2 个答案:

UI5≥1.79

UI5 1.78及以下