Como fazer altura de uma dinâmica de acordeão de dijit

Question

Não consigo descobrir como dizer ao acordeão para definir a altura de seu painel de acordeão como automático, para que a altura do painel seja dinâmica, dependendo do seu conteúdo.

No código a seguir, estou adicionando dois painéis a um acordeão. Um tem altura de 10px e outro tem 90px, mas em ambos os casos a altura do painel de acordeão é calculada a 10px. Parece que está sempre pegando a altura do primeiro.

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);

Estou usando dojo 1.3.2

Answer 1

Eu substituo a função _GetTargetHeight de dijit.layout.accordioncontainer e sempre retorno 'Auto' para altura. A animação de painéis deslizantes não funcionará corretamente, mas não é tão perceptível.

_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

Atualmente não é possível. Eu escrevi um blog / código de amostra para explicar o porquê e como gerar um grupo de titlepane que se expandem para sua altura natural (em vez da altura do contêiner para o acordeão):

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

Requer fazer um único widget de grupo de título (personalizado, código no blog) e colocar o titlePane no interior. Cada um se comporta principalmente como um acordeionpane (com atributos title = "", href = "" Recursos de carregamento, etc.) e delega os cliques de título para gerenciar o estado de irmãos abertos/fechados.

Answer 3

Tente definir as dimensões no próprio recipiente de acordeão para um tamanho grande o suficiente para manter seu conteúdo, além dos painéis de título necessário, por exemplo,

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

A chamada startup () no contêiner deve iniciar os painéis filhos para você.

Answer 4

Agora você também pode usar apenas dijit.TitlePanes sem recipiente. Você pode passar open: false Quando você instancia os painéis para iniciá -los fechados. Eu acho que envolvendo -os em um dojox.widget.TitleGroup imitará o comportamento de ter 1 aberto por vez.