DGComboBox

From Openzet

Contents 1 Introduction 2 Property 3 Usage 4 Application Example

Introduction

DGComboBox extends ZetComboBox class to implement a ComboBox control with DataGrid dropdown. For dataProvider property of this control, you can simply assign any dataProvider you’d use for a simple DataGrid. This class’s selectedItem property returns selectedItem of dropdown DataGrid.

Property

dropdownHeight Specifies height of a dropdown DataGrid. This property is especially useful for Tree controls since this control shows a Tree with its all nodes expanded. selectedItem Returns selectedItem of the dropdown DataGrid.

Usage

The following is the basic usage of this control.

<zet:DGComboBox id="dgCombo" dataProvider ="{arr}" prompt="select one"  dropdownWidth="200" />

For dataProvider to bind with this control, you can you data like the following.

[Bindable]
                        public var arr:ArrayCollection = new ArrayCollection([
                        {A:10, B:20, C:30},
                        {A:20, B:30, C:40},
                        {A:30, B:40, C:50},
                        {A:40, B:50, C:60},
                        {A:50, B:60, C:70}]);

Now this dataProvider (arr) would be bound with dropdown DataGrid control through internal logic provided by this class’s superclass, so you don’t need to worry about assigning dataProvider for dropdown DataGrid.

Application Example

The following is the entire application code for DGComboBox control.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
        xmlns:zet="org.openzet.controls.*" creationComplete="init();">
        <mx:Script>
                <![CDATA[
                        import org.openzet.utils.DataUtil;
                        import org.openzet.utils.DataGridUtil;
                        import mx.collections.ArrayCollection;
 
                        [Bindable]
                        public var arr:ArrayCollection = new ArrayCollection([
                        {A:10, B:20, C:30},
                        {A:20, B:30, C:40},
                        {A:30, B:40, C:50},
                        {A:40, B:50, C:60},
                        {A:50, B:60, C:70}]);
 
                ]]>
        </mx:Script>
        <zet:DGComboBox id="dgCombo" prompt="select one" dataProvider="{arr}" dropdownWidth="200"  />
</mx:Application>