2017-01-15 21 views
0

Можно ли добавить событие в SAPUI5 sap.ui.commons.Panel's свести к минимуму и максимизировать? Мне нужно добавить другой стиль при нажатии кнопки Collapse или expand-Button.SAPUI5 Panel Collapse/Expanded

Если пользователь нажимает на минус-символ я должен добавить styleclass как pnl.addStyleClass("XYZ");, когда пользователь нажимает на «увеличить» другой styleclass должны быть добавлены к панели pnl.addStyleClass("ZYFDEFD");

если я перезаписать .setCollapse- или .setExpanded-function панель больше не разваливается и не расширяется, поэтому нужно найти что-то еще.

ответ

1

Несколько возможных вариантов ...

1) Вы можете сделать использование, которое добавляется к элементу управления в зависимости от расширенного состояния стандартного класса стиля (sapUiPanelColl) - см пример ниже ...

var oPanel = new sap.ui.commons.Panel({}); 
 
oPanel.addStyleClass("myPanel"); 
 
oPanel.placeAt("content");
.myPanel { background-color: green; } 
 
.myPanel.sapUiPanelColl { background-color: red; }
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>sap.ui.commons.Panel style class example</title> 
 
</head> 
 
<body id="content"> 
 
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons"></script> 
 

 
</body> 
 
</html>

2) с другой стороны, если это не необходимо использовать панель из библиотеки можно свободного городского переключиться на sap.m.Panel (как sap.ui.commons.Panel является отд после версии 1.38), а затем использовать expand event