我们如何动态更改DataGrid的字体大小和字体系列?

时间:2011-04-26 08:19:31

标签: actionscript-3 flex flex3

我有一个Flex Screen MyData.mxml,它有一个使用DataGrid的值表。 DataGrid的所有样式都包含在default.css文件中,该文件是Flex库项目的一部分。这将在swc文件中转换,并在我使用MyData.mxml的Flex项目中使用。

在MyData屏幕中,我们可以选择更改DataGrid的字体大小。我们有一个RadioButtonGroup,用户可以从两个选项按钮中选择:

  • 普通字体(Verdana,12)
  • 小字体(Verdana,11)

当用户选择“Normal Font”按钮时,DataGrid中的所有数据都应设置为Verdana 12,当用户选择Small Font选项按钮时,DataGrid中的所有数据都应设置为Verdana 11。

我怎样才能做到这一点?

1 个答案:

答案 0 :(得分: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>