Flex 学习小结（12）
1 richtexteditor控件
import mx.controls.Button;
/**
* 初始化
* */
private function InitApp():void
{
// 创建一个“打印”按钮
var but:Button = new Button();
but.label = "打印";
but.addEventListener("click",PrintDialog);
// 添加“打印”按钮到工具栏中
rte.toolbar.addChild(but);
}
<mx:RichTextEditor id="rte" x="10" y="10" title="Title" width="451">
2 文本框/多行文本框中选定被选择的文本
// 创建一个 TextRange 对象，获取选中的内容
var mySelect:TextRange = new TextRange(txtSelected, true);
lbSelected.text = mySelect.text;
其中txtselected为文本框的内容，如果要获得文本编辑器里的文本，则
lbSelected.htmlText = mySelected.htmlText;
3 一个文本编辑器例子
<![CDATA[
import mx.controls.Button;
/**
* 初始化，添加文本编辑器的设计和代码按钮
* */
private function InitApp():void
{
// 隐藏
taHtmlEditor.visible = false;
btnDesign1.visible = false;
btnCode1.visible = false;
// 创建设计按钮
var btnDesign:Button = new Button();
btnDesign.label = "设计";
btnDesign.addEventListener(MouseEvent.CLICK, btnDesign_Click);
// 创建代码按钮
var btnCode:Button = new Button();
btnCode.label = "代码";
btnCode.addEventListener(MouseEvent.CLICK, btnCode_Click);
// 添加两个按钮到文本编辑器的工具栏中
rteHtmlEditor.toolbar.addChild(btnDesign);
rteHtmlEditor.toolbar.addChild(btnCode);
}
/**
* 设计按钮的单击事件
* */
private function btnDesign_Click(e:MouseEvent):void
{
// 设置 taHtmlEditor 不可见
taHtmlEditor.visible = false;
// 设置两个按钮不可见
btnDesign1.visible = false;
btnCode1.visible = false;
// 设置 rteHtmlEditor 可见
rteHtmlEditor.visible = true;
}
/**
* 代码按钮的单击事件
* */
private function btnCode_Click(e:MouseEvent):void
{
// 设置 taHtmlEditor 可见
taHtmlEditor.visible = true;
// 设置两个按钮可见
btnDesign1.visible = true;
btnCode1.visible = true;
// 设置 rteHtmlEditor 不可见
rteHtmlEditor.visible = false;
}
/**
* 设计界面 change 事件
* */
private function rteHtmlEditor_change():void
{
// 同步两个视图中的内容
taHtmlEditor.text = rteHtmlEditor.htmlText;
}
/**
* 代码界面 change 事件
* */
private function taHtmlEditor_change():void
{
// 同步两个视图中的内容
rteHtmlEditor.htmlText = taHtmlEditor.text;
}
]]>
</mx:Script>
<mx:RichTextEditor id="rteHtmlEditor" x="10" y="10" title="Title" width="757"
height="385"
change="rteHtmlEditor_change()">
</mx:RichTextEditor>
<mx:TextArea id="taHtmlEditor" x="10" y="10" height="355" width="757"
change="taHtmlEditor_change()" fontSize="12"/>
<mx:Button id="btnDesign1" x="654" y="373" label="设计" click="btnDesign_Click
(event)"/>
<mx:Button id="btnCode1" x="710" y="373" label="代码" click="btnCode_Click(event)"/>
4 有图片的按钮
<mx:Button x="40" y="33" label="有图片的按钮"
icon="@Embed(source='assets/buttonIcon.jpg')"
fontSize="14"/>
5 复选框
<mx:CheckBox x="56" y="37" label="足球" fontSize="14" change="checkBox_change(event)"/>
private function checkBox_change(e:Event):void
{
// 判断该项目是否选中
if(e.target.selected)
{
// 获取选择的项目
lbItems.text = lbItems.text + e.target.label + " ";
}
6 设置弹出式菜单popupbutton
private function initApp():void
{
// 创建一个菜单
itMenu = new Menu();
// 定义一个数组对象，作为数据源
var dp:Object = [
{label:"台式机"},
{label:"笔记本"},
{label:"打印机"},
{label:"数码相机"}
];
// 菜单对象与数据源绑定
itMenu.dataProvider = dp;
itMenu.addEventListener("itemClick", itemClickHandler);
// 设置弹出的菜单
puBtnIT.popUp = itMenu;
}
/**
* 选择菜单事件
* */
private function itemClickHandler(event:MenuEvent):void
{
// 获取菜单选项内容
var label:String = event.item.label;
lbSelectItem.text = label;
// 设置按钮标签内容，并关闭菜单
puBtnIT.label = label;
puBtnIT.close();
// 设置菜单的索引为选项的索引值
itMenu.selectedIndex = event.index;
}
]]>
</mx:Script>
<mx:PopUpButton fontSize="14" id="puBtnIT" label="请选择产品类型"
creationComplete="initApp()" x="46" y="26" />
<mx:Label id="lbSelectItem" x="206" y="32" text="没有选择任何类型" fontSize="14" />
7 在LIST中嵌入图片
// 定义手机图标，并嵌入到程序中
[Embed(source="assets/mobileIcon.jpg")]
private var mobileSymbol:Class;
/**
* 初始化，绑定数据
* */
private function InitApp():void
{
// 定义数组
var mobileArr:Array =
[
{mobileIcon:mobileSymbol, mobile:"摩托罗拉",
ballot:"12.9%"},.............................
8 获得combox的点击
// 下拉列表控件的 change 事件
private function cmbCity_change(event:Event):void
{
// 设置 lbCity 文本控件的内容
lbCity.text = "城市编号：" +
event.currentTarget.selectedItem.data;
lbCity.text += " 城市名称：" +
event.currentTarget.selectedItem.label;
}
9 获得 datagrid的点击
private function itemClickHandle(event:ListEvent):void
{
// 获取城市名称
lbCity.text = event.currentTarget.selectedItem.city;
// 获取人口
lbPopu.text = event.currentTarget.selectedItem.population;
}
]]>
</mx:Script>
<mx:DataGrid id="dg" x="36" y="28" itemClick="itemClickHandle(event)">
10 DATAGRID控件的排序
<mx:RadioButtonGroup id="rbgCitySort" change="rbgCitySort_change(event)" />
<mx:RadioButton id="rbByCity" x="39" y="24" label="按城市排序"
groupName="rbgCitySort" fontSize="14"/>
<mx:RadioButton id="rbByPopu" x="142" y="24" label="按人口排序"
groupName="rbgCitySort" fontSize="14"/>
/**
* 按照城市名称和人口排序
* */
private function rbgCitySort_change(event:Event):void
{
// 创建 Sort 对象
var sortCity:Sort = new Sort();
// 创建两个 SortField 对象，并设置参数
var sortByCity:SortField = new SortField("city", true, true);
var sortByPopu:SortField = new SortField("population", true,
true, true);
// 获取单选按钮ID
var sortId:String = event.target.selection.id;
// 根据选择的类型，排序
switch(sortId)
{
case "rbByCity":
// 按城市排序
sortCity.fields = [sortByCity];
break;
case "rbByPopu":
// 按人口排序
sortCity.fields = [sortByPopu];
break;
default:
break;
}
// 排序
cityArrColl.sort = sortCity;
// 刷新数据集
cityArrColl.refresh();
}
]]>
这里也演示了如何获得一个 radiobuttongroup中的某个单选按钮
