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

flex4 下拉框中带有单选和复选功能的树

    博客分类:
  • flex
 
阅读更多
flex3中有dropdownFactory,可以很好的构建,但在felx4中没有dropdownFactory了,只好自己写,下面的源码

ComboBoxWithTree.as文件:

package com.components.ds {
import flash.display.Sprite;
import flash.geom.Point;

import mx.collections.IList;
import mx.controls.Tree;
import mx.core.FlexGlobals;
import mx.managers.PopUpManager;

import spark.components.ComboBox;
import spark.events.DropDownEvent;

public class DseComboBoxWithTree extends ComboBox {
private var _tree:*;
private var __dataProvider:IList;
private var _dropDownWidth:int;
private var _dropDownHeight:int;
/*private var _selectedItems:Array;*/
/*是否允许多选*/
private var _allowMultipleSelection:Boolean;
private var _dataField:String;

/*private var _selectedItem:Object;*/

override protected function createChildren():void {
addEventListener(DropDownEvent.OPEN, dropDownControllerOpenHandler);
addEventListener(DropDownEvent.CLOSE, dropDownControllerCloseHandler);
super.createChildren();
}

override public function set dataProvider(value:IList):void {
__dataProvider = value;
}

private function dropDownControllerOpenHandler(event:DropDownEvent):void {
trace('open......................')
if (!_tree) {
if (_allowMultipleSelection) {
_tree = new DseCheckTree();
} else {
_tree = new DseTree();
DseTree(_tree).itemClickHandler = itemClickHandler;
}
_tree.dataProvider = __dataProvider;
_tree.labelField = this.labelField;
_tree.width = _dropDownWidth ? _dropDownWidth : this.width;
_tree.height = _dropDownHeight ? _dropDownHeight : 150;
}
popUpTree();
}

/**
* 定位弹出窗口
*
*/
private function popUpTree():void {
trace('position......................');
_tree.x = this.dropDownController.dropDown.x;
_tree.y = this.dropDownController.dropDown.y;
PopUpManager.addPopUp(_tree, this);

}

private function dropDownControllerCloseHandler(event:DropDownEvent):void {
trace('close......................')
if (_tree) {
PopUpManager.removePopUp(_tree);
if (_tree is DseCheckTree && _tree.dataProvider) {
if (_allowMultipleSelection) {
var items:Array = [];
var names:Array = [];
getSelectedValue(_tree.dataProvider, items);
for each (var obj:Object in items) {
names.push(obj[_tree.labelField]);
}
}
this.textInput.text = names.join(',');
} else {
this.textInput.text = _tree.selectedItem ? _tree.selectedItem[_tree.labelField] : '';
}
}
}

private function itemClickHandler(event:ListEvent):void {
this.dropDownController.closeDropDown(false)
}

/**
* 获取树中选择的对象
* @param array
* @param items
*
*/
private function getSelectedValue(array:*, items:*):void {
if (array) {
for each (var obj:Object in array) {
if (obj[_tree.checkBoxStateField] == '1') {
items.push(obj);
}
getSelectedValue(obj.children, items);
}
}
}

public function set dropDownWidth(value:int):void {
_dropDownWidth = value;
}

public function set dropDownHeight(value:int):void {
_dropDownHeight = value;
}

/** 单选时获取当前选择的对象 */
override public function get selectedItem():* {
if (_tree && _tree is DseTree) {
return DseTree(_tree).selectedItem;
}
return super.selectedItem;
}

/** 多选时获取当前选择的对象 */
override public function get selectedItems():Vector.<Object> {
if (_tree && _tree is DseCheckTree) {
var items:Vector.<Object> = new Vector.<Object>();
getSelectedValue(DseCheckTree(_tree).dataProvider, items);
return items;
}
return super.selectedItems;
}

/** 单选时获取当前选择的值 */
public function getValue(name:String = null):String {
return selectedItem ? selectedItem[name ? name : _dataField] : null;
}

/** 多选时获取当前选择的值 */
public function getValues(name:String = null, separator:String = ','):String {
var items:Vector.<Object> = selectedItems;
var v:Array = []
if (items) {
for each (var o:Object in items) {
v.push(o[name ? name : _dataField]);
}
}
return v.join(separator);
}

/** 单选时设置默认值 */
public function setValue(v:String):void {
if (_tree && _tree is DseTree && DseTree(_tree).dataProvider) {
for each (var o:Object in _tree.dataProvider) {
if (o[dataField] == v) {
this.textInput.text = o[labelField];
DseTree(_tree).selectedItem = o;
}
}
}
}

/** 多选时设置默认值 */
public function setValues(v:String, separator:String = ','):void {
var selectedArray:ArrayCollection = new ArrayCollection(v.split(','));
var names:Array = [];
if (_tree && _tree is DseCheckTree && DseCheckTree(_tree).dataProvider) {
setSelectedValue(_tree.dataProvider, names, selectedArray);
}
this.textInput.text = names.join(separator);
}

private function setSelectedValue(array:*, items:Array, selectedArray:ArrayCollection):void {
if (array) {
for each (var obj:Object in array) {
if (obj[dataField] && selectedArray.contains(obj[dataField])) {
obj[_tree.checkBoxStateField] = '1'
items.push(obj[labelField]);
}
setSelectedValue(obj.children, items, selectedArray);
}
}
}

override public function get allowMultipleSelection():Boolean {
return _allowMultipleSelection;
}

override public function set allowMultipleSelection(value:Boolean):void {
_allowMultipleSelection = value;
}

public function get dataField():String {
return _dataField;
}

public function set dataField(value:String):void {
_dataField = value;
}
}
}

