Machen Sie ein Flex DataGrid scroll reibungslos

Habe ich bemerkt, dass das default-Verhalten für ein DataGrid-vertikale Bildlaufleiste zu Blättern um eine Zeile zu einem Zeitpunkt. Das ist ja alles schön und gut, wenn die Zeilen sind alle uniform und zu klein (z.B. die Anzeige einer einzelnen Textzeile), aber wird wirklich hässlich, sobald Sie Zeilen mit Variablen Höhen.

Ich bin neugierig, gibt es einen Weg, um DataGrid-scrolling "glatt"? Zum Beispiel, gibt es eine Möglichkeit die DataGrid-Blättern Sie durch eine festgelegte Anzahl der Pixel, Zeilen von text, etc. statt zu scrollen eine Zeile zu einem Zeitpunkt?

So weit, die einzige Lösung, die ich haben konnte ist das DataGrid in eine Leinwand und die Leinwand machen das scrolling anstelle des DataGrid. Das Problem bei diesem Ansatz ist jedoch, dass, sobald die Leinwand scrolls weit genug, das DataGrid-Kopfzeilen scroll off-screen. Im Idealfall würde ich gerne die smooth-scrolling-Art der Leinwand, sondern halten auch die DataGrid-Kopfzeilen sichtbar. Ist das möglich?

InformationsquelleAutor Dan | 2009-12-02

  1. 1

    Den Weg, die ItemRenderer-Arbeit in Flex 3 lässt mit smooth-scrolling schwer zu erreichen. Im Grunde Flex recycelt Elementrenderer gescrollt Weg von der Spitze der Liste als Anzeige-Objekte verwendet, für die neuen Daten am Ende der Liste. Adobe Umsetzung der meisten Komponenten, die in Flex 3 erstellt und fügt diese Elemente, wie Sie kommen auf dem Bildschirm, anstatt Sie einfach aus dem Bildschirm, so dass Sie "pop-in" und "smooth-scrolling" ist nicht verfügbar. Ich bin mir nicht sicher, warum Sie konnte es nicht getan haben, in einer ähnlichen Weise für die Positionen +/- eine position oberhalb oder unterhalb der aktuellen scroll-Bereich, aber Sie nicht, und wir stecken mit klebrigen Blättern standardmäßig.

    Workarounds existieren, aber die, die Sie haben darauf hingewiesen (hat er das datagrid in eine Leinwand) negiert das display-Objekt speichern Absicht von Elementrenderern und nimmt sich eine Leistung Kosten. Das wird behoben, für die meisten list-basierten Flex-Komponenten in Flex 4, obwohl es nicht sofort behoben werden, für DataGrid. Das DataGrid - /AdvancedDataGrid-Komponente wird verwaltet durch ein separates team in Indien, das Letzte mal hörte ich, und so neigt Sie dazu, ein wenig hinter dem rest der SDK.

    Ich würde empfehlen, zu versuchen, etwas ähnliches zu diese Implementierung von smooth-scrolling-Liste von Alex Harui. Ich bin mir nicht ganz sicher, wie gut es funktionieren würde für DataGrid oder AdvancedDataGrid -, aber dies ist die intuitive Technik, die ich denken kann, für die Herstellung der Liste Blättern korrekt.

    Sehr informative Antwort, danke! Es ist schade, dass dies nicht getan werden kann derzeit, obwohl ich verstehen, warum (Wiederverwendung itemRenderers ist sehr praktisch!). Leider ist Alex ' Beispiel nicht für die Arbeit mich, wie mein DataGrid hat variable Zeilenhöhen. Ich denke, ich werde warten, bis eine zukünftige Version von Flex um diese Funktionalität.
    In der Tat die meisten Plattformen verwenden die gleiche Technik der Wiederverwendung von Zellen, anstatt alle Zellen für die die gesamte Daten-grid. E. g. iPhone sdk folgt der gleichen Logik, Sie haben nur eine gewisse Anzahl von Zellen im Speicher, genug, um füllen Sie den Bereich, der aktuell angezeigt wird. Allerdings smooth-scrolling funktioniert Prima mit ein paar extra-Zellen gerendert aus dem Bildschirm und bringen Sie problemlos in die Benutzer-Ansicht, wie wir navigieren. Auch in der Hoffnung zu bekommen, dass Art von Blättern aus DataGrid bald Daumen

    InformationsquelleAutor RJ Owen

  2. 1

    Versuchen Sie dieses... Es ist noch auf Alex ' s code, der oben erwähnt wurde. Sein sollte immer noch ein guter start für das entfernen der snap-Reihe Verhalten. Original-Quelle:
    http://blogs.adobe.com/aharui/2008/03/smooth_scrolling_list.html

    Alex ' s original-code für glatte vertikale scrollen, aber das war kein Problem, hatte ich mit der DataGrid-Komponente. Es war smooth-scrolling horizontal, die ich brauchte. Ich bin mit dem DataGrid in eine unorthodoxe Art und Weise für die Analyse von nur-text-Berichte Ausgabe der Datenbank (großartige Möglichkeit, um ein optisches feedback auf ein Dokument). Der untenstehende code erlaubt es Inhalte aus dem Bildschirm und der Benutzer Blättern kann, ohne, dass snap-to-Spalte Verhalten.

    Können Sie sich diese Verwendung der gleichen mathematischen Routinen für das vertikale scrollen und dann wird es scrollen möglich, und ignorieren Sie die snap to row Verhalten. In bestimmten Schalter die Nutzung der listContent.move-Methode verschieben Sie den Inhalt vertikal und verwenden Sie eine inverse der abgerundeten pixel-Wert, den Sie berechnen sich aus der vertikalen scroll-bar (im Gegensatz zu meiner über die horizontale).

    Diese Methode ist etwas einfacher als Alex ' s Methode aus dem link oben - viel weniger code, so versuchen anzupassen und zu sehen, wie es funktioniert.

    override protected function scrollHandler(event:Event):void
        {           
            //Override the default scroll behavior to provide smooth horizontal scrolling and not the usual "snap-to-column" behavior
            var scrEvt:ScrollEvent = event as ScrollEvent;
            if(scrEvt.direction == ScrollEventDirection.HORIZONTAL) {
                //Get individual components of a scroll bar for measuring and get a horizontal position to use
                var scrDownArrow:DisplayObject = horizontalScrollBar.getChildAt(3);
                var sctThumb:DisplayObject = horizontalScrollBar.getChildAt(2);     
                //I replaced maxHorizontalScrollPosition in Alex's code with "1300" to fix my exact application. In other situations you may finding using some property or different value is more appropriate. Don't rely on my choice.
                var hPos:Number = Math.round((sctThumb.y - scrDownArrow.height) / (scrDownArrow.y - sctThumb.height - scrDownArrow.height) * 1300);     

                //Inverse the position to scroll the content to the left for large reports
                listContent.move(hPos * -1, listContent.y);
            }
            //Go ahead and use the default handler for vertical scrolling
            else {
                super.scrollHandler(event);
            }
        }

    InformationsquelleAutor Matt R.

Schreibe einen Kommentar