Flex 3: как добавить изображения в столбец advancedDataGrid - PullRequest
Новая
       68

Flex 3: как добавить изображения в столбец advancedDataGrid

0 голосов
/ 30 декабря 2018

Мне нужно изменить старый проект Flex 3, и мне нужно создать AdvancedDataGrid, который выглядит следующим образом:

example1

Мне нужно добавить более одногоизображение в каждой строке этого столбца.У меня есть массив, содержащий информацию об изображениях, которые мне нужно добавить.На данный момент моя сетка выглядит примерно так:

example2

, где буквы "C", "W", "R", "A", "F" представляютзначок, который мне нужно добавить.Я думаю, мне нужно сделать рендер, где я могу выбрать каждую букву и заменить ее соответствующим изображением.Но все примеры, которые я нахожу, взяты из Flex 4 и здесь не работают.Лучшее, что я получил, было это: 

 <mx:AdvancedDataGrid id="myADG" dataProvider = "{gridData}" width="200" height="500" x="800" y="50" >       

        <mx:columns>

            <mx:AdvancedDataGridColumn id="lineColumn" dataField="line">

                  <mx:itemRenderer>
                    <mx:Component>

                    <mx:Image source='{ iconData.line == 'C' ?
                              'resources/icon2312.png' : 'resources/icon2314.png'}' x="200" y="200" visible="true" />
                    </mx:Component>
                </mx:itemRenderer>

            </mx:AdvancedDataGridColumn>

        </mx:columns>

    </mx:AdvancedDataGrid>

Это позволило мне вставить и изображение в каждой строке, но я не знаю, как я могу добавить более одного изображения.Должен ли я разобрать строку и поместить каждую букву в отдельный столбец?или есть более простой способ?

1 Ответ

0 голосов
/ 02 января 2019

Если в то же время существует несколько значков, вы можете сделать это следующим образом: добавить изображения с максимальным количеством изображений. Здесь 2, вы можете добавить больше.

     <mx:itemRenderer>
          <mx:HBox>

                <mx:Image source='{ iconData.line1 == 'C' ?
                          'resources/icon2312.png' : 'resources/1.png'}' x="200" y="200" visible={ iconData.line1 == 'C'} includeInLayout={iconData.line1 == 'C'}/>

                <mx:Image source='{ iconData.line2 == 'W' ?
                          'resources/icon2312.png' : 'resources/2.png'}' x="200" y="200" visible="{ iconData.line2 == 'W'}" includeInLayout={iconData.line2 == 'W'}/>
          </mx:HBox>
      </mx:itemRenderer>

Используйте includeLayout , чтобы скрыть или показать изображение

Я использовал iconData.line1 == 'C', чтобы проверить, нужно ли показывать одно изображение, Вы можете использовать бит xor чтобы проверить вот так 

//Use iconData.t to save the show info. If include 'A', iconData.t = 0x1, 
//if include 'W', iconData.t = 0x10. And if inluce 'A' and 'W', iconData.t = 0x11

<mx:Image visible={iconData.t ^ 0x1 == 0}/> //image 'A'
<mx:Image visible={iconData.t ^ 0x10 == 0}/> //image 'W'
...