import com.dse.common.tree.CheckLineTree;
import com.dse.components.ds.DseComboBoxWithTree;

import flash.events.MouseEvent;

import mx.collections.IList;
import mx.containers.Canvas;
import mx.controls.Tree;
import mx.events.FlexEvent;
import mx.events.FlexMouseEvent;
import mx.events.ListEvent;

import spark.events.DropDownEvent;

class DseTree extends Canvas {
private var _tree:Tree;
private var _dataProvider:IList;
private var _labelField:String;
private var _selectedItem:Object;
private var _itemClickHandler:Function;

function DseTree():void {
_tree = new Tree();
this.addChild(_tree);
_tree.percentHeight = 100;
_tree.percentWidth = 100;
addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
e.stopImmediatePropagation();
});
addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
e.stopImmediatePropagation();
});
_tree.addEventListener(ListEvent.ITEM_CLICK, function(event:ListEvent):void {
_itemClickHandler(event);
});
}


public function get dataProvider():IList {
return IList(_tree.dataProvider);
}

public function set dataProvider(value:IList):void {
_tree.dataProvider = value;
}

public function get labelField():String {
return _tree.labelField;
}

public function set labelField(value:String):void {
_tree.labelField = value;
}

public function get selectedItem():Object {
return _tree.selectedItem;
}

public function set selectedItem(value:Object):void {
_tree.selectedItem = value;
}

public function set itemClickHandler(value:Function):void {
_itemClickHandler = value;
}

}

class DseCheckTree extends Canvas {
private var _tree:CheckLineTree;
private var _dataProvider:IList;
private var _checkBoxStateField:String;
private var _labelField:String;

function DseCheckTree():void {
_tree = new CheckLineTree();
this.addChild(_tree);
_tree.percentHeight = 100;
_tree.percentWidth = 100;
addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void {
e.stopImmediatePropagation();
});
addEventListener(MouseEvent.MOUSE_DOWN, function(e:MouseEvent):void {
e.stopImmediatePropagation();
});
}

public function set dataProvider(value:IList):void {
_tree.dataProvider = value;
}

public function get dataProvider():IList {
return IList(_tree.dataProvider);
}

public function get checkBoxStateField():String {
return _tree.checkBoxStateField;
}

public function set checkBoxStateField(value:String):void {
_tree.checkBoxStateField = value;
}

public function get labelField():String {
return _tree.labelField;
}

public function set labelField(value:String):void {
_tree.labelField = value;
}
}


