Extjs Dynamisch Verpackung Elemente in einem container

Warum ist das so schwer? Ich habe einen container, layout -:'hbox', und eine Sammlung von Schaltflächen, die in es. Das problem ist, dass die Tasten weiterhin über den rechten Grenzen des Containers. Was sind die best-practice-Methoden der Verpackung Inhalt in einen container? Sollte ich einfach float:"left" mein Kind-Elemente? Ich kann mit festen breiten überall, meine Website nicht skalieren horizontal.

InformationsquelleAutor Gallen | 2012-08-31
  1. 14

    Dem richtigen Weg, das zu tun, was ich suchte, war hier zu verwenden layout:'column' die behandeln Ihre Kinder wie floating divs.

    • Dies war äußerst hilfreich für meine Konfiguration, wo ich eine vbox layout mit Elementen in einem container. Einstellung der container, ein-Spalten-layout erlaubt für die Verpackung, die ich brauchte.
    • Ich habe Stunden damit verbracht, auf der Suche nach dieser Lösung. Danke!!!
    InformationsquelleAutor Gallen
  2. 5

    hbox layout ist nicht das richtige layout, wenn Inhalt zu überlauf in die nächste "Reihe". Hbox richtet und vertreibt Komponenten für eine Feste Breite in einer einzigen Zeile.
    Besser stick mit der 'auto' - layout (das ist der Standard) und damit der browser die Kontrolle der überlauf per CSS-float (wie bereits erwähnt).

    Alternativ können Sie Ext.toolbar.Toolbar#enableOverflow - siehe docs

    Konfigurieren wahr, um der Symbolleiste eine Schaltfläche, die aktiviert ein dropdown-Menü, um Elemente, die überlauf der Symbolleiste Breite.

    InformationsquelleAutor mistaecko
  3. 0

    Wenn es geht, zu helfen; ich verließ layout standardmäßig als auto und verwendet zusätzliche CSS zu erreichen wrap Ansatz innerhalb responsive Nutzung;

    Einige nested-children-Container Rendern in foocontainer dynamisch. So ganz mit responsive UI in 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;
}
    InformationsquelleAutor Nuri Engin
Schreibe einen Kommentar