comment augmenter dynamiquement la hauteur du panneau en flexion?

J'ai un panneau à l'intérieur duquel j'ai une grille de données et un bouton. La fonctionnalité est que lorsque je clique sur le bouton, une ligne est ajoutée à la grille de données. J'ai décrit la hauteur et la largeur du panneau en%. Mais à mesure que le nombre de lignes dans la grille de données augmente, en raison de la hauteur du panneau fixe, une barre de défilement apparaît dans la grille de données.comment augmenter dynamiquement la hauteur du panneau en flexion?

Mais je veux que la hauteur du panneau augmente dynamiquement à mesure que j'augmente les lignes de la grille de données. Quelqu'un m'aide. Ceci est mon code flex:

<mx:Script> 
    <![CDATA[ 
     import mx.collections.ArrayCollection; 
     import mx.rpc.events.ResultEvent; 
     import mx.collections.XMLListCollection; 


     [Bindable] 

     private var initDG:ArrayCollection = new ArrayCollection([ 
      {Select:true}, 

     ]); 

     private function addTaskRow(event:MouseEvent):void 
     { 
      taskDataGrid.dataProvider.addItem(
       { 

       } 
      ); 
     } 

    ]]> 
</mx:Script> 

<mx:Panel x="20" y="250" width="75%" height="20%" layout="absolute" id="taskPanel" title="Review Task Details" > 
<mx:VBox width="100%" height="100%" > 

    <mx:DataGrid id="taskDataGrid" dataProvider="{initDG}" variableRowHeight="true" editable="true" height="85%" width="100%"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="Select" 
      editable="true" 
      rendererIsEditor="true" 
      itemRenderer="mx.controls.CheckBox" 
      editorDataField="selected"/> 

      <mx:DataGridColumn dataField="TaskName" 
      width="220" 
      editable="true" 
      rendererIsEditor="true" 
      itemRenderer="components.taskComponent"/> 

      <mx:DataGridColumn dataField="TaskId" 
      itemRenderer="mx.controls.TextInput" /> 

      <mx:DataGridColumn dataField="TaskType" 
       itemRenderer="mx.controls.TextInput"/> 

      <mx:DataGridColumn dataField="ProjectWon" 
       itemRenderer="mx.controls.TextInput"/> 

      <mx:DataGridColumn dataField="ItemCode" 
       itemRenderer="mx.controls.TextInput"/> 

      <mx:DataGridColumn dataField="ItemVersion" 
       itemRenderer="mx.controls.TextInput"/> 


     </mx:columns> 
    </mx:DataGrid> 

    <mx:Button id="addTask" label="Add Task" click="addTaskRow(event)"/> 

</mx:VBox> 
</mx:Panel>

Source

2009-10-07 Angeline

est ici un pixel version parfaite pour vous:

<fx:Script> 
<![CDATA[ 
    import mx.collections.ArrayCollection; 
    import mx.rpc.events.ResultEvent; 
    import mx.collections.XMLListCollection; 


    [Bindable] 

     private var initDG:ArrayCollection = new ArrayCollection([ 
     {Select:true}, 

    ]); 

     private function addTaskRow(event:MouseEvent):void 
    { 
     taskDataGrid.dataProvider.addItem(
      { 

      } 
     ); 

     taskDataGrid.height += 23; 
    } 

]]>

 <mx:DataGrid id="taskDataGrid" dataProvider="{initDG}" variableRowHeight="true" editable="true" 
     width="100%" paddingBottom="0" paddingTop="1" height="47"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="Select" 
      editable="true" 
      rendererIsEditor="true" 
      itemRenderer="mx.controls.CheckBox" 
      editorDataField="selected"/> 

      <mx:DataGridColumn dataField="TaskId" 
      itemRenderer="mx.controls.TextInput" /> 

      <mx:DataGridColumn dataField="TaskType" 
       itemRenderer="mx.controls.TextInput"/> 

      <mx:DataGridColumn dataField="ProjectWon" 
       itemRenderer="mx.controls.TextInput"/> 

      <mx:DataGridColumn dataField="ItemCode" 
       itemRenderer="mx.controls.TextInput"/> 

      <mx:DataGridColumn dataField="ItemVersion" 
       itemRenderer="mx.controls.TextInput"/> 


       </mx:columns> 
    </mx:DataGrid> 

    <mx:Button id="addTask" label="Add Task" click="addTaskRow(event)"/>

La principale chose que je l'ai fait différemment était d'enlever le VBox que vous aviez envelopper le DataGrid. J'ai également désactivé la politique de défilement du Panel. Le reste était principalement en train de peaufiner. J'espère que cela aide.

Consultez la version de travail here. Pour beaucoup d'autres bons exemples de l'interface utilisateur et le code, allez here

Cheers, Caspar

Source

2009-10-07 21:47:54

je vous remercie beaucoup .. Je travaille comme je le voulais .. J'ai augmenté la hauteur de la grille de données un peu (de 23 à 30) de sorte que je ne reçois pas une barre de défilement. mais comme j'ajoute des rangs, chaque ligne ajoute de l'espace supplémentaire en bas. Quelle est la raison de cela? – Angeline

Essayez de jouer avec les valeurs paddingTop et paddingBottom sur le DataGrid. Je n'ai malheureusement pas trouvé de moyen fiable de calculer la hauteur exacte du DataGrid. Je vais continuer à regarder bien. –

Accroche-toi, viens de réaliser ce que tu as dit - ce que fait ton code, c'est d'ajouter 30 à la hauteur du datagrid chaque fois que tu ajoutes une ligne - mais chaque nouvelle ligne ajoute moins de 30. De cette façon, le DataGrid devient plus grand a besoin de. Essayez d'ajouter moins de 30 -> commencer par 24 et remonter à partir de là. –

cela pourrait être sale mais, que diriez-vous régler la hauteur du panneau en MXML pour {taskDataGrid.height + 30} ou quelque chose de similaire ..

Juste une suggestion :)

Source

2009-10-07 05:10:12

je vais faire un essai .. – Angeline

Que se passe-t-il lorsque vous modifiez la hauteur du panneau de 20% à 100% et que la hauteur de la grille de données est comprise entre 85% et 100%?

Source

2009-10-07 06:20:25 Amarghosh

encore je reçois la barre de défilement .. – Angeline

Ensuite, vous allez devoir faire quelque chose comme ce que Sharat a suggéré. – Amarghosh

comment augmenter dynamiquement la hauteur du panneau en flexion?

Répondre

Questions connexes