CheckLineTree.as文件:
package com.dse.common.tree{
import mx.core.ClassFactory;
import mx.events.ListEvent;

/**
* 三状态复选框树控件
*


*/
public class CheckLineTree extends Tree {
//数据源中状态字段  
private var _checkBoxStateField:String = "@checked";

//部分选中的填充色  
[Bindable]
private var m_checkBoxBgColor:uint = 0x009900;

//填充色的透明度  
[Bindable]
private var m_checkBoxBgAlpha:Number = 1;

//填充色的边距  
[Bindable]
private var m_checkBoxBgPadding:Number = 3;

//填充色的四角弧度  
[Bindable]
private var m_checkBoxBgElips:Number = 2;

//取消选择是否收回子项  
[Bindable]
private var m_checkBoxCloseItemsOnUnCheck:Boolean = true;

//选择项时是否展开子项  
[Bindable]
private var m_checkBoxOpenItemsOnCheck:Boolean = false;

//选择框左边距的偏移量  
[Bindable]
private var m_checkBoxLeftGap:int = 8;

//选择框右边距的偏移量  
[Bindable]
private var m_checkBoxRightGap:int = 10;

//是否显示三状态  
[Bindable]
private var m_checkBoxEnableState:Boolean = true;
//子项选择一部份时,是否自动选择父项 m_checkBoxCascadeOnChild=true时,m_checkBoxEnableState失效
[Bindable]
private var m_checkBoxCascadeOnChild:Boolean = false;

//与父项子项关联  
[Bindable]
private var m_checkBoxCascadeOnCheck:Boolean = true;

//点击Item时用来判断点击的是否是复选框。
public var ischeckBoxChecked:Boolean = false;

//双击项目  
public var itemDClickSelect:Boolean = true;

public function CheckLineTree() {
super();
doubleClickEnabled = true;
}

override protected function createChildren():void {
var myFactory:ClassFactory = new ClassFactory(CheckLineTreeRenderer);
this.itemRenderer = myFactory;
super.createChildren();
addEventListener(ListEvent.ITEM_DOUBLE_CLICK,onItemDClick);
}

public function PropertyChange():void {
dispatchEvent(new ListEvent(mx.events.ListEvent.CHANGE));
}


/**
* 树菜单,双击事件
* @param evt 双击事件源
*
*/
public function onItemDClick(e:ListEvent):void {
if (itemDClickSelect)
OpenItems();
}

/**
* 打开Tree节点函数,被 有打开节点功能的函数调用
* @param item  要打开的节点
*
*/
public function OpenItems():void {
if (this.selectedIndex >= 0 && this.dataDescriptor.isBranch(this.selectedItem))
this.expandItem(this.selectedItem,!this.isItemOpen(this.selectedItem)
,true);
}

/**
* 数据源中状态字段
* @return
*/
[Bindable]
public function get checkBoxStateField():String {
return _checkBoxStateField;
}

public function set checkBoxStateField(v:String):void {
_checkBoxStateField = v;
//PropertyChange();
}

/**
* 部分选中的填充色
* @return
*/
[Bindable]
public function get checkBoxBgColor():uint {
return m_checkBoxBgColor;
}

public function set checkBoxBgColor(v:uint):void {
m_checkBoxBgColor = v;
//PropertyChange();
}

/**
* 填充色的透明度
* @return
*
*/
[Bindable]
public function get checkBoxBgAlpha():Number {
return m_checkBoxBgAlpha;
}

public function set checkBoxBgAlpha(v:Number):void {
m_checkBoxBgAlpha = v;
//PropertyChange();
}


/**
* 填充色的边距
* @return
*/
[Bindable]
public function get checkBoxBgPadding():Number {
return m_checkBoxBgPadding;
}

public function set checkBoxBgPadding(v:Number):void {
m_checkBoxBgPadding = v;
//PropertyChange();
}

/**
* 填充色的四角弧度
* @return
*/
[Bindable]
public function get checkBoxBgElips():Number {
return m_checkBoxBgElips;
}

public function set checkBoxBgElips(v:Number):void {
m_checkBoxBgElips = v;
//PropertyChange();
}


/**
* 取消选择是否收回子项
* @return
*/
[Bindable]
public function get checkBoxCloseItemsOnUnCheck():Boolean {
return m_checkBoxCloseItemsOnUnCheck;
}

public function set checkBoxCloseItemsOnUnCheck(v:Boolean):void {
m_checkBoxCloseItemsOnUnCheck = v;
//PropertyChange();
}


/**
* 选择项时是否展开子项
* @return
*/
[Bindable]
public function get checkBoxOpenItemsOnCheck():Boolean {
return m_checkBoxOpenItemsOnCheck;
}

public function set checkBoxOpenItemsOnCheck(v:Boolean):void {
m_checkBoxOpenItemsOnCheck = v;
//PropertyChange();
}


/**
* 选择框左边距的偏移量
* @return
*/
[Bindable]
public function get checkBoxLeftGap():int {
return m_checkBoxLeftGap;
}

public function set checkBoxLeftGap(v:int):void {
m_checkBoxLeftGap = v;
//PropertyChange();
}

/**
* 选择框右边距的偏移量
* @return
*/
[Bindable]
public function get checkBoxRightGap():int {
return m_checkBoxRightGap;
}

public function set checkBoxRightGap(v:int):void {
m_checkBoxRightGap = v;
//PropertyChange();
}


/**
* 是否显示三状态
* @return
*/
[Bindable]
public function get checkBoxEnableState():Boolean {
return m_checkBoxEnableState;
}

public function set checkBoxEnableState(v:Boolean):void {
m_checkBoxEnableState = v;
//PropertyChange();
}
/**
*
* @return
*/
[Bindable]
public function get checkBoxCascadeOnChild():Boolean {
return m_checkBoxCascadeOnChild;
}

public function set checkBoxCascadeOnChild(v:Boolean):void {
m_checkBoxCascadeOnChild = v;
//PropertyChange();
}



/**
* 与父项子项关联
* @return
*/
[Bindable]
public function get checkBoxCascadeOnCheck():Boolean {
return m_checkBoxCascadeOnCheck;
}

public function set checkBoxCascadeOnCheck(v:Boolean):void {
m_checkBoxCascadeOnCheck = v;
//PropertyChange();
}
}

}

