AdvancedDataGrid в ComboBox-е

Apikaster · 11.01.2012, 16:22

Доброго времени суток.
У меня проблема такова. Как можно и можно ли вообще в КомбоБокс, прикрепить через айтемРендерер АдванседДатаГрид, для отображения иерархических данных.
Я пытался сделать но не получилось.
Проблема у меня возникла с листами.
Помогите новичку

Заранее спасибо.

alatar · 11.01.2012, 21:14

Button + PopUpManager || PopUpAnchor + Tree

Apikaster · 13.01.2012, 18:39

а пример можно ?
а то у меня не получается ((

alatar · 13.01.2012, 19:39

Что не получается?

Apikaster · 14.01.2012, 12:42

это мной рендерер

Код AS3:

package kz.eitt.ui.renderer 
{	
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	import kz.eitt.dataset.XField;
 
	import mx.collections.ICollectionView;
	import mx.collections.IViewCursor;
	import mx.collections.ListCollectionView;
	import mx.controls.CheckBox;
	import mx.controls.Tree;
	import mx.controls.treeClasses.ITreeDataDescriptor;
	import mx.controls.treeClasses.TreeItemRenderer;
	import mx.controls.treeClasses.TreeListData;
 
	import spark.components.CheckBox;
 
 
	public class XCComboTreeCheckRenderer extends TreeItemRenderer
	{		
		protected var cb:mx.controls.CheckBox;
 
		protected static var STATE_CHECKED:Boolean = true;
		protected static var STATE_UNCHECKED:Boolean = false;
 
		public var isParentSelected:Boolean = false;
		public var isMultiplySelected:Boolean = false;
 
		public var field:XField;
		public var main:Array;
		public var lbfld:String = "name";
		public var key : String = "id";
 
 
		public function XCComboTreeCheckRenderer()
		{
			super();
 
			mouseEnabled = false;
		}
 
		override protected function createChildren():void{
			super.createChildren();
			addCB()
		}
 
		private function addCB():void{
			cb = new mx.controls.CheckBox();
			cb.selected = false;
			//cb.setStyle("verticalAlign", "middle");
			cb.addEventListener(Event.CHANGE, onChange);
			addChild(cb);							
		}
 
		private function onChange(event:Event):void{
			var myListData:TreeListData = TreeListData(this.listData);
			var tree:Tree = Tree(myListData.owner);
 
			if (!isParentSelected){//не отмечать верхний уровень ( родителя )
				if (getParent(data) == data){
					cb.selected = false;
					return;					
				}
			}
 
			if (!isMultiplySelected){
				unSelctAll(tree, getParent(data), false);
			}
 
			data["checked"] = cb.selected;
			ListCollectionView(tree.dataProvider).itemUpdated(data, "checked");
 
			if(cb.selected){
				select(data);
			}else{
				deselect(data);
			}
		}
 
 
		public function select(value:Object):void{			
			main.push(value[key]);
			field.setValue(main.join());
		}
 
		public function deselect(value:Object):void{
			var j:int=main.indexOf(value[key],0);
			if(j!=-1){
				main.splice(j,1);
			}
			field.setValue(main.join());
		}
 
		//Получение родительского объекта
		private function getParent(item:Object):Object{
			var myListData:TreeListData = TreeListData(this.listData);
			var tree:Tree = Tree(myListData.owner);
			var parent:Object = tree.getParentItem(item);
			if (parent != null){
				return getParent(parent);
			}else{
				return item
			}
		}
 
		//Делает все невыделенными
		private function unSelctAll(tree:Tree, item:Object, state:Boolean):void{
			if(item == null){				
			}else{
				//if (item.parent != null){
					if (item["checked"]){
						deselect(item);
					}
					item["checked"] = state;
					var treeData:ITreeDataDescriptor = tree.dataDescriptor;				
					if (treeData.hasChildren(item)){
						var children:ICollectionView = treeData.getChildren(item);
						var cursor:IViewCursor = children.createCursor();
						while(!cursor.afterLast){
							unSelctAll(tree, cursor.current, state);
							cursor.moveNext();
						}
					}	
				//}				
			}
		}
 
 
		override public function set data(value:Object):void{
			if (value != null){				
				super.data = value;
				if (data["checked"] == undefined){
					data["checked"] = false;
				}
				cb.selected = data["checked"];
				//cb.label = value[lbfld];
			}
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
 
			cb.x = super.label.x + 5;
			super.label.x = cb.x + 20;
			cb.y = super.label.y +10;			
		} 
	}
}

а это мой комбо бокс с три и чек боксами.
вроде все правильно. и ошибки нету. но не отрабатывает.

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
<mx:PopUpButton xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx"				
				implements="kz.eitt.ui.editor.IXCEditor"
				width="100%"
				popUp="{tree}"
				closeOnActivity="false"
				creationComplete="popupbutton1_creationCompleteHandler(event)">
	<fx:Declarations>
		<mx:Tree id="tree"
				 width="100%"
				 rollOverColor="0xFFFFFF"
				 selectionColor="0xFFFFFF"
				 folderClosedIcon="{null}"
				 folderOpenIcon="{null}"
				 defaultLeafIcon="{null}"
				 textAlign="left"
				 creationComplete="tree_creationCompleteHandler(event)"				 
				 >			
		</mx:Tree>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import kz.eitt.dataset.DM;
			import kz.eitt.dataset.XDataset;
			import kz.eitt.dataset.XField;
			import kz.eitt.ui.renderer.XCComboTreeCheckRenderer;
 
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
 
 
			private var hr:ClassFactory;
			private var _datset:XDataset;
			public var texts:Array=new Array();
			public var main:Array=new Array();
			public var field:XField;
			public var fieldref:XField;
			public var key : * ;
			public var lblfld : String = "name";
 
			private function init(p:Object):void{
				var pm:Object = {};
				var istree:Boolean;
 
				if (fieldref != null){
					pm = {id:fieldref.getValue()};
				}
 
				if(p != null){
					for (var s:String in p){
						pm[s] = p[s];
					}
				}
 
				istree = false;
				if (field.getEditorConf().istree != undefined){					
					if (field.getEditorConf().istree == "true") {
						istree = true;
					}
				}
 
				var dictds:XDataset=DM.createDS(field.getEditorConf().dataset);
 
				setDataset(dictds);
				if (istree){
					dictds.t("data", true).setAsTree(true);
				}
 
				dictds.exec("default", pm,function(ds:XDataset):void{
					//tree.dataProvider=new ArrayCollection(ds.t("data").getData());					
					tree.dataProvider=ds.t("data").getData();
					tree.labelField = "name";
					key = field.getEditorConf().key;
				});
 
				setDataset(dictds);
			}
 
			public function setField(value:XField):void{
				var refName:String;
				var prop:Object={};
				var b:Boolean;
				field=value;
				refName = field.getEditorConf().fieldref;
				hr = new ClassFactory(XCComboTreeCheckRenderer);
				prop["field"] = field;
				prop["main"] = main;
 
				if (field.getEditorConf().isParentSelected != undefined){
					b = false;
					if (field.getEditorConf().isParentSelected == "true") {
						b = true;
					}
					prop["isParentSelected"] = b;
				}
				if (field.getEditorConf().isMultiplySelected != undefined){
					b = false;
					if (field.getEditorConf().isMultiplySelected == "true") {
						b = true;
					}
					prop["isMultiplySelected"] = b;
				}
				//hr.properties = {field:field, main:main};
				hr.properties = prop;
				tree.itemRenderer = hr;
 
				if (refName != ""){
					fieldref = field.getOwner().findField(refName);
					fieldref.addEventListener(XField.FLD_CHANGE_EVENT, onRefFldChange);
				}
 
				init({});
			}
 
			public function getField():XField{
				return field;
			}
 
			protected function onRefFldChange(event:Event):void{
				var a:Array;
				var pm:Object = {};
				if (fieldref.getEditorConf().parammap != undefined){
					a = fieldref.getEditorConf().parammap.toString().split(",");					
					for (var i:int = 0; i < a.length; i++){
						var xf:XField = fieldref.getEditor().getDataset().findTab("data").findField(a[i]);
						if (xf != null){
							pm[xf.getName()] = xf.getValue();
						}
					}
				}
 
				init(pm);
			}
 
			public function select(value:Object):void{
				texts.push(value.text);
				main.push(value[key]);
				label=texts.join();
			}
 
			public function deselect(value:Object):void{
				var i:int=texts.indexOf(value.text,0);
				var j:int=main.indexOf(value[key],0);
				if(i!=-1&&j!=-1){
					texts.splice(i,1);
					main.splice(j,1);
				}
				label=texts.join();
			}
 
			public function compare(value:Object):Boolean{
				if(getField().getAsString().search(value[key])!=-1==true){
					deselect(value);
					select(value);
				}
				return getField().getAsString().search(value[key])!=-1;
			}
 
			protected function popupbutton1_creationCompleteHandler(event:FlexEvent):void
			{
				label = getField().getAsString();
			}
 
 
			protected function tree_creationCompleteHandler(event:FlexEvent):void
			{
				tree.width = this.width;
			}
 
			public function setDataset(value : XDataset):void{
				_datset = value;
			}
 
			public function getDataset():XDataset{
				return _datset;
			}
		]]>
	</fx:Script>
