Различная стилизация строк в сетке данных FLEX - PullRequest
Новая
       4

Различная стилизация строк в сетке данных FLEX

2 голосов
/ 16 мая 2011

Я пытаюсь изменить цвет шрифта строки в сетке данных, если в поле данных найдено определенное слово.Есть ли простой, встроенный способ сделать это?

Спасибо

Ответы [ 3 ]

3 голосов
/ 16 мая 2011

Вы можете переопределить метод drawRowBackground вашего DataGrid и проверить, нужен ли ему собственный фон или нет.Если это так, передайте новый цвет фона вызову super этого метода: 

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);
}

, где someWord - слово, которое вы ищете, а yourCustomColor - uint, представляющееновый цвет фона, например: 

var yourCustomColor: uint = 0xff0000;
1 голос
/ 16 мая 2011

Вы можете попробовать использовать следующий код. Пару точек для заметки:

1) Используйте этот подход, если вы отображаете простой текст в вашей сетке данных (ну, вы можете сделать это и для других типов рендеров), но тогда вам придется писать аналогичный кусок кода и в других средствах визуализации).

2) При таком подходе мы в основном воссоздаем средства визуализации элементов, когда говорим «Highlight». Так что это может привести к некоторой производительностиЯ считаю, что если вы используете простые средства визуализации элементов, это не сильно повлияет на производительность.

Основное применение 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>

Содержаниеиз CustomItemRenderer.mxml (предполагается, что он находится в той же папке, что и приведенный выше mxml) 

<?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>

Надеюсь, что это поможет. А пока я также поищу, сможете ли вы добиться этогоболее простой способ.

0 голосов
/ 16 мая 2011

Хотя подход rekaszeru, безусловно, действителен, я думаю, что поместить эту логику в средство визуализации элементов более логично.
Вы можете создать пользовательское средство визуализации элементов и сделать setStyle("color", "...") на основе данных.Только не забудьте очистить цвет, когда слово не найдено, потому что средство визуализации используется повторно и будет содержать старые значения, если не будет перезаписано.

...