CheckLineTreeRenderer.as文件:
package com.dse.common.tree {

import flash.display.BitmapData;
import flash.display.Graphics;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import mx.collections.*;
import mx.controls.CheckBox;
import mx.controls.Tree;
import mx.controls.listClasses.*;
import mx.controls.treeClasses.*;
import mx.events.FlexEvent;
import mx.events.ListEvent;

/**
* Alpha value for the Tree lines.
* @default 1
*/
[Style(name = "lineAlpha", type = "Number", format = "Length", inherit = "no")]

/**
* Color of the Tree lines.
* @default 0x808080
*/
[Style(name = "treeLineColor", type = "uint", format = "Color", inherit = "no")]

/**
* Thickness value for the Tree lines.
* @default 1
*/
[Style(name = "lineThickness", type = "Number", format = "Length", inherit = "no")]

/**
* The Tree line style - none, dotted (default), or solid.
* @default "dotted"
*/
[Style(name = "lineStyle", type = "String", enumeration = "dotted,solid,none", inherit = "no")]

/**
* 三状态复选框树控件
*/
public class CheckLineTreeRenderer extends TreeItemRenderer {

/**
* STATE_SCHRODINGER : 部分子项选中

* STATE_CHECKED :     全部子项选中

* STATE_UNCHECKED :   全部子项未选中

*/
static private var STATE_SCHRODINGER:int = 2;
static private var STATE_CHECKED:int = 1;
static private var STATE_UNCHECKED:int = 0;

public static const DOTTED:String = "dotted"; // default
public static const SOLID:String = "solid";
public static const NONE:String = "none";

protected var myCheckBox:CheckBox;
private var myTree:CheckLineTree;

public function CheckLineTreeRenderer() {
super();
mouseEnabled = true;
}

/**
* 初始化完成时处理复选框和图片对象
*
*/
override protected function createChildren():void {
myCheckBox = new CheckBox();
addChild(myCheckBox);
myCheckBox.addEventListener(MouseEvent.CLICK, checkBoxToggleHandler);

myTree = this.owner as CheckLineTree;
super.createChildren();
myTree.addEventListener(ListEvent.CHANGE, onPropertyChange);
}

protected function onPropertyChange(e:ListEvent = null):void {
this.updateDisplayList(unscaledWidth, unscaledHeight);
}

/**
* 递归设置父项目的状态
* @param item 项目
* @param tree 树对象
* @param state 目标状态
*
*/
private function toggleParents(item:Object, tree:Tree, state:int):void {
if (item == null)
return;
else {
var stateField:String = myTree.checkBoxStateField;
var tmpTree:IList = myTree.dataProvider as IList;
var oldValue:Number = item[stateField] as Number;
var newValue:Number = state as Number;

item[myTree.checkBoxStateField] = state;
tmpTree.itemUpdated(item, stateField, oldValue, newValue);

var parentItem:Object = tree.getParentItem(item);

if (null != parentItem)
toggleParents(parentItem, tree, getState(tree, parentItem));
}
}

/**
* // TODO : 设置项目的状态和子项的状态
* @param item 项目
* @param tree 树对象
* @param state 目标状态
*
*/
private function toggleChildren(item:Object, tree:Tree, state:int):void {
if (item == null)
return;
else {
var stateField:String = myTree.checkBoxStateField;
var tmpTree:IList = myTree.dataProvider as IList;
var oldValue:Number = item[stateField] as Number;
var newValue:Number = state as Number;

item[myTree.checkBoxStateField] = state;
tmpTree.itemUpdated(item, stateField, oldValue, newValue);

var treeData:ITreeDataDescriptor = tree.dataDescriptor;

if (myTree.checkBoxCascadeOnCheck && treeData.hasChildren(item)) {
var children:ICollectionView = treeData.getChildren(item);
var cursor:IViewCursor = children.createCursor();

while (!cursor.afterLast) {
toggleChildren(cursor.current, tree, state);
cursor.moveNext();
}
}
}
}

/**
* 获得parent的状态
* @param tree 树对象
* @param parent 目标项
* @return 状态
*/
private function getState(tree:Tree, parent:Object):int {
var noChecks:int = 0;
var noCats:int = 0;
var noUnChecks:int = 0;

if (parent != null) {
var treeData:ITreeDataDescriptor = tree.dataDescriptor;
var cursor:IViewCursor = treeData.getChildren(parent).createCursor();

while (!cursor.afterLast) {
if (cursor.current[myTree.checkBoxStateField] == STATE_CHECKED)
noChecks++;
else if (cursor.current[myTree.checkBoxStateField] == STATE_UNCHECKED)
noUnChecks++;
else
noCats++;
cursor.moveNext();
}
}

if (myTree.checkBoxCascadeOnChild) {
return STATE_CHECKED;
} else if ((noChecks > 0 && noUnChecks > 0) || noCats > 0)
return STATE_SCHRODINGER;
else if (noChecks > 0)
return STATE_CHECKED;
else
return STATE_UNCHECKED;
}

/**
* 设置项目的父项状态和子项状态
* @param event 事件
* 点击的是ITME的复选框。设置为true
*/
private function checkBoxToggleHandler(event:MouseEvent):void {
myTree.ischeckBoxChecked = true;

if (data) {
var myListData:TreeListData = TreeListData(this.listData);
var selectedNode:Object = myListData.item;

myTree = myListData.owner as CheckLineTree;
var toggle:Boolean = myCheckBox.selected;

if (toggle) {
toggleChildren(data, myTree, STATE_CHECKED);
} else {
toggleChildren(data, myTree, STATE_UNCHECKED);
}

//如果所有子项选中时需要选中父项则执行以下代码  
if (myTree.checkBoxCascadeOnCheck) {
var parent:Object = myTree.getParentItem(data);

if (null != parent)
toggleParents(parent, myTree, getState(myTree, parent));
}
}
myTree.dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}

/**
* 设置本项的复选框状态
* @param checkBox 复选框
* @param value
* @param state 状态
*/
private function setCheckState(checkBox:CheckBox, value:Object, state:int):void {
if (state == STATE_CHECKED)
checkBox.selected = true;
else if (state == STATE_UNCHECKED)
checkBox.selected = false;
else if (state == STATE_SCHRODINGER)
checkBox.selected = false;
}

override public function set data(value:Object):void {
if (value != null) {
super.data = value;
setCheckState(myCheckBox, value, value[myTree.checkBoxStateField]);
}
}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);

if (super.data) {
if (super.icon != null) {
myCheckBox.x = super.icon.x + myTree.checkBoxLeftGap;
myCheckBox.y = (height - myCheckBox.height) / 2;
super.icon.x = myCheckBox.x + myCheckBox.width + myTree.checkBoxRightGap;
super.label.x = super.icon.x + super.icon.width + 3;
} else {
myCheckBox.x = super.label.x + myTree.checkBoxLeftGap;
myCheckBox.y = (height - myCheckBox.height) / 2;
super.label.x = myCheckBox.x + myCheckBox.width + myTree.checkBoxRightGap;
}

setCheckState(myCheckBox, data, data[myTree.checkBoxStateField]);

if (myTree.checkBoxEnableState && data[myTree.checkBoxStateField] == STATE_SCHRODINGER) {
fillCheckBox(true);
} else
fillCheckBox(false);
}

if ((unscaledWidth > 0) && (unscaledHeight > 0)) {
var tree:Tree = (owner as Tree);
var desc:ITreeDataDescriptor = tree.dataDescriptor;
var currentNode:Object = data;
var parentNode:Object = tree.getParentItem(currentNode);

var levelsUp:int = 0;

var lineStyle:String = getStyle("lineStyle");
var lineColor:uint = getColorStyle("treeLineColor", 0x808080);
var lineAlpha:Number = getNumberStyle("lineAlpha", 1);
var lineThickness:Number = getNumberStyle("lineThickness", 1);
var indentation:Number = tree.getStyle("indentation");

var shift:int = (parentNode == null ? 2 : 6) + lineThickness;
if (icon) {
icon.move(icon.x + shift, icon.y);
}
if (label) {
label.move(label.x + shift, label.y);
}

var g:Graphics = graphics;
g.clear();

if ((lineStyle != NONE) && (lineAlpha > 0) && (lineThickness > 0)) {
while (parentNode != null) {
var children:ICollectionView = desc.getChildren(parentNode);
if (children is IList) {
var itemIndex:int = (children as IList).getItemIndex(currentNode);
var isLast:Boolean = (itemIndex == (children.length - 1));
drawLines(g, unscaledWidth, unscaledHeight, lineStyle, lineColor, lineAlpha, lineThickness, isLast, levelsUp, indentation);

levelsUp++;
currentNode = parentNode;
parentNode = tree.getParentItem(parentNode);
} else {
break;
}
}
}
}
}

