DataGrid의 글꼴 크기와 글꼴 패밀리를 어떻게 동적으로 변경할 수 있습니까?

Question

DataGrid를 사용하는 값 ​​테이블이있는 플렉스 스크린 MyData.mxml이 있습니다. DataGrid의 모든 스타일은 Flex 라이브러리 프로젝트의 일부인 default.css 파일에 포함되어 있습니다. 이 파일은 swc 파일로 변환되어 Flex 프로젝트 (MyData.mxml을 사용)에서 사용됩니다.

MyData 화면에는 DataGrid의 글꼴 크기를 변경할 수있는 옵션이 있습니다.

• 일반 글꼴 (굴림, 12)
• 작은 글꼴 (굴림, 11)

는 사용자가 '정상를 선택 : 우리는 사용자가 두 개의 옵션 버튼에서 선택할 수있는 RadioButtonGroup 구성이 Font '버튼을 클릭하면 DataGrid의 모든 데이터가 Verdana 12로 설정되고 사용자가 Small Font 옵션 버튼을 선택하면 DataGrid의 모든 데이터를 Verdana 11로 설정해야합니다.

어떻게하면됩니까?

Answer 1

나는 다음과 같은 코드는 문제를 해결할 수 있다고 생각 :

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application layout="vertical" verticalAlign="middle" xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
    <![CDATA[ 
     public static const NORMAL_STYLE:String = "normal"; 
     public static const SMALL_STYLE:String = "small"; 

     protected function styleGroup_changeHandler(event:Event):void 
     { 
      var fontFamily:String = "Verdana"; 
      var fontSize:int; 
      switch (styleGroup.selectedValue) 
      { 
       case NORMAL_STYLE: 
        fontSize = 12; 
        break; 
       case SMALL_STYLE: 
        fontSize = 11; 
        break; 
      } 
      dataGrid.setStyle("fontFamily", fontFamily); 
      dataGrid.setStyle("fontSize", fontSize); 
     } 
    ]]> 
    </mx:Script> 

    <mx:ArrayCollection id="dataGridData"> 
     <mx:source> 
      <mx:Array> 
       <mx:Object first="First1" second="Second1" /> 
       <mx:Object first="First2" second="Second2" /> 
      </mx:Array> 
     </mx:source> 
    </mx:ArrayCollection> 

    <mx:DataGrid dataProvider="{dataGridData}" height="200" id="dataGrid"> 
     <mx:columns> 
      <mx:DataGridColumn dataField="first" headerText="First" /> 
      <mx:DataGridColumn dataField="second" headerText="Second" /> 
     </mx:columns> 
    </mx:DataGrid> 
    <mx:RadioButtonGroup change="styleGroup_changeHandler(event)" id="styleGroup" /> 
    <mx:RadioButton group="{styleGroup}" label="Normal" value="{NORMAL_STYLE}" /> 
    <mx:RadioButton group="{styleGroup}" label="Small" value="{SMALL_STYLE}" /> 
</mx:Application>