2010-09-28 16 views
9

Ich arbeite an einem Projekt, wo ich ein einzelnes GridPanel auf einer Seite habe. Das Panel kann eine beliebige Anzahl von Zeilen anzeigen und ich habe die AutoHeight -Eigenschaft festgelegt, wodurch das GridPanel erweitert wird, um die Anzahl der Zeilen anzupassen. Ich möchte jetzt eine horizontale Bildlaufleiste, weil bei einigen Auflösungen nicht alle Spalten angezeigt werden (und ich kann die Anzahl der Spalten nicht reduzieren).vertikale Bildlaufleiste in ExtJS GridPanel

Wenn stelle ich die Autoheight Ich habe keine horizontalen Scrollbar, wenn ich es nicht gesetzt und stellen Sie eine feste Höhe ich einen horizontalen Scrollbalken haben aber die Gridpanel passt offensichtlich nicht die Anzahl der Zeilen ....

Kann ich etwas tun, um das zu beheben? Ich kann nicht scheinen, eine Eigenschaft zu finden, die das Ergebnis erreichen würde, das ich brauche.

Antwort

1

Dies scheint ein Problem mit Ihren Layouteinstellungen im Gegensatz zu den Objekteigenschaften zu sein.

Versuchen Sie, die Layout-Eigenschaft des übergeordneten Containers so anzupassen, dass sie 'passt' - können Sie auch einen Code-Auszug bereitstellen?

+0

Wie ich schon sagte, ich habe nur die Gridpanel auf der Seite und keine Layout-Container. Ich bin neu bei all diesen ExtJS-Sachen, damit ich etwas verpasst habe. Muss ich einen Container um das Gridpanel herum verwenden, damit es richtig funktioniert? – JDT

1

Wie Ergo sagte, ist dies eher ein Layout-Problem - das GridPanel ist wahrscheinlich höher als das Panel, das es enthält, hoch genug, um keine Bildlaufleiste zu benötigen, aber offensichtlich nicht vollständig sichtbar. Setzen Sie das GridPanel in einen Container mit einem geeigneten Layout, d. H. Rahmenlayout, passendes Layout oder Kartenlayout. Layout-Manager richtig einzuordnen ist in der Regel einer der schwierigsten Teile von ExtJS-Fu.

5

Mein Gedanke wäre autoScroll: true auf dem Panel.Panel, das das Raster enthielt.

7

Sie werden feststellen, dass ein Elterncontainer (Ext.panel.Panel oder irgendein Container wirklich) um Ihr Grid-Panel, um erfolgreich zu sein. Wenn Sie die Höhe, Breite und das Layout für den übergeordneten Container fest codieren, wird das untergeordnete Element (Ext.grid.Panel) so erweitert, dass es den gesamten verfügbaren Speicherplatz des übergeordneten Containers ausfüllt.

Siehe Seiten 80 und 81 von Ext JS 4 Webanwendung Entwicklung Kochbuch.

Sie können die faule Instanziierungsnotation für 'Ext.grid.Panel' verwenden. Bedeutung Verwendung 'Gitter' für Ihr Kind Container (Artikel) xType Eigentum.

Ext.create('Ext.panel.Panel', { 
    title: 'parent container', 
    width: 800, 
    height: 600, 
    layout: 'fit', 
    items: { 
     xtype: 'grid', 
     title: 'child container', 

     ... define your grid here 

    }, 
    renderTo: 'grand parent container' 
}); 
0

Zugabe

viewConfig = { 
     scroll:false, 
     style:{overflow: 'auto',overflowX: 'hidden'} 
    } 

verursacht manchmal einen Fehler mit 2 Scrollbalken angezeigt wird. Um es in meinem Fall zu verhindern, habe ich einen Listener hinzugefügt. Und dann funktioniert es gut.

this.on('scrollershow',function(scroller,orientation,eOpts){ 
     if (orientation=='vertical'){ 
      scroller.hide();     
     } 
},this); 
Verwandte Themen