[]
        
(Showing Draft Content)

ComboBox 개요

ComboBox 컨트롤은 입력 요소와 드롭다운 목록을 결합합니다. 목록에서 문자열이나 개체를 선택 및/또는 편집하는 데 사용할 수 있습니다. 컨트롤은 사용자가 입력할 때 자동으로 항목을 완성하고 사용자가 사용 가능한 항목과 함께 드롭다운 목록을 표시할 수 있게 합니다.

Combobox와 관련된 몇 가지 중요한 속성은 다음과 같습니다:

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

아래 예시에서는 객체 배열을 사용하고 __displayMemberPath__를 정의하여 ComboBox를 만들고 채웠습니다.

ComboBox

HTML
  <div id="theComboObject"></div>
Javascript
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 속성을 __True__로 설정한 다음 lostFocus 이벤트를 처리하여 ComboBox itemsSource에 항목을 동적으로 추가할 수 있습니다. 사용자가 itemsSource에 존재하지 않는 값을 입력하고 포커스를 컨트롤에서 멀리 이동하면, lostFocus 이벤트는 입력된 항목을 컨트롤의 itemsSource로 할당된 배열에 추가합니다.

ComboBox

HTML
<div id="theCombo"></div>
Javascript
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
    });

    // add item to the list when a control loses focus
    function lostFocus(sender) {
        let item = sender.text;
        if (item && countries.indexOf(item) < 0) {
            countries.push(item);
        }
    }
}