问题

I have sap.m.Panel and I want to enable expand / collapse where the user click on the header. But this event only fires when the user clicks on the arrow.

Any idea of how to solve it?

This is my code:

var panel = new Panel(); // Panel required from "sap/m/Panel"
panel.setExpandable(true);
panel.setHeaderText("someText");

回答1:

We had the similar requirement and we made it to work with following logic: 1. Add a headerToolbar to Panel. 2. Attach click event on the headerToolbar. 3. onClickHandler check if the Panel is already expanded. If yes, collpase or expand the panel.

Below is the code. Let me know if this helps:

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 ( did it in 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.
      });

回答2:

UI5 ≥ 1.79

Since 1.79, the entire header of sap.m.Panel is clickable by default.¹

UI5 1.78 and below

Add a headerToolbar and set its active property to true. On press, toggle the expanded property value with 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>

¹ Commit: d8741f3

来源：https://stackoverflow.com/questions/44128395/sap-m-panel-make-entire-header-clickable

标签

javascript

sapui5

sap.m.Panel: make entire header clickable

问题

回答1:

回答2:

UI5 ≥ 1.79

UI5 1.78 and below