Как сделать динамику высоты Dijit Accordionpane

Question

Я не могу понять, как сказать аккордеонному контейнеру установить высоту его панели аккордеона в автоматический режим, чтобы высота панели была динамичной в зависимости от ее содержимого.

В следующем коде я добавляю две панели к аккордеонному контейнеру. Один имеет высоту 10px, а другой - 90px, но в обоих случаях высота панели гармошки рассчитывается до 10px. Похоже, он всегда принимает высоту первого.

var accordionContainer = new dijit.layout.AccordionContainer({'id':'accContainer'}).placeAt("test");
var accordPane = new dijit.layout.ContentPane({"title": "test", "content":"<div style='height:10px'>sdfsdfsdf</div&gt;"});
var accordPane2 = new dijit.layout.ContentPane({"title": "test1", "content":"<div style='height:90px'>sdfsdfsdf</div>"});

accordionContainer.addChild(accordPane);
accordionContainer.addChild(accordPane2, 1);
accordPane.startup();
accordPane2.startup();
accordionContainer.startup();
accordionContainer.selectChild(accordPane2);

Я использую додзё 1.3.2

Answer 1

Я переопределил функцию _getTargetHeight в dijit.layout.AccordionContainer и всегда возвращаю 'auto' для высоты. Анимация скольжения не будет работать правильно, но это не так заметно.

_getTargetHeight: function(/* Node */ node){
// summary:
//For the given node, returns the height that should be
//set to achieve our vertical space (subtract any padding
//we may have).
//This is used by the animations.

//var cs = dojo.getComputedStyle(node);
//return Math.max(this._verticalSpace - dojo._getPadBorderExtents(node, cs).h, 0);
return 'auto';
}

Answer 2

В настоящее время это невозможно. Я написал блог / пример кода, чтобы объяснить, почему и как генерировать группу TitlePane, которые расширяются до их естественной высоты (а не высоты контейнера для AccordionContainer):

http://www.sitepen.com/blog/2008/10/21/quick-fixes-and-dojo-support/

Это требует создания одного виджета TitleGroup (custom, код в блоге) и размещения внутри TitlePane. Каждый ведет себя в основном как AccordionPane (с атрибутами title="", возможностями загрузки href="" и т. Д.) И делегирует щелчки по заголовкам для управления открытым / закрытым состоянием братьев и сестер.

Answer 3

Попробуйте установить размеры в самом аккордеонном контейнере на размер, который достаточно велик, чтобы вместить ваш контент плюс необходимые области заголовка, например

#accContainer{
  height: 120px;
  width: 200px;
}

Вызов запуска () для контейнера должен запустить дочерние панели для вас.

Answer 4

Теперь вы также можете просто использовать dijit.TitlePaneбез контейнера вообще. Вы можете пройти open: false когда вы создаете панели, чтобы закрыть их. Я думаю, заключив их в dojox.widget.TitleGroup будет эмулировать поведение наличия 1 открытого за раз.