Extjs Envelopper dynamiquement des éléments dans un conteneur

Question

Pourquoi est-ce si difficile? J'ai un conteneur, layout:'hbox', et une collection de boutons dedans. Le problème est que les boutons dépassent les limites droites du conteneur. Quelles sont les meilleures méthodes pratiques d'emballage du contenu à l'intérieur d'un conteneur? Dois-je simplement flotter à gauche mes éléments enfants? Je peux utiliser des largeurs fixes partout, mon site ne se redimensionne pas horizontalement.

Answer 1

La bonne manière de faire ce que je cherchais ici était d'utiliser layout:'column' qui traiterait ses enfants comme des divs flottants.

Answer 2

La disposition de hbox n'est pas la disposition appropriée si vous voulez que le contenu déborde sur la 'ligne' suivante. Hbox aligne et distribue les composants sur une largeur fixe dans une seule ligne. Il vaut mieux rester avec la disposition 'auto' (qui est par défaut) et permettre au navigateur de contrôler le débordement via CSS float (comme vous l'avez mentionné).

Alternativement, vous pourriez utiliser Ext.toolbar.Toolbar#enableOverflow - voir la documentation

Configurer true pour faire en sorte que la barre d'outils fournisse un bouton qui active un menu déroulant pour afficher les éléments qui débordent de la largeur de la barre d'outils.

Answer 3

Si cela peut aider; j'ai laissé layout par défaut en auto et j'ai utilisé du CSS supplémentaire pour obtenir une approche de wrap dans une utilisation responsive;

Certains conteneurs enfants imbriqués sont rendus dans foocontainer dynamiquement. Donc, ayant une UI responsive complètement via CSS.

.foocontainer > div[data-ref="outerCt"] > div[data-ref="innerCt"] {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex!important;
  flex-wrap: wrap!important;
}