protected function fillCheckBox(isFill:Boolean):void {
myCheckBox.graphics.clear();

if (isFill) {
var myRect:Rectangle = getCheckTreeBgRect(myTree.checkBoxBgPadding);
myCheckBox.graphics.beginFill(myTree.checkBoxBgColor, myTree.checkBoxBgAlpha)
myCheckBox.graphics.drawRoundRect(myRect.x, myRect.y, myRect.width, myRect.height, myTree.checkBoxBgElips, myTree.checkBoxBgElips);
myCheckBox.graphics.endFill();
}
}

protected function getCheckTreeBgRect(checkTreeBgPadding:Number):Rectangle {
var myRect:Rectangle = myCheckBox.getBounds(myCheckBox);
myRect.top += checkTreeBgPadding;
myRect.left += checkTreeBgPadding;
myRect.bottom -= checkTreeBgPadding;
myRect.right -= checkTreeBgPadding;
return myRect;
}

protected function drawLines(g:Graphics, w:Number, h:Number, lineStyle:String, lineColor:uint, lineAlpha:Number, lineThickness:Number, isLastItem:Boolean,
levelsUp:int, indentation:Number):void {
var midY:Number = Math.round(h / 2);
var lineX:Number = 0;
if (disclosureIcon) {
lineX = disclosureIcon.x + (disclosureIcon.width / 2);
} else if (icon) {
lineX = icon.x - 8;
} else if (label) {
lineX = label.x - 8;
}
lineX = Math.floor(lineX) - int(lineThickness / 2);
if (levelsUp > 0) {
if (!isNaN(indentation) && (indentation > 0)) {
lineX = lineX - (levelsUp * indentation);
} else {
return;
}
}
var lineY:Number = h;
if (isLastItem) {
lineY = midY;
if (levelsUp > 0) {
return;
}
}

g.lineStyle(0, 0, 0);
if (lineStyle == SOLID) {
g.beginFill(lineColor, lineAlpha);
} else {
var verticalDottedLine:BitmapData = createDottedLine(lineColor, lineAlpha, lineThickness, true);
g.beginBitmapFill(verticalDottedLine);
}

g.drawRect(lineX, 0, lineThickness, lineY);
g.endFill();

if (levelsUp == 0) {
var startX:int = lineX + 1 + int(lineThickness / 2);
var endX:int = startX + 11;
if (isLastItem) {
startX = lineX;
}
var startY:Number = midY - int(lineThickness / 2);
if (lineStyle == SOLID) {
g.beginFill(lineColor, lineAlpha);
} else {
var horizontalDottedLine:BitmapData = createDottedLine(lineColor, lineAlpha, lineThickness, false);
g.beginBitmapFill(horizontalDottedLine);
}
g.drawRect(startX, startY, endX - startX, lineThickness);
g.endFill();
}

}

