Problèmes de barre de défilement horizontale/verticale AdvancedDataGrid. (Flex)

Question

Donc, j'ai un AdvancedDataGrid qui a besoin de vivre à l'intérieur d'un canevas. Mon problème est que lorsque vous faites quelque chose comme ça, vous obtenez deux ensembles de barres de défilement. En outre, la barre de défilement horizontale pour AdvancedDataGrid change de taille lorsque vous faites défiler vers la droite et ne vous laisse pas défiler tout le chemin vers la droite, ce qui semble étrange.

J'ai désactivé le défilement horizontal sur AdvancedDataGrid et ne laisse que le Canvas le gérer. Quand je fais cela, cependant, les colonnes ne se permettent pas d'être redimensionnables. Pouah. Ma meilleure solution actuelle est de faire défiler le défilement vertical par AdvancedDataGrid et le défilement horizontal par le Canvas, mais cela semble fou, sans parler du problème que j'ai mentionné ci-dessus où je ne peux plus redimensionner les colonnes .

Toute aide est grandement appréciée! Merci!

Answer 1

Le défilement horizontal d'AdvancedDataGrid est quelque peu particulier, en ce sens qu'il dimensionne son pouce de défilement horizontal en fonction de la largeur des colonnes visibles. En fait pouvez faire glisser le pouce vers la fin, mais cela peut prendre quelques essais. (Je sais, je sais ...)

Rappelez-vous que dans AdvancedDataGrid, il n'y a rien de rendu en dehors de la fenêtre d'affichage, donc tout dimensionnement est une supposition éclairée (enfin, un peu éduquée). Adobe fait cela pour que les grilles énormes ne s'enfoncent pas dans l'analyse (imaginez des méthodes de mesure en cours sur des itemRenderers de 15 000 cellules chaque fois que vous redimensionnez la fenêtre).

Mon conseil consiste à désactiver les stratégies de défilement vertical et horizontal dans le canevas et à autoriser le défilement à gérer dans l'ADG. C'est moche, mais ça bat l'alternative. L'ADG est un outil encombrant et capricieux de toute façon, ce qui explique peut-être pourquoi Adobe l'a ouvert. J'ai juré plusieurs fois que je ne l'utiliserais plus jamais. J'ai été capable de garder ce vœu seulement jusqu'à la prochaine fois que j'avais besoin de ses fonctionnalités. Ce qui est à peu près chaque semaine.

Answer 2

Le composant AdvancedDataGrid est-il le seul élément de votre canevas?

Je voudrais redimensionner AdvancedDataGrid à sa hauteur et sa largeur et laisser le Canvas gérer le défilement.

Dans la toile, substituez la méthode updateDisplayList et faire quelque chose comme ceci:

protected function updateDisplayList(unscaledWidth: Number, unscaledHeight: Number):void{ 
super.updateDisplayList, unscaledHeight); 
this.myAdvancedDataGrid.setActualSize(this.myAdvancedDataGrid.measuredHeight, this.myAdvancedDataGrid.measuredWidth); 
} 

De cette façon, le AdvancedDataGrid ne devrait pas avoir des barres de défilement. Cependant, si elle s'étend trop loin ou trop loin, les barres de défilement apparaîtront dans le canevas. Vous pourriez bénéficier de la lecture sur le Flex Coordinate System. L'AdvancedDataGrid est votre "contenu" tandis que le canevas serait votre locale. J'ajoute un exemple de code de fonctionnement complet pour démo de ma suggestion.

Ceci est le composant de la toile avec un AdvancedDataGrid intérieur: com.flextras.stackOverflow.CanvasWithGrid

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ 
       super.updateDisplayList(unscaledWidth, unscaledHeight); 
       this.myADG.setActualSize(this.myADG.measuredWidth, this.myADG.measuredWidth); 
      } 

      [Bindable] 
      private var dpFlat:ArrayCollection = new ArrayCollection([ 
       {Region:"Southwest", Territory:"Arizona", 
        Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
       {Region:"Southwest", Territory:"Arizona", 
        Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}, 
       {Region:"Southwest", Territory:"Central California", 
        Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}, 
       {Region:"Southwest", Territory:"Nevada", 
        Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}, 
       {Region:"Southwest", Territory:"Northern California", 
        Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
       {Region:"Southwest", Territory:"Northern California", 
        Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}, 
       {Region:"Southwest", Territory:"Southern California", 
        Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
       {Region:"Southwest", Territory:"Southern California", 
        Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000} 
      ]); 

     ]]> 
    </fx:Script> 

    <mx:AdvancedDataGrid id="myADG" 

         initialize="gc.refresh();"> <!-- width="100%" height="100%" -->  
     <mx:dataProvider> 
      <mx:GroupingCollection id="gc" source="{dpFlat}"> 
       <mx:grouping> 
        <mx:Grouping> 
         <mx:GroupingField name="Region"/> 
         <mx:GroupingField name="Territory"/> 
        </mx:Grouping> 
       </mx:grouping> 
      </mx:GroupingCollection> 
     </mx:dataProvider>   

     <mx:columns> 
      <mx:AdvancedDataGridColumn dataField="Region"/> 
      <mx:AdvancedDataGridColumn dataField="Territory"/> 
      <mx:AdvancedDataGridColumn dataField="Territory_Rep" 
             headerText="Territory Rep"/> 
      <mx:AdvancedDataGridColumn dataField="Actual"/> 
      <mx:AdvancedDataGridColumn dataField="Estimate"/> 
     </mx:columns> 
    </mx:AdvancedDataGrid> 

</mx:Canvas> 

Ceci est le fichier de l'application principale:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:stackOverflow="com.flextras.stackOverflow.*"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <stackOverflow:CanvasWithGrid width="200" height="200" /> 


</s:Application>