RIA Shanghai | Adobe上海用户组

ComboBox is one of the key data provider components. You use ComboBox.dataProvider to set an array, ArrayCollection of data items for selection in it. ComboBox dispatches mx.events.FlexEvent.VALUE_COMMIT when the item selected is changed programmatically or by user interaction. To get the currently selected index and item, you use ComboBox.selectedIndex, ComboBox.selectedItem, respectively. Sounds easy? Maybe. But what will happen if you programmatically select an item that does not exists in the data provider? Here is my experiment to explore such questions.

We'll use the following application to test things out:

public var employees:ArrayCollection = new ArrayCollection([
{name: "Jack", gender: "M"},
{name: "Joanne", gender: "F"},
{name: "Jason", gender: "M"}
]);

public var employee4:Object = {name: "Homer", gender: "M"};

private function onComboEvent(event:Event):void {
	trace("combo event: " + event.type + " - selectedIndex: " + combo.selectedIndex + "; selected item: " + 
            ObjectUtils.toStringFirstLevel(combo.selectedItem) + ", " + combo.selectedLabel + ", " + combo.text);
}

Initially, there is no event fired by the ComboBox.

C1. Setting the data provider - the first element in the data provider will be selected automatically

After the application starts, click 'Set DP' and the employees ArrayCollection is set as the data provider for the Combo box.

The following events will be dispatched:

combo event: valueCommit - selectedIndex: 0; selected item: Object{gender: M, name: Jack}, Jack, 
combo event: valueCommit - selectedIndex: 0; selected item: Object{gender: M, name: Jack}, Jack, Jack 
combo event: valueCommit - selectedIndex: 0; selected item: Object{gender: M, name: Jack}, Jack, Jack

C2. Selecting an item in the data provider programmatically - a single valueCommit event will be dispatched

'Select in list' button is clicked.

combo event: valueCommit - selectedIndex: 1; selected item: Object{gender: F, name: Joanne}, Joanne, Joanne

C3. Changing selection through UI - two valueCommit events and one change event will be dispatched

We change the selection from 'Joanne' to 'Jason' by clicking the Jason item in the combo box.

combo event: valueCommit - selectedIndex: 2; selected item: Object{gender: M, name: Jason}, Jason, Joanne 
combo event: valueCommit - selectedIndex: 2; selected item: Object{gender: M, name: Jason}, Jason, Jason 
combo event: change - selectedIndex: 2; selected item: Object{gender: M, name: Jason}, Jason, Jason

C4. Selecting an item that does not in the data provider programmatically - selectedIndex will be set to -1 and selectedItem to null

'Select not in list' button is clicked.

combo event: valueCommit - selectedIndex: -1; selected item: null, , Jason 
combo event: valueCommit - selectedIndex: -1; selected item: null, ,

C5. When data provider is changed, previously selection will be cleared and the first item in the new data provider will be selected.

Use two data providers. DP1 contains 3 items and DP2 contains the same 3 objects in DP1 with additional one item. Initially, DP1 is the data provider for the combo box. We select the second item. Then we change the data provider to DP2 and you'll find that the first item in DP2 is selected.

C6. When null is set as the data provider - selectedIndex will always be 0 and selectedItem will be null

This is because null is considered as a single element and data provider wraps it in a ListCollectionView. According to rule 1, the first item in the data provider is selected - in this case, the first item is null.

Next, we'll modify the above example and test DataGrid out. Note: the experiment shows that List behaves exactly the same DataGrid. Below rules apply to List too.

D1. Setting the data provider - initially no item will be selected (no change event)

After the application starts, click 'Set DP'

grid event: valueCommit - selectedIndex: -1; selected item: null

D2. Selecting an item in the data provider programmatically - a single valueCommit event will be dispatched (no change event)

grid event: valueCommit - selectedIndex: 1; selected item: Object{gender: F, name: Joanne}

D3. Changing selection through UI - one change event will be dispatched (no valueCommit event)

grid event: change - selectedIndex: 0; selected item: Object{gender: M, name: Jack}

D4. Selecting an item that does not in the data provider programmatically - selectedIndex will be set to -1 and selectedItem to null (no change event)

grid event: valueCommit - selectedIndex: -1; selected item: null

D5. When null is set as the data provider - a valueCommit event will be fired and there will be no event to be fired when you select programmatically (no change event)

grid event: valueCommit - selectedIndex: -1; selected item: null

D6. Special behavior - A programmatic selection was made when null was the data provider, and the the previously selected item will be selected when you change the data provider provided the selected item is in the data provider.