private function createDottedLine(lineColor:uint, lineAlpha:Number, lineThickness:Number, vertical:Boolean = true):BitmapData {
var w:Number = (vertical ? lineThickness : 2 * lineThickness);
var h:Number = (vertical ? 2 * lineThickness : lineThickness);
var color32:uint = combineColorAndAlpha(lineColor, lineAlpha);
var dottedLine:BitmapData = new BitmapData(w, h, true, 0x00ffffff);
for (var i:int = 0; i < lineThickness; i++) {
for (var j:int = 0; j < lineThickness; j++) {
dottedLine.setPixel32(i, j, color32);
}
}
return dottedLine;
}

private function combineColorAndAlpha(color:uint, alpha:Number):uint {
if (isNaN(alpha)) {
alpha = 1;
} else {
alpha = Math.max(0, Math.min(1, alpha));
}

var alphaColor:Number = alpha * 255;
alphaColor = alphaColor << 24;

var combined:uint = alphaColor | color;
return combined;
}

private function getColorStyle(propName:String, defaultValue:uint):uint {
var color:uint = defaultValue;
if (propName != null) {
var n:Number = getStyle(propName);
if (!isNaN(n)) {
color = uint(n);
}
}
return color;
}

private function getNumberStyle(propName:String, defaultValue:Number):Number {
var number:Number = defaultValue;
if (propName != null) {
var n:Number = getStyle(propName);
if (!isNaN(n)) {
number = n;
}
}
return number;
}
}
}


