actionscript-3 - 如何使用 DataField 值更改 itemrender 按钮？

Question

在我的 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>

但是如何更改 Button 相对于 DataField 值，即。

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

Answer 1

监听 itemRenderer 的 dataChange 事件并根据 usertype 值切换按钮的可见性。由于您没有提供示例元素，因此我在这里对您的数据类型进行了一些“猜测”。但是，大致是这样的：

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

我在浏览器中编写了代码，所以它可能在语法上不正确。