J'utilise ExtJS (HTML / CSS) et j'ai une question concernant la mise en page. Exemple:
|--------| | | | | | | | | | | |--------| | | | | |--------|
4 Réponses :
Si je reçois la question correcte - les deux panneaux ne doivent pas avoir de taille fixe à moins qu'ils ne disposent de contenu, auquel cas ils défilent? Généralement, je suggérerais que au moins l'un des panneaux représente le contenu «maître» et a une taille fixe. Sinon, cela devrait fonctionner:
layout:'vbox',
layoutConfig: {
align : 'stretch',
pack : 'start',
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', flex:2}
]
Je ne peux pas avoir ni le premier, ni le second à être réparé. (Je pourrais vous échapper avec le second pour être réparé comme une solution temporaire, cependant.) Cependant, cela permettra à la première d'utiliser n'importe quel espace qu'il reste, et le second à utiliser quels sont les espaces qu'il a besoin. (J'interpréte le flex que le panneau 1 obtiendra 33% et le panneau 2 obtiendra 67% de l'espace?)
Il y a un peu une question logique ici, "la seconde à utiliser n'importe quel espace dont il a besoin." Peut potentiellement signifier Panneau 1 est complètement minimisé / écrasé - si sûrement que vous souhaitez corriger une hauteur maximale pour le panneau 2 pour éviter cela?
Probablement, mais ce n'est pas le gros problème en ce moment. (Cependant, dans le cas où il importe la solution, je préférerais probablement si elles obtiennent tous les deux ce qu'ils veulent, puis le conteneur pour eux ajoutez une barre de défilement.
Ce n'est pas un problème facile à résoudre. Par votre description du panneau de problèmes 2 doit avoir Le meilleur que je puisse arriver, c'est le faire manuellement sur une minuterie:
AutoHeight: true , mais il n'y a aucun moyen de dire au navigateur ou à la taille automatique de la taille supérieure en fonction de celle-ci.
config x: 0, y: 0, ancreur: "100% 100%", autoscroll: true
AutoHeight: true avec Custom Style: "Top: auto; bas: 0"
HM, semble que la solution sera quelque chose comme ça. (C'est quelque chose comme ça que j'ai mis en œuvre, mais sans la minuterie, j'essaie plutôt de relancer quand je pense que quelque chose aurait peut-être eu lieu.) De toute façon, j'accepte votre réponse depuis que vous avez la même conclusion que moi: )
Il peut y avoir un moyen plus facile. Dans EXTJS 4 (je n'ai pas été testé dans 3 mais cela pourrait fonctionner) lorsque vous utilisez la mise en page Donc, pour votre exemple, le panneau supérieur aurait un maintenant le panneau inférieur prendrai La hauteur des composants enfants et le panneau supérieur prendront la hauteur disponible restante. flex de 0 ou non défini Le gestionnaire de mise en page ne réglera pas la hauteur de cet élément. flex de 1 < / code> et le panneau inférieur aurait un flex de 0 :
Vous pouvez également utiliser un truc de CSS (champ CSS 'Max-hauteur') au lieu des champs extjs «Mise en page» et «Flex». Pour cela, ajoutez simplement les lignes suivantes à l'élément qui doit être défilable: testé avec EXTJS 3.4.0.
La première chose qui apparaît dans mon esprit est la configuration vibox à l'aide de l'option flex sur le panneau supérieur.
Je ne pense pas que cela va travailler (j'ai déjà examiné cela) car la documentation indique: chaque élément enfant avec une propriété flex sera flexible verticalement en fonction de la valeur flexue relative de chaque élément par rapport à la somme de tous les articles avec un Valeur Flex spécifiée. Tous les éléments enfants qui ont soit une flex = 0 ou flex = non défini ne seront pas "fléchis" (la taille initiale ne sera pas modifiée).
Quelle version de EXT JS utilisez-vous?
J'utilise ExtJs 3, je pense, mais il y a plus d'il y a deux ans, j'ai écrit cette question donc je ne suis pas sûr