如何使用DataField值更改itemrender按钮?

时间:2013-01-01 06:06:39

标签: actionscript-3 flex flex3 mxml

在我的Flex应用程序DataGrid中... ...

<mx:DataGrid id="userListDataGrid" x="60" y="40" width="520" height="148" dataProvider="{schedule}" creationComplete="userListDataGrid_creationCompleteHandler(event)">
    <mx:columns>
        <mx:DataGridColumn dataField="courseDate" headerText="Date"/>               
        <mx:DataGridColumn dataField="courseName" headerText="Course Name"/>
        <mx:DataGridColumn id="usertype" dataField="userType" headerText="User Type"/>

        <mx:DataGridColumn headerText="Reminder">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:HBox>
                      <mx:Button id="join" label="Join" borderColor="#5d93b9"
                               color="#04becf">
                      </mx:Button>  
                      <mx:Button id="start" label="Start" borderColor="#5d93b9"
                               color="#04becf">
                      </mx:Button>
                    </mx:HBox>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

    </mx:columns>
</mx:DataGrid>

My DataGrid View

但是如何根据DataField值改变Button,即..

Host----Start Button
Attendee----JOin Button

Final Output

1 个答案:

答案 0 :(得分:1)

收听itemRenderer的dataChange事件,并根据usertype值切换按钮的可见性。我正在做一些&#34;猜测&#34;在这里您的数据类型,因为您没有提供样本元素。但是,大概是这样的:

    <mx:DataGridColumn headerText="Reminder">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox dataChange="onDataChange()">
                  <mx:Script>
                      protected function onDataChange():void{
                         if(data.usertype == 'Host'){
                            join.visible = true;
                            start.visible = false;
                         } else {
                            join.visible = false;
                            start.visible = true;
                         }
                      }
                  </mx:Script>
                  <mx:Button id="join" label="Join" borderColor="#5d93b9"
                           color="#04becf">
                  </mx:Button>  
                  <mx:Button id="start" label="Start" borderColor="#5d93b9"
                           color="#04becf">
                  </mx:Button>
                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:DataGridColumn>

我在浏览器中编写了代码,因此它可能在语法上不正确。