测试:
<?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" minWidth="955" minHeight="600" backgroundColor="0xfff000"
  xmlns:tree="com.dse.common.tree.*" xmlns:ds="com.dse.components.ds.*">
<s:layout>
<s:VerticalLayout/>
</s:layout>

<fx:Script>
<![CDATA[
import mx.controls.Alert;

protected function button1_clickHandler(event:MouseEvent):void {
var items:Vector.<Object> = combox2.selectedItems;
var ids:Array = [];
var names:Array = [];
for each (var o:Object in items) {
names.push(o.name);
ids.push(o.adcode);
}
Alert.show(names.join(',') + ' ' + ids.join(','));
}
]]>
</fx:Script>

<fx:Script>
<![CDATA[
import com.dse.common.util.ServiceProxy;

import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

override protected function initializationComplete():void {
super.initializationComplete();
ServiceProxy.execute("sysDistrictService", "getAll", function(e:ResultEvent):void {
var data:ArrayCollection = ArrayCollection(e.result)
combox1.dataProvider = data;
combox2.dataProvider = data;
});
}
]]>
</fx:Script>
<tree:DistrictTreeComboBox/>

<ds:DseComboBoxWithTree id="combox1" labelField="name"/>
<s:Button label="value" click="{Alert.show(combox1.selectedItem?combox1.selectedItem.name+'  '+combox1.selectedItem.adcode:'');}"/>

<s:HGroup width="100%">
<s:Label text="22233333333333"/>
<ds:DseComboBoxWithTree id="combox2" labelField="name" allowMultipleSelection="true"/>
<s:Button label="value" click="button1_clickHandler(event)"/>
</s:HGroup>
</s:Application>
1
6
分享到:
评论

