ExtJS - Fill und Auto-Höhe

Ich bin mit ExtJS (html/css) und ich habe eine Frage bezüglich Layout. Beispiel:

|--------|
|        |
|        |
|        |
|        |
|        |
|--------|
|        |
|        |
|--------|

Die kombinierte Höhe (Sie müssen nicht alle padding, margin etc.) ist 100% seines übergeordneten container. Vorzugsweise ist es zwei Platten irgendwie auf einander gestapelt.

Das problem ist, dass ich nicht wissen, die Höhe weder die Oberseite noch die Unterseite (es ist nicht Fix und kann sich ändern, da der Inhalt innerhalb der Platten ändern kann, es ist zwei Menüs.) Ich brauche die top panel zu füllen aus den verbleibenden Platz, oder haben eine Bildlaufleiste, wenn nötig.

Es ist nicht so wichtig, dass die Lösung ist pure ExtJS, es ist nur, dass der container für die zwei Platten ist ein ExtJS panel, den Inhalt der beiden Platten im inneren ist plain html-angetrieben von javascript.

Hat jemand eine Ahnung, wo zu beginnen?

Bearbeiten

Ich denke ein Teil des Problems ist das fehlen der "resize" - event. Ich denke, ich kann sofort mit einigen semi-dynamische/statische Lösung und versuchen, berechnen die Höhe der unteren Platte

Das erste, was, das erscheint in meinem Kopf ist die vbox layout verwenden flex option auf der Oberseite.
Ich denke nicht, dass das funktionieren wird (ich hab schon mal angeschaut), da die Dokumentation sagt: Jedes Kind-Element mit einem flex-Eigenschaft wird gebeugt werden senkrecht gemäß der jedes Element die relative flex-Wert im Vergleich zu der Summe aller Elemente mit einem flex-Wert angegeben. Keine Kind-Elemente, die entweder eine flex = 0 oder flex = undefined wird nicht "gebeugt" (die ursprüngliche Größe nicht verändert werden).
Welche version von Ext JS verwenden Sie?
Ich als mit ExtJS 3 glaube ich, aber es ist mehr als vor zwei Jahren schrieb ich diese Frage, also bin ich nicht sicher

InformationsquelleAutor Onkelborg | 2010-10-27

2

Dies ist nicht ein einfaches problem zu lösen. Durch Ihre Beschreibung des Problems Panel 2 müssen autoHeight: true, aber es gibt keine Möglichkeit zu sagen, der browser oder Extern, um automatisch die Größe der Oberseite nach, dass.

Die besten, die ich mit oben kommen kann ist, es zu tun manuell auf einen timer:
- Erstellen Sie einen outer-container für die beiden Platten mit einem absoluten layout, Feste Höhe. Anwenden einer benutzerdefinierten "position: relative" Stil.
- Panel 1 hat config x: 0, y: 0, anchor: "100% 100%", autoScroll: true
- Panel 2 ist autoHeight: true mit benutzerdefinierten style: "top: auto; bottom: 0"
- Ausführen einer Aufgabe auf ein Intervall von 1 sec oder so, das überprüft die Höhe der Platte 2, und ordnet, dass die Höhe zu einem padding-bottom-style auf Panel 1
- Hm, scheint, wie die Lösung sein wird, so etwas wie dieses. (Es ist so etwas wie dies habe ich umgesetzt, aber ohne timer, stattdessen versuche ich zu relayout, wenn ich denke, dass etwas hätte geschehen können.) Ich bin jedenfalls akzeptieren Sie Ihre Antwort, da hast du zu dem gleichen Schluss kommen wie ich 🙂
- autoHeight:true, mein problem gelöst. Dank
InformationsquelleAutor divestoclimb

Möglicherweise gibt es einen einfacheren Weg. In ExtJS 4 (ich habe nicht getestet in 3, aber es könnte funktionieren, wenn der vbox layout, wenn ein Kind-Element hat ein flex von 0 oder undefined die layout-manager passen Sie die Höhe des Elements.

Also für dein Beispiel, das top-panel hätte flex von 1 und die Bodenplatte hätte flex von 0:

Ext.create("widget.panel", {
  renderTo: Ext.getBody(),
  height: 300, width: 400,
  layout: { type: 'vbox', pack: 'start', align: 'stretch' },
  items: [{
    //our top panel
    xtype: 'container', 
    flex: 1,             //take remaining available vert space
    layout: 'fit', 
    autoScroll: true, 
    items: [{ 
      xtype: 'component', 
      //some long html to demonstrate scrolling
      html: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
    }] 
  },{ 
    //our bottom panel
    xtype: 'container', 
    flex: 0,             //dont change height of component (i.e. let children dictate size.)
    items: [{ 
      xtype: 'button', 
      height: 200, 
      text: 'Hello World'
    }]
  }]
});

Nun die Bodenplatte wird einfach die Höhe jedes untergeordneten Komponenten und die Obere Abdeckung wird die noch verfügbare Höhe.

InformationsquelleAutor Andy

3

Wenn ich die Frage richtig - die beiden Platten sollten nicht eine Feste Größe haben, es sei denn, Sie haben Inhalt, in dem Fall, dass Sie scrollen? In der Regel würde ich vorschlagen, dass mindestens eine der Platten steht für 'master' - Inhalte und hat eine Feste Größe. Ansonsten sollte diese Arbeit:
```
layout:'vbox',
layoutConfig: {
    align : 'stretch',
    pack  : 'start',
},
items: [
    {html:'panel 1', flex:1},
    {html:'panel 2', flex:2}
]
```
Einfach zu geben, dass die config auf 'Betrieb' - element und dann die setup-Platte 1' und 'Tafel 2' wie Sie sehen, passen (d.h. ersetzen Sie " {html:'Fenster 1' flex:1} " mit dem Namen der Komponente)
- Ich kann es nicht haben, weder die erste, noch die zweite, behoben werden. (Ich könnte Weg mit dem zweiten behoben werden, wie eine temporäre Lösung, aber.) Dies wird sich jedoch erlauben, das erste zu verwenden, was Platz übrig ist, und die zweite, zu verwenden, was Platz braucht..? (Deute ich den flex als panel-1 erhalten 33% und panel 2 bekommt 67% von dem Raum?)
- Es ist ein bisschen von einer Logik Frage hier, 'der zweite zu verwenden, was Platz braucht.' könnte möglicherweise bedeuten, panel 1 ist komplett minimiert/gequetscht - so sicher Sie korrigieren möchten eine max-Höhe für die Platte 2 um dies zu verhindern?
- Wahrscheinlich, aber das ist nicht das große problem jetzt. (Allerdings, falls es Fragen zu der Lösung, ich würde wahrscheinlich lieber, wenn Sie beide bekommen, was Sie wollen, und dann der container für Sie beide wird, fügen Sie eine Bildlaufleiste.
InformationsquelleAutor SW4
2

Können Sie auch ein CSS-trick ('max-height' CSS-Feld) statt 'layout' und 'flex' ExtJS Felder. Für die, die nur fügen Sie die folgenden Zeilen-element, das sollte Scrollbar:
```
bodyStyle: { maxHeight: '300px' },
autoScroll: true,
```
Getestet mit ExtJS 3.4.0.

InformationsquelleAutor user2648222

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.