콤보박스

ComboBox 개요

ComboBox 컨트롤은 입력 요소와 드랍다운 리스트를 결합합니다. 리스트에서 문자열 또는 객체를 선택 하거나 편집할 수 있습니다. 컨트롤은 자동으로 항목을 사용자 타입으로 완성되어 사용자가 사용 가능한 항목이 있는 드롭다운 목록을 표시할 수 있습니다.

Combobox와 관련된 몇몇 중요한 속성들을 아래와 같습니다.:

itemsSource : 문자열 또는 객체가 될 수 있는 항목의 리스트를 채웁니다.
displayMemberPath: 항목이 객체인 경우, 리스트에 표시되는 항목의 속성을 지정합니다.
selectedValuePath: 콤보박스의 selectedValue 속성을 설정하는데 사용되는 항목의 속성을 정의합니다.
selectedIndex: 현재 선택한 항목의 인덱스를 결정합니다.
text: 현재 선택된 항목의 텍스트를 결정합니다.
isRequired: 컨트롤의 내용을 삭제하여 컨트롤 값을 null로 설정할 수 있는지 여부를 결정합니다. 만약 값이 null로 설정된 경우, selectedIndex은 -1로 설정됩니다.
isEditable: 사용자가 리스트에 없는 값을 입력할 수 있는지 여부를 결정합니다.

아래 예제에서는 객체 배열을 사용하여 ComboBox를 생성 및 채우고 displayMemberPath를 정의하고 있습니다.

  <div id="theComboObject"></div>

import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';
import { getCountries, getData } from './data';

function init() {
    // select an item (object)
    var theComboObject = new input.ComboBox('#theComboObject', {
        displayMemberPath: 'country',
        itemsSource: getData()
    });    
}

자동으로 항목 추가

사용자는 isEditable 속성을 Ture로 설정하고 lostEvent 이벤트를 처리하여 동적으로 ComboBox itemsSource에 항목을 추가할 수 있습니다. itemsSource에 없는 값을 입력하고 컨트롤에서 포커스가 벗어나면 lostFocus 이벤트가 컨트롤의 itemsSource에 할당된 배열에 값을 추가해줍니다.

<div id="theCombo"></div>

import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';

function init() {
    let countries = new wijmo.ObservableArray(['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']);
    //
    new input.ComboBox('#theCombo', {
        itemsSource: countries,
        isEditable: true,
        lostFocus: lostFocus
    });

    // 컨트롤이 포커스를 잃을 때, 리스트에 항목 추가
    function lostFocus(sender) {
        let item = sender.text;
        if (item && countries.indexOf(item) < 0) {
            countries.push(item);
        }
    }
}

개요