相关推荐

    带复选框的下拉框

    "带复选框的下拉框"是一种常见的控件,它结合了下拉列表和复选框的功能,允许用户在多个选项中进行多选操作。在本案例中,我们讨论的是一个适用于Ext JS框架的特定实现,它已经针对不同版本进行了优化,解决了从3.2...

    JAVA题库管理系统,运用数据库知识,下拉框、树、单选框、复选框等控件

    在JAVA中,JRadioButton和JCheckBox类分别用于创建单选和复选按钮,通常配合ButtonGroup类来管理单选按钮,确保同一组内的单选按钮只能选择一个。 其次,数据库的运用是题库管理系统的核心。可能使用的关系型数据库...

    28834支持复选功能树控件的下拉框

    在IT界,尤其是在软件开发和UI设计中,"28834支持复选功能树控件的下拉框"是一种常见的用户界面组件,它结合了树形结构和复选框的功能,通常用于数据筛选、多选操作或者层级分类选择。这种控件允许用户在展开的树形...

    flex 多选下拉框

    在这个场景中,"flex 多选下拉框"是一个功能组件,它允许用户在下拉列表中选择多个选项,而不是只能单选。 多选下拉框在很多类型的Web应用中都有广泛的应用,例如数据过滤、用户设置和配置选项等。它提升了用户体验...

    flex checkboxtree复选树形下拉框

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

    单选框、复选框、下拉框的使用及跨页面传值

    在Android应用开发中,用户界面的设计至关重要,其中单选框(RadioButtons)、复选框(CheckBoxes)和下拉框(Spinner)是常见的交互元素,它们用于收集用户的选择信息或控制用户界面的状态。本教程将深入讲解这三种...

    文本框 单选框 复选框 下拉框

    在IT界,尤其是在网页设计和开发领域,"文本框、单选框、复选框和下拉框"是构建用户界面(UI)时不可或缺的基本元素。这些组件是用户与应用程序或网站交互的主要方式,用于输入数据、做出选择或执行特定操作。让我们...

    QT 下拉框与复选框组合使用

    在QT编程中,下拉框(QComboBox)和复选框(QCheckBox)是两种常见的用户界面元素。它们各自有着不同的功能,但在某些场景下,将两者结合使用可以提供更丰富的用户交互体验。本篇文章将深入探讨如何在QT中实现下拉框...

    结合ztree的下拉框树形结构数据多选,单选

    总的来说,"结合ztree的下拉框树形结构数据多选,单选"是一个涉及到前端开发中JavaScript交互设计、数据处理和用户界面优化的重要知识点。通过理解并熟练运用zTree这个工具,开发者能够创建出功能强大且用户体验良好...

    flex4 下拉框可以多选 CheckBoxTreeComboBox

    本篇我们将聚焦于“flex4下拉框可以多选CheckBoxTreeComboBox”的主题,深入探讨这个特殊组件的功能和使用方法。 `CheckBoxTreeComboBox`是Flex4中一个自定义组件,它结合了`Tree`和`ComboBox`两种控件的特点。通常...

    jsp+js带单选复选框的动态树

    【jsp+js带单选复选框的动态树】是一个基于Java Server Pages(JSP)和JavaScript技术实现的交互式树形结构,通常用于展示层级关系的数据,如组织架构、文件目录等。在这个应用场景中,用户可以进行选择操作,通过...

    jsp/html 实现下拉复选框

    总之,"jsp/html 实现下拉复选框"是一个基础但实用的前端功能,通过合理的HTML结构、CSS样式和JavaScript脚本,我们可以创建出既美观又易用的下拉复选框组件,满足用户在网页上的多选项选择需求。在实际应用中,还...

    flex 下拉 带复选框 多选

    在描述中提到的"带有复选框",意味着我们需要为每个选项添加复选框,让用户可以同时选择多个项目。这在Flex中通常通过自定义ItemRenderer来实现。ItemRenderer是Flex中用来定制组件显示样式和行为的类,我们可以通过...

    复选下拉框

    复选下拉框是一种常见的用户界面元素,它结合了下拉菜单和多选功能,使得用户能在一组选项中选择一个或多个项目。在网页设计和开发中,这种组件能够节省空间,提供良好的用户体验,尤其在选项众多时。下面将详细介绍...

    QTableView添加复选框,下拉框控件

    在特定的开发场景中,我们可能需要增强QTableView的功能,例如为表格中的每一行添加复选框或者下拉框控件,以提供更多的交互方式。这个过程涉及到Qt的自定义 delegate(委托)机制以及信号与槽的连接。 首先,我们...

    前端web select 多层级选择。利用 ztree.js 实现下拉框的多选和单选demo.有兴趣的可以了解一下。

    在本教程中,我们将深入探讨如何利用 zTree.js 实现下拉框的多选和单选功能。 首先,zTree.js 提供了丰富的 API 和配置选项,使得我们可以自定义树状结构的显示样式、交互行为等。在创建 zTree 时,我们需要提供 ...

    VC++中实现复选下拉框CCheckComboBox

    该资源在VS2008SP1 IDE中编写,主要介绍了如何在VC++中实现复选下拉框,其中包含了CheckComboBox.h和CheckComboBox.cpp两个文件,这两个文件实现了复选下拉框的功能。但作者Margin在使用复选下拉框时发现:在模态...

    PyQt5基本控件使用详解:单选按钮、复选框、下拉框

    带着这些问题下面开始介绍这 RadioButton单选按钮、CheckBox复选框、 ComboBox下拉框 三种基本控件的使用方法 QRadioButton单选按钮 单选按钮为用户提供 多选一 的选择,是一种开关按钮。QRadioButton单选按钮是否...

    用VBA实现Excel单元格下拉框复选demo

    在Excel中,我们经常需要创建交互式的数据输入界面,其中下拉框(Dropdown List)和复选框(Checkbox)是常见的元素。本示例“用VBA实现Excel单元格下拉框复选demo”旨在教大家如何利用Visual Basic for ...

    FLEX中下拉框嵌入Checkbox

    然而,有时我们需要在下拉框中不仅提供文本选项,还需要提供复选框(Checkbox)来让用户进行多选操作。这种需求在处理复杂数据或需要用户对多个选项进行选择时尤为常见。本文将详细讲解如何在Flex中的ComboBox中嵌入...

Global site tag (gtag.js) - Google Analytics