Flex3 AdvancedDataGrid: как добавить новый столбец на основе существующего?

У меня есть AdvancedDataGrid в flex3 (Flex 3) с 4 столбцами:

  • id: int
  • категория: Строка
  • имя: Строка
  • isPreferred: Boolean

И я хотел бы добавить пятую колонку

  • избранное: Изображение

    Значение избранного будет основано на значении isPreferred: если true, то избранное будет отображаться в виде значка в виде сердечка для чтения, если значение false - в виде серого сердечка.
    Спасибо за вашу помощь.

Ниже мой код:

  • содержимое mxml

    ‹Xml version =" 1.0 "?›
    ‹mx: Application xmlns: mx =" http://www.adobe.com/2006/mxml "applicationComplete =" init () "›
    ‹mx: Script ›
    ‹! [CDATA [
    import mx.collections.ArrayCollection;
    import com.test.Purchase;
    [Embed (source = ".. \ assets \ coeur_rouge.png")] < br> public static const ICON_FAVORITE: Class;
    [Embed (source = ".. \ assets \ coeur_gris.png")]
    public static const ICON_NEUTRAL: Class;
    [Bindable]
    public var myAC: ArrayCollection = new ArrayCollection ();
    публичная функция init (): void {
    var aPurchase: Purchase = new Purchase ();
    var anotherPurchase: Purchase = new Purchase ();
    aPurchase .id = 120;
    aPurchase.category = "category1";
    aPurchase.name = "Преимущество 2";
    aPurchase.isPreferred = true;
    myAC.addItem (aPurchase);
    anotherPurchase.id = 220;
    anotherPurchase.category = "category2";
    anotherPurchase.name = "Nintendo DS";
    anotherPurchase.isPreferred = false;
    myAC.addItem (anotherPurchase);} < br>]]>
    ‹/ mx: Сценарий t ›
    ‹? mx: AdvancedDataGrid id = "dg" width = "500" height = "150" dataProvider = "{myAC}" ›
    ‹ mx: groupedColumns ›
    ‹ mx: AdvancedDataGridColumn dataField = "id" headerText = "ID" width = "300" / ›‹ mx: AdvancedDataGridColumn dataField = "category" headerText = "Category" width = "400" / ›
    ‹ mx: AdvancedDataGridColumn dataField = "name" headerText = "Name" width = "900" / ›
    ‹ mx: AdvancedDataGridColumn headerText = "Fav?" dataField = "isPreferred" width = "700" / ›
    ‹ / mx: groupedColumns ›
    ‹ / mx: AdvancedDataGrid ›
    ‹ / mx: Application ›

    • объект данных в сценарии действия открытого класса Purchase {public function Purchase () {

      }

      частный var _id: int = -1; частный var _category: String = null; частный var _productName: String = null;
      частный var _preferred: Boolean = false;

      публичная функция get id (): int {return _id; }

      идентификатор набора публичной функции (pId: int): void {_id = pId; }

      публичная функция получить категорию (): String {return _category; }

      категория набора общедоступных функций (pCategory: String): void {_category = pCategory;

      if ((_category == null) || (_category == "")) {               
          _category = "Default Category";
      }
      

      }

      публичная функция получить имя (): String {return _productName; }

      имя набора общедоступных функций (pName: String): void {_productName = pName;

      if ((_productName == null) || (_productName == "")) {
          _productName = "default product name";
          category = _productName;
       }
      

      }

      публичная функция get isPreferred (): Boolean {return _preferred; }

      набор общедоступных функций isPreferred (pPreferred: Boolean): void {_preferred = pPreferred; }}


person xalibeut    schedule 06.04.2011    source источник


Ответы (1)


Для этого вам понадобится itemRenderer. Примерно так должно работать:

<mx:AdvancedDataGridColumn headerText="favorite">
    <mx:itemRenderer>
        <mx:Component>
            <mx:Image source="{data.isPreferred ? ICON_FAVORITE : ICON_NEUTRAL}">
                <mx:Script>
                    <![CDATA[
                        [Embed(source="..\assets\coeur_rouge.png")]
                        public static const ICON_FAVORITE:Class;

                        [Embed(source="..\assets\coeur_gris.png")]
                        public static const ICON_NEUTRAL:Class;
                    ]]>
                </mx:Script>
            </mx:Image>
        </mx:Component>
    </mx:itemRenderer>
</mx:AdvancedDataGridColumn>

Имейте в виду, что этот фрагмент кода нельзя использовать повторно. Если вам нужно использовать столбцы, которые часто показывают изображения, я рекомендую реализовать пользовательский ImageColumn, который расширяет mx:AdvancedDataGridColumn, имеет какое-то свойство imageFunction в качестве свойства и использует пользовательский itemRenderer, который будет использовать imageFunction столбца для отображения соответствующего изображения.

person Gerhard Schlager    schedule 06.04.2011
comment
Герхард, вы правы: я хотел проиллюстрировать свой вопрос. Можете ли вы предложить более простую альтернативу (чем расширение AdvancedDataGridColumn), поскольку я новичок в flex3. Как бы Вы это сделали? - person xalibeut; 06.04.2011
comment
Решение simple - это то, что я опубликовал во фрагменте кода выше. Он использует Image как itemRenderer, где source изменяется в зависимости от значения data.isPreferred. Я также обрисовал в общих чертах, как можно реализовать ImageColumn. Я бы реализовал imageFunction для столбца (например, его labelFunction). Пользовательское средство визуализации может получить доступ к столбцу через свой listData. Попробуй сам. Это не так сложно, если вы понимаете, как работают столбцы и средства визуализации. Отправьте еще один вопрос, если вы хотите создать такой ImageColumn и у вас есть конкретный вопрос. - person Gerhard Schlager; 06.04.2011
comment
Я тестирую предложенное решение, но оно не компилирует mx: AdvancedDataGridColumn headerText = favourite mx: itemRenderer mx: Component mx: Image source = {data.isPreferred? ICON_FAVORITE: ICON_NEUTRAL} / / mx: Компонент ›/ mx: itemRenderer / mx: AdvancedDataGridColumn - person xalibeut; 06.04.2011
comment
-1120: Доступ к неопределенному свойству ICON_NEUTRAL. -1120: Доступ к неопределенному свойству ICON_FAVORITE. - person xalibeut; 06.04.2011
comment
Герхард, очевидно из этой проблемы с видимостью (похоже, переменные не видны внутри mx: itemrenderer и mx: component), все работает нормально. Я просто поставил строковые константы. Спасибо за помощь. - person xalibeut; 06.04.2011
comment
Вы удалили <mx:Script> из фрагмента кода? Средство визуализации элементов не может получить доступ к вашим константам в вашем приложении. Они должны быть внутри рендерера. - person Gerhard Schlager; 06.04.2011
comment
Отметьте этот вопрос как ответ, чтобы другие знали, что он решен. - person Gerhard Schlager; 06.04.2011
comment
да, но проблема с доступом остается. Но ты сделал мой день. Спасибо. Как отметить вопрос как ответ? - person xalibeut; 06.04.2011
comment
Вот почему вы должны поместить константы внутри средства визуализации элементов (как я). Вы не можете получить доступ ни к чему постороннему. Ну хоть не легко ... - person Gerhard Schlager; 06.04.2011