</mx:PopUpButton>

Добавлено через 2 часа 51 минуту
Можно хоть простенький пример.
Я пойму может в чем проблема.
Заранее спасибо.

alatar · 14.01.2012, 19:52

Простейший пример для PopUpButton (собрано на коленке, не для продакшена)

Код:

<?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" xmlns:local="*">
	<fx:Declarations>
		<fx:XMLList id="treeData">
			<node label="Mail Box">
				<node label="Inbox">
					<node label="Marketing"/>
					<node label="Product Management"/>
					<node label="Personal"/>
				</node>
				<node label="Outbox">
					<node label="Professional"/>
					<node label="Personal"/>
				</node>
				<node label="Spam"/>
				<node label="Sent"/>
			</node>
		</fx:XMLList>
	</fx:Declarations>
	<local:PopUpTree dataProvider="{treeData}"/>
</s:Application>

PopUpTree

Код AS3:

<?xml version="1.0" encoding="utf-8"?>
<mx:PopUpButton xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx"
				label="{tree.selectedItem.@label}">
	<fx:Script>
		<![CDATA[
			private var _dataProvider:Object;
 
			[Bindable(event="dataProviderChange")]
			public function get dataProvider():Object
			{
				return _dataProvider;
			}
 
			public function set dataProvider(value:Object):void
			{
				if( _dataProvider !== value)
				{
					_dataProvider = value;
 
					if (!label)
					{
						label = _dataProvider[0].@label;
					}
 
					dispatchEvent(new Event("dataProviderChange"));
				}
			}
 
		]]>
	</fx:Script>
	<mx:popUp>
		<mx:Tree id="tree"
				 width="200"
				 dataProvider="{dataProvider}"
				 labelField="@label"/>
	</mx:popUp>
</mx:PopUpButton>

А если хотите сделать нормальный компонент, то посмотрите исходники DropDownList и сделайте по аналогии, только вместо List используйте Tree (или сторонний аналог).

Apikaster · 29.01.2012, 12:26

Все наконец-то я сделал пару тройку компонентов с помощью поп-ап батнов и дроп даунов. Круть. Все работает )) Все пашет )) Спасибо за советы Алатар. Ты лучший... =))