DataGridの異なる行のスタイルFLEX

データフィールドに特定の単語がある場合は、データグリッド内の行のフォント色を変更しようとしています。これを行う簡単なインライン方法はありますか？DataGridの異なる行のスタイルFLEX

おかげ

2011-05-16 def

あなたDataGridのdrawRowBackgroundメソッドをオーバーライドし、それがカスタムの背景を必要とするかどうかを確認することができます。
もしそうなら、この方法のsuper呼び出しに新しい背景色を渡す：

someWordは、あなたが探している単語で、 yourCustomColorは新しい背景色を表す uintで、例えば

protected override function drawRowBackground(s:Sprite, rowIndex:int, 
    y:Number, height:Number, color:uint, dataIndex:int):void 
{ 
    if ((dataProvider[dataIndex] as String).indexOf(someWord) >= 0) 
     color = yourCustomColor; 
    super.drawRowBackground(s, rowIndex, y, height, color, dataIndex); 
}

：

var yourCustomColor: uint = 0xff0000;

出典

2011-05-16 10:03:10 rekaszeru

私は非常にフレキシブルで、このコードをどこに置く必要がありますか？ – def

カスタム 'DataGrid'クラスが必要です（ルート要素が' DataGrid'の場合は 'MyDataGrid.mxml'）。そしてそのコンポーネント実装の '

rekaszeruのアプローチは確かに有効ですが、このロジックをアイテムレンダラーに追加する方がより論理的だと思います。
custom item rendererを作成し、データに基づいてsetStyle("color", "...")とすることができます。レンダラーが再利用され、上書きされない場合は古い値が含まれるため、単語が見つからないときに色を消去することを忘れないでください。

出典

2011-05-16 10:30:14 alxx

真ですが、この方法では、すべての列に対してカスタムレンダリングが必要であり、ロジック全体を実装して行全体をカバーする必要があります。選択されたアイテムレンダラーがセルに完全に合致しないようにする必要がある場合は、しばしば難しくなります（新しい塗りの親レイアウトが必要です）。 – rekaszeru

Item rendererは、DataGrid全体または必要に応じて列ごとに1回設定できます。異なる列を同じロジックで制御することができます。私は、ロジックをDataGridに埋め込むのは難しいと感じています。 – alxx

あなたは注意することがポイントで、次のcode.Coupleを使用して試すことができます：

1）あなたがDataGrid内の単純なテキストを表示している場合（まあ、あなたもレンダラーの他のタイプのためにこれを行うことができ、このアプローチを使用して、他のレンダラでも同様のコードを書く必要があります）。

2）このアプローチでは、基本的に、「ハイライト」と言うときにアイテムレンダラーを再作成しています。このため、パフォーマンスが低下する可能性があります。シンプルなアイテムレンダラーを使用している場合、パフォーマンスへの影響。 CustomItemRenderer.mxmlの

メインアプリケーションMXML

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600" 
       creationComplete="application1_creationCompleteHandler(event)"> 

    <mx:Script> 
     <![CDATA[ 
      import mx.events.FlexEvent; 

      private var rendererFactory:ClassFactory; 

      protected function btn_clickHandler(event:MouseEvent):void 
      { 
       setFilterWordInRenderer(); 
      } 


      protected function application1_creationCompleteHandler(event:FlexEvent):void 
      { 
       setFilterWordInRenderer(); 
      } 

      private function setFilterWordInRenderer():void 
      { 
       if(!rendererFactory) 
        rendererFactory = new ClassFactory(CustomItemRenderer) 

       //Data for the renderer.The word to check. 
       rendererFactory.properties = {filterWord:textInput.text}; 
       //Only set the renderers to the columns where you want this highlighting to be done.     
       col1.itemRenderer = rendererFactory; 
       col2.itemRenderer = rendererFactory; 
      } 

     ]]> 
    </mx:Script> 

    <mx:TextInput id="textInput"/> 
    <mx:Button id="btn" label="Highlight" click="btn_clickHandler(event)"/> 
    <mx:DataGrid id="dtg"> 
     <mx:dataProvider> 
      <mx:XMLList id="datXML" xmlns=""> 
       <value id='test1'>abc</value> 
       <value id='test2'>sadad</value> 
       <value id='23'>ytuyt</value> 
       <value id='24'>uytuty</value> 
       <value id='62'>erewewwer</value> 
       <value id='72'>tefcvsrwert</value> 
       <value id='28'>uiiyui</value> 
       <value id='82'>tryry</value> 
       <value id='28'>iouoo</value> 
       <value id='test1'>abc</value> 
       <value id='test2'>sadad</value> 
       <value id='23'>ytuyt</value> 
       <value id='24'>uytuty</value> 
       <value id='62'>erewewwer</value> 
       <value id='72'>tefcvsrwert</value> 
       <value id='28'>uiiyui</value> 
       <value id='82'>tryry</value> 
       <value id='28'>iouoo</value> 
      </mx:XMLList> 
     </mx:dataProvider> 
     <mx:columns> 
      <mx:DataGridColumn id="col1" headerText="Col1" dataField="@id"/> 
      <mx:DataGridColumn id="col2" headerText="Col2" dataField="*"/> 
     </mx:columns> 
    </mx:DataGrid> 
</mx:Application>

内容

<?xml version="1.0" encoding="utf-8"?> 
<mx:Label xmlns:mx="http://www.adobe.com/2006/mxml" 
      color="{text.indexOf(_filterWord,0) != -1?0xFF0000:0x000000}"> 
    <mx:Script> 
     <![CDATA[ 
      import mx.controls.DataGrid; 
      import mx.controls.dataGridClasses.DataGridListData; 

      //The word to check,for font color changing. 
      [Bindable] 
      private var _filterWord:String; 

      public function set filterWord(value:String):void 
      { 
       if(value!='') 
        _filterWord = value; 
       else 
        _filterWord = null; 
      } 

      override public function set data(value:Object):void 
      { 
       if(!value) 
        return; 
       super.data = value; 
       //Set the label text,using listdata and datafield to make the item renderer as generic as possible. 
       text = data[DataGridListData(listData).dataField]; 
      } 

     ]]> 
    </mx:Script> 
</mx:Label>

願ってhelps.In一方（上記MXMLと同じフォルダにあると仮定します）もっと簡単な方法でこれを達成できるかどうかも見ていきます。

出典

2011-05-16 12:30:48 user700284

DataGridの異なる行のスタイルFLEX

答えて

関連する問題