`
hongyongqq
  • 浏览: 28826 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Flex 下拉树,时间控件的操作

    博客分类:
  • flex
 
阅读更多


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   xmlns:wg="com.webgriffe.components.*"
   creationComplete="onInit()"
   minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;

[Bindable]
public var xmlResult:XML;

[Bindable]
public var xmlList:XMLList;
private var selectedNode:XML;
[Bindable]
public var xmlTeams:XMLListCollection;
public var xmlService:HTTPService = new HTTPService();


[Bindable] 
private var today:Date = new Date(new Date().setHours(0,0,0,0)); 
[Bindable] 
private var start:Date = today; 
[Bindable] 
private var end:Date = start; 

private function onInit():void{
xmlService.url = "regtree.xml"                
xmlService.resultFormat = "e4x";
xmlService.addEventListener(ResultEvent.RESULT, resultHandler);
xmlService.send();
}
public function resultHandler(event:ResultEvent):void
{
xmlResult = XML(event.result);
xmlList = xmlResult.league;
xmlTeams = new XMLListCollection(xmlList);
}
private function treeChange(e:Event):void{ 


Alert.show("选择");
selectedNode = TreeComboBox(e.target).selectedItem as XML; 

}
private function onDateChangeHandler(event:Event):void
{

if(startDate.text == "")
{
startDate.selectedDate = start;
}
else
{
start = startDate.selectedDate;       
}

if(endDate.text == "")
{
endDate.selectedDate = this.end;
}
else
{
this.end = endDate.selectedDate;
}

}  
private function clear():void
{
txtSearch.text = "";
residentialNumber.text= "";
txtSearch.text= "";
residentialtType.text= "";
residentialtType.selectedItem=null;
cmbStyle.selectedItem=null;

cmbStyle.text= "";
startDate.text= "";
startDate.selectedDate=null;
endDate.selectedDate=null;
endDate.text= "";
treecombox.selectedItem=null;
treecombox.text= "";
}
]]>
</fx:Script>
<s:Group id="textInput"
width="100%" height="100%"
visible="true"
>
<s:layout>
<s:VerticalLayout gap="10" horizontalAlign="center"/>
</s:layout>

<s:RichEditableText id="txtLabelText"
width="100%"
editable="false"
text=""
textAlign="center"/>
<s:HGroup width="100%" horizontalAlign="center">
<s:Label text="小区编号" /><s:TextInput id="residentialNumber"  width="130"/>
<s:Label text="小区名称"   />
<s:TextInput id="txtSearch"  width="130"/>
</s:HGroup>

<s:HGroup width="100%" horizontalAlign="center">
<s:Label text="小区类型" /><mx:ComboBox  id="residentialtType"  width="130" >
  
   <fx:Object label="公共机构" value="公共机构"/>
   <fx:Object label="住宅" value="住宅"/>
   <fx:Object label="商业" value="商业"/>
   <fx:Object label="商住两用" value="商住两用"/>
   <fx:Object label="工业厂房" value="工业厂房"/>
   <fx:Object label="公共设施" value="公共设施"/>
   <fx:Object label="非独立" value="非独立"/>
   <fx:Object label="其它" value="其它"/>
   </mx:ComboBox>
<s:Label text="达标情况" /><mx:ComboBox  id="cmbStyle"  width="130" >
   <fx:Object label="达标小区" value="1"/>
   <fx:Object label="未达标小区" value="2"/>
   <fx:Object label="城中村" value="3"/>
   <fx:Object label="其它" value="4"/>
   </mx:ComboBox> </s:HGroup>

<s:HGroup width="100%" horizontalAlign="center">
<s:Label text="开始时间" />
<mx:DateField id="startDate" selectableRange="{{rangeEnd:end}}" change="onDateChangeHandler(event)" width="130" dayNames="[日,一,二,三,四,五,六]" monthNames="[一,二,三,四,五,六,七,八,九,十,十一,十二]" formatString="YYYY-MM-DD" showToday="true"/>
<s:Label text="结束时间" />
<!--   selectedDate="{new Date()} -->
<mx:DateField id="endDate"  selectableRange="{{rangeStart:start,rangeEnd:today}}"  change="onDateChangeHandler(event)" width="130" dayNames="[日,一,二,三,四,五,六]" monthNames="[一,二,三,四,五,六,七,八,九,十,十一,十二]" formatString="YYYY-MM-DD" showToday="true" />
</s:HGroup>

<s:HGroup width="50%" horizontalAlign="center">
<s:Label text="行政区划" />

<wg:TreeComboBox id="treecombox"
name="treecomboxname"
prompt="请选择..."
change="treeChange"
width="100%" treeHeight="250"
dataProvider="{xmlTeams}"
labelField="@label" />
</s:HGroup>
<s:HGroup width="100%" horizontalAlign="center">
<s:Button  label="确定"/>
<s:Button click="clear()" label="清除"/>
</s:HGroup>
</s:Group>

</s:Application>

------combox tree渲染

package com.webgriffe.components
{
import mx.controls.Alert;
import mx.controls.ComboBox;
import mx.controls.Tree;
import mx.core.ClassFactory;
import mx.events.DropdownEvent;
import mx.events.ListEvent;
import mx.events.TreeEvent;



[Event(name="rendererItemClick", type="com.esri.viewer.AppEvent")]
public class TreeComboBox extends ComboBox
{
// -------------------------------------------------------------------------
//
// Properties
//
// -------------------------------------------------------------------------

// ----------------------------
// ddFactory
// ----------------------------

private var _ddFactory:ClassFactory;

private function get ddFactory():ClassFactory
{
if (_ddFactory == null)
{
_ddFactory = new ClassFactory();
_ddFactory.generator = TreeComboBoxRenderer;
_ddFactory.properties = {
id:"treerenderId",
width:this.width,
height:this._treeHeight,
outerDocument:this
};
}
return _ddFactory;
}

// ----------------------------
// treeHeight
// ----------------------------

private var _treeHeight:Number;

public function get treeHeight():Number
{
return _treeHeight;
}

public function set treeHeight(value:Number):void
{
this._treeHeight = value;
ddFactory.properties["height"] = this._treeHeight;
}

// ----------------------------
// treeSelectedItem
// ----------------------------

public var treeSelectedItem:Object;

// -------------------------------------------------------------------------
//
// Constructor
//
// -------------------------------------------------------------------------

public function TreeComboBox()
{
super();

this.dropdownFactory = ddFactory;

this.addEventListener(DropdownEvent.OPEN, onComboOpen);

}

private function treeOpenHandler(e:TreeEvent):void
{
Alert.show("提示");
}
// -------------------------------------------------------------------------
//
// Handlers
//
// -------------------------------------------------------------------------

private function onComboOpen(event:DropdownEvent):void
{

var tree:TreeComboBoxRenderer = dropdown as TreeComboBoxRenderer;
if (treeSelectedItem)
{
tree.expandParents(treeSelectedItem);
tree.selectNode(treeSelectedItem);
}
else
{

//tree.expandItem(dataProvider.getItemAt(0), true);
}
}



// -------------------------------------------------------------------------
//
// Overridden methods
//
// -------------------------------------------------------------------------

/**
* Ovverride to avoid root node label being displayed as combo text when
* closing the combo box.
*/
override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);  

if(dropdown && treeSelectedItem && treeSelectedItem[labelField] != null)
{  
        text = treeSelectedItem[labelField];
   }
}

// -------------------------------------------------------------------------
//
// Other functions
//
// -------------------------------------------------------------------------

public function updateLabel(selectedItem:Object):void
{
if (selectedItem)
{
treeSelectedItem = selectedItem;
text = treeSelectedItem[labelField];
}
}

}
}

------combox tree渲染

package com.webgriffe.components
{

import flash.events.DataEvent;

import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.controls.Tree;
import mx.events.ListEvent;
import mx.events.TreeEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.remoting.Operation;
import mx.rpc.remoting.RemoteObject;

public class TreeComboBoxRenderer extends Tree
{
// -------------------------------------------------------------------------
//
// Properties
//
// -------------------------------------------------------------------------

[Bindable]
public var outerDocument:TreeComboBox;

// 渲染器点击事件处理标示
public const RENDERER_ITEM_CLICK : String = "rendererItemClick" ;


private var mobile:RemoteObject; 

// -------------------------------------------------------------------------
//
// Constructor
//
// -------------------------------------------------------------------------

public function TreeComboBoxRenderer()
{
super();
this.addEventListener(ListEvent.CHANGE, onSelectionChanged);
//点击展开+ 事件。暂时不用
//this.addEventListener(TreeEvent.ITEM_OPEN, treeOpenHandler);
}


private function treeOpenHandler(event:TreeEvent):void
{
//if(outerDocument)
//outerDocument.dispatchEvent(new  AppEvent(RENDERER_ITEM_CLICK,event)); // 派发事件    bubbles
// dispatchEvent(new Event(RENDERER_ITEM_CLICK, true)); // 派发事件    bubbles
}


// -------------------------------------------------------------------------
//
// Handlers
//
// -------------------------------------------------------------------------

private function onSelectionChanged(event:ListEvent):void
{
outerDocument.updateLabel(event.currentTarget.selectedItem);
}

// -------------------------------------------------------------------------
//
// Other methods
//
// -------------------------------------------------------------------------

public function expandParents(node:Object):void
{

if (node && !isItemOpen(node))
{

expandItem(node, true);
            expandParents(node.parent());
        }
}

public function selectNode(node:Object):void
{


selectedItem = node;
var idx:int = getItemIndex(selectedItem);
    scrollToIndex(idx);
}
}
}

  • 大小: 30.8 KB
分享到:
评论

相关推荐

    Flex ComboBox 树形控件

    Flex ComboBox 是一种强大的用户界面组件,它结合了下拉列表(ComboBox)和树形结构(Tree)的功能,为用户提供了一种交互式的数据选择方式。在Flex应用中,这种控件通常用于显示层次化的数据,允许用户从多个层级的...

    flex3.5时间控件(含时分秒)

    在Flex 3.5开发环境中,时间控件是构建用户界面时不可或缺的一部分,尤其是在需要用户输入或选择特定时间的情况下。本篇文章将详细讲解如何在Flex 3.5中创建一个包含时、分、秒的时间选择器,以及如何进行实际应用。...

    flex下拉dataGrid

    在Flex中,下拉控件(Dropdown)通常由ComboBox或List控件实现,而数据网格(DataGrid)则用于显示和操作结构化的表格数据。要实现“带dataGrid的自定义下拉控件”,我们需要对这两个组件进行组合和定制,创建一个...

    Flex 自定义时间控件 功能很全

    4. **可访问性**:遵循无障碍标准,使视力障碍的用户也能方便地操作时间控件。 5. **样式定制**:允许开发者通过CSS改变控件的外观,包括字体、颜色、背景等。 `Flex-自定义时间控件.docx` 文件可能是关于这个...

    flex拖动树形

    在本案例中,我们关注的是一个特定的实现——"flex拖动树形",这是一种允许用户通过拖放操作在两个区域之间移动节点的自定义树形控件。 拖放功能是人机交互中常见的一种交互模式,用于在界面上移动元素,常用于文件...

    flex DataTimePicker时间控件

    "flex DataTimePicker时间控件"是一个专为Adobe Flex平台设计的组件,用于帮助用户方便地选择日期和时间。Flex是一个开放源代码的框架,主要用于构建富互联网应用程序(RIA),它基于ActionScript编程语言和MXML标记...

    Flex时间选择控件 精确到时分秒

    Flex时间选择控件是Adobe Flex框架中用于处理用户界面中时间输入的一种组件,它允许用户以小时、分钟和秒为单位进行精确的选择。在Flex应用开发中,这种控件对于那些需要用户输入特定时间信息的场景非常实用,比如...

    flex带时间的日期控件,直接使用

    1. **日期和时间选择**:控件应该提供一个用户友好的界面,让用户可以轻松选择日期和时间,例如通过下拉日历和24小时制的时间选择器。 2. **格式化输出**:根据需求,控件应能将选定的日期和时间以指定的格式(如...

    flex可选择时间的日历控件

    flex自带的日期控件是没有时间选择的,本控件集成了时间的选择,另外时间的选择实现了可手动输入,输入的值可以定位下拉列表框. 导入方便,引用方便,提供多种输出格式. 经过测试完全OK,并且该控件已经应用于我们公司的...

    flex 下拉 带复选框 多选

    在Flex编程中,"flex 下拉 带复选框 多选" 是一个常见的组件需求,主要用于创建具有多选功能的下拉列表。在Flex中,我们可以利用两种主要的组件来实现这样的功能:ComboBox和DropDownList。这两种组件都是用户界面...

    flex 3 所有可视控件实例

    1. Alert:Alert 控件用于显示警告或确认对话框,通常包含“确定”和“取消”按钮,以提示用户进行操作。 2. Colorpicker:Colorpicker 控件允许用户选择颜色,常用于颜色配置或设置背景色等场景。 3. Combobox:...

    非常实用的日期时间控件

    本资源“非常实用的日期时间控件”显然是一个专注于日期和时间选择的组件,适用于FLEX平台。FLEX是一种基于Adobe Flex框架的开发工具,用于构建富互联网应用程序(RIA),它提供了丰富的UI组件库。 在FLEX中,日期...

    flex 日期控件可选时分秒

    在Flex编程中,日期控件(DateTimeField)是用于用户输入日期和时间的交互元素,它允许用户选择日期、小时、分钟以及秒。这个控件是Adobe Flex框架的一部分,为Web应用程序提供了丰富的用户体验。在本篇文章中,我们...

    flex3 自动提示控件

    `Combobox`是Flex3中内置的一个控件,它结合了输入文本框和下拉列表的功能,可以作为简单的自动提示解决方案。用户可以输入文本,也可以从下拉列表中选择已有的选项。`Combobox`的`dataProvider`属性用于设置数据源...

    flex组件,功能强大的下拉框

    下拉框(Dropdown)是用户界面中常见的一种控件,用于显示一个可选列表。在Flex下拉框组件中,用户可以通过点击按钮展开一个包含多个选项的列表,选择其中一个或多个进行设置。 3. **级联选择** 级联选择是指在一...

    flex常用自定义控件,带复选框的树和列表等等。

    在给定的标题和描述中,我们可以看到开发者分享了一系列在实际项目中常用的Flex自定义控件,这些控件包括但不限于带复选框的树和列表、树形下拉框、Tab导航菜单以及开关门效果。接下来,我们将详细探讨这些知识点。 ...

    Flex 写的一个combox多选控件

    在Flex编程领域,Combox(组合框)是一种常用的UI组件,它结合了下拉列表和文本输入框的功能,用户可以在下拉列表中选择一个或多个选项。本篇将详细讲解如何在Flex中创建一个支持多选功能的Combox控件,并基于提供的...

    Flex4 DataGrid控件行编辑项目

    ComboBox控件是一个下拉列表选择框,用户可以在输入框中选择或输入值。在DataGrid的行编辑中,将ComboBox嵌入到特定列可以提供更丰富的数据选择。例如,对于一个状态字段,ComboBox可以预设“已处理”、“未处理”等...

    FLEX 年月日时分日期自定义控件

    DateTimePicker控件可能包含年、月、日、时和分的下拉列表,允许用户轻松选择特定的日期和时间。此外,它可能还支持自定义格式化,以便以用户期望的格式显示日期和时间。 **5. 引入和使用** 由于该控件是.mxml文件...

    flex checkboxtree复选树形下拉框

    在Flex开发中,"flex checkboxtree复选树形下拉框"是一种常见的用户界面组件,它结合了树形结构和复选框的功能,允许用户在层次结构中进行多选操作。这种组件通常用于数据筛选、配置设置或者层级分类的选择场景。在...

Global site tag (gtag.js) - Google Analytics