Хобрук: Ваш путь к мастерству в программировании

flex, AdvancedDataGrid, настраиваемое средство визуализации элементов

Мне кажется, что мне не хватает некоторых ключевых понятий, когда дело доходит до средств визуализации гибких элементов, особенно в том, что касается AdvancedDataGrid. Я делаю то, что пытаются сделать многие другие: меняю цвет bg поля на основе данных из строки. Кажется, моя проблема связана с доступом к полям данных? Обычно при загрузке ничего не появляется. Если я удалю части из модуля рендеринга, в котором я пытаюсь получить доступ к данным поля, он работает, но как бы сбивает цель.

Вот что у меня есть:

<mx:AdvancedDataGrid width="100%" height="100%" 
    id="topAccountsGrid" 
    borderStyle="solid" dropShadowEnabled="true" treeColumn="{list_name}" editable="false" selectionMode="singleRow"
    dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" dragDrop="topAccountsGrid_dragDropHandler(event)"
    doubleClickEnabled="true" itemDoubleClick="topAccountsGrid_itemDoubleClickHandler(event)"
    sort="topAccountsGrid_sortHandler(event)" backgroundColor="#ffffff">
    <mx:dataProvider>
        <mx:HierarchicalData source="{filteredList}"
           childrenField="children" />
    </mx:dataProvider>
    <mx:columns>
       <mx:AdvancedDataGridColumn id="colRank" headerText="Rank" dataField="Rank__c" width="60">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:HBox paddingLeft="2">
                       <s:Label id="tempLabel" text="{data.Rank__c}" />
                       <fx:Script>
                           <![CDATA[
                                override public function set data(value:Object) : void{
                                   super.data = value;
                                   if(data.Health__c == 0){ 
                                       setStyle("backgroundColor",0xFF5050);
                                       } else if(data.Health__c == 50){
                                            setStyle("backgroundColor",0xFFFF99);
                                       } else if(data.Health__c == 100){
                                            setStyle("backgroundColor",0x66FF66);
                                   }
                                }
                            ]]>
                        </fx:Script>
                    </mx:HBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:AdvancedDataGridColumn>
        <mx:AdvancedDataGridColumn id="list_name" headerText="Name" dataField="Name" />
        <mx:AdvancedDataGridColumn id="colPrevRank" headerText="Previous Rank" dataField="Previous_Rank__c" />
        <mx:AdvancedDataGridColumn id="colType" headerText="Type" dataField="Type" />
        <mx:AdvancedDataGridColumn id="colContacts" headerText="# Contacts" dataField="Contacts__c" />
        <mx:AdvancedDataGridColumn id="colDeals" headerText="# Deals" dataField="Deals__c" />
    </mx:columns> 
</mx:AdvancedDataGrid>
flash actionscript-3 apache-flex
07.01.2011

  • Покажите свой dataProvider и, желательно, предоставьте исполняемый образец кода. 07.01.2011
  • Насколько я понимаю, это должно работать. Я согласен с Flextras. Пожалуйста, предоставьте работоспособный пример. Я предполагаю, что проблема с вашим dataProvider. Попробуйте отладить вашу set data функцию и посмотрите на значение. 07.01.2011

Ответы:


1

Раньше у меня была аналогичная проблема при использовании HierarchicalData. Я решил использовать AdvancedDataGridRendererProvider.

Вот пример кода:

<mx:AdvancedDataGrid width="100%" height="100%" 
    id="topAccountsGrid" 
    backgroundColor="#ffffff">
    <mx:dataProvider>
        <mx:HierarchicalData source="{filteredList}"
           childrenField="children" />
    </mx:dataProvider>
    <mx:columns>
       <mx:AdvancedDataGridColumn id="colRank" headerText="Rank" dataField="Rank__c" width="60" />
        <mx:AdvancedDataGridColumn id="list_name" headerText="Name" dataField="Name" />
        <mx:AdvancedDataGridColumn id="colPrevRank" headerText="Previous Rank" dataField="Previous_Rank__c" />
        <mx:AdvancedDataGridColumn id="colType" headerText="Type" dataField="Type" />
        <mx:AdvancedDataGridColumn id="colContacts" headerText="# Contacts" dataField="Contacts__c" />
        <mx:AdvancedDataGridColumn id="colDeals" headerText="# Deals" dataField="Deals__c" />
    </mx:columns>
    <mx:rendererProviders>
      <mx:AdvancedDataGridRendererProvider column="{colRank}" depth="1" dataField="Rank__c" renderer="AdvancedDataGridRankCRenderer" />
    </mx:rendererProviders>
</mx:AdvancedDataGrid>

И AdvancedDataGridRendererProvider:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx" 
             backgroundColor="{SetBackgroundColor(data)}" 
             paddingLeft="2" paddingRight="2" paddingTop="2"
             horizontalScrollPolicy="off"
             verticalScrollPolicy="off"
             height="22">
    <fx:Script>
        <![CDATA[
            [Bindable] private var bgColor:uint = 0xD6E5FF;

            private function SetBackgroundColor(obj:Object):uint
            {
                var returnColor:uint = 0xFF5050;

                if (obj["Rank__c"] != null)
                {
                    switch (obj["Rank__c"].toString().toUpperCase())
                    {
                        case "0":
                            returnColor = 0xFF5050;
                            break;
                        case "50":
                            returnColor = 0xFFFF99;
                            break;
                        case "100":
                            returnColor = 0x66FF66;
                            break;
                        default:
                            returnColor = 0xFF5050;
                                                    break;
                    }
                }

                return returnColor;
            }

            override public function set data(value:Object):void
            {
                super.data = value;
                rankLabel.text = value["Rank__c"].toString();               
                validateDisplayList();
            }
        ]]>
    </fx:Script>
    <mx:Label id="rankLabel" />
</mx:HBox>
07.01.2011
  • Большое спасибо, это прекрасно! Я пробовал использовать маршрут rendererproviers ранее, но безуспешно, это связывало все вместе, большое спасибо, вы спасаете жизнь / здравомыслие! 07.01.2011
    • Новые материалы
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..