Combo 소개

Combo는 여러 아이템 목록 중에서 한 개 값을 선택하기 위한 용도로 사용하는 컴포넌트입니다.

텍스트를 입/출력할 수 있는 콤보 에디트가 있고 그 옆에 드롭 버튼이 배치되어 있어 버튼을 클릭하면 Combo에 바인딩되어 있는 Dataset의 아이템 목록이 리스트박스 형태로 출력되는 구조를 갖습니다.

Combo는 아이템의 개수가 많아 원하는 아이템을 찾기 힘든 경우를 위해 네 가지 검색 타입을 제공하는데 type 속성을 설정하는 것만으로 손쉽게 검색 기능을 사용할 수 있습니다. dropdown은 검색어 입력을 받지 않고 오직 아이템 목록을 선택만 할 수 있고, search와 filter는 콤보 에디트에 입력된 검색어로 시작하는 아이템만을 목록으로 보여줍니다. 그리고 filterlike는 콤보 에디트에 입력된 검색어가 들어간 모든 아이템을 목록으로 보여줍니다. 개발자는 상황에 맞는 적절한 Combo 타입을 사용하여 사용자의 편의성을 높일 수 있습니다.

Combo는 Dataset을 바인딩해 동적으로 아이템 목록을 구성할 수 있습니다. 또한, 아이템이 항상 고정적인 경우에는 InnerDataset 편집기를 사용해 개발자가 직접 아이템 목록을 입력하는 것도 가능합니다.

사용 예

다음은 국가별 언어 설정 기능을 Combo를 사용해 구현한 예를 보여줍니다. 사용자는 선택할 수 있는 아이템 목록을 살펴보며 그중에서 하나의 아이템만을 선택할 수 있습니다.

Combo 만들기

툴바에서 Combo 를 선택한 후, 폼 위에 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

퀵뷰(Ctrl + F6)를 실행하여 결과를 확인합니다.

아무 속성도 설정하지 않은 Combo 컴포넌트는 아무 값도 출력되지 않고 검색어도 입력할 수 없습니다.

Combo 구성하기 - 고정 아이템 목록

일반적으로 Combo를 구성할 때 아이템 목록을 데이터베이스로부터 로컬의 Dataset으로 받아와 사용합니다. 그러나 아이템이 몇 개 안되고 값이 항상 같다면 InnerDataset 편집기를 사용하여 간단히 아이템 목록을 구성할 수도 있습니다. 예를 들어, 성별, 날짜, 주소의 지역 등과 같은 데이터는 변할 일이 거의 없으므로 InnerDataset 편집기로 간단히 아이템을 목록을 구성하는 게 편합니다.

InnerDataset 편집기는 사용자가 별도로 데이터셋을 생성하는 번거로움 없이 내부적으로 innerdataset이라는 Dataset을 자동 생성해 줍니다. 아래는 InnerDataset 편집기로 아이템 목록을 구성한 후의 XFDL 코드로 자동으로 생성된 innerdataset과 codecolumn, datacolumn을 확인할 수 있습니다. 이 속성에 대한 설명은 ${sample_element}를 참조하시기 바랍니다.

<Combo id="Combo00" taborder="0" text="male" left="32" top="40" width="200" height="32" right="" bottom="" leftbase="" topbase="" bottombase="" rightbase="" widthbase="" heightbase="" codecolumn="codecolumn" datacolumn="datacolumn" value="m" index="0">
	<Dataset id="innerdataset">
    	<ColumnInfo>
        	<Column id="codecolumn" size="256"/>
            <Column id="datacolumn" size="256"/>
		</ColumnInfo>
		<Rows>
			<Row>
				<Col id="codecolumn">00</Col>
			.
			.

아래 그림은 InnerDataset 편집기로 Combo를 구성한 후 자동으로 설정된 innerdataset과 codecolumn, datacolumn 속성의 설정 상태를 보여줍니다. 툴에서 자동으로 처리되므로 개발자가 별도로 설정할 필요는 없습니다.

예제

다음은 6개 아이템 목록을 갖는 Combo 예제입니다. Combo의 드롭 버튼을 클릭하면 아이템 목록이 나오며 그중에서 하나의 아이템을 선택할 수 있습니다. 아이템을 선택하면 콤보 에디트에 선택한 아이템이 반영됩니다.

sample_combo_02.xfdl

예제에서 사용한 핵심 기능

codecolumn

Combo의 아이템 항목에서 코드값으로 사용할 칼럼을 설정하는 속성입니다. 코드는 Combo 내부적으로 아이템을 처리할 때 사용하는 일종의 ID 값입니다.

datacolumn

Combo의 아이템 항목에서 데이터값으로 사용할 칼럼을 설정하는 속성입니다. 데이터는 Combo에 출력되어 사용자에게 보일 아이템 정보입니다.

innerdataset

Combo에 바인딩(아이템 항목을 구성)할 Dataset의 ID를 설정하는 속성입니다.

예제 구현 방법

Dataset 바인딩없이 InnerDataset 편집기를 사용하여 간단히 아이템 목록을 구성하는 방법에 대해 설명합니다.

툴바에서 Combo 를 선택한 후, 폼 위에서 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

단계 1에서 생성한 Combo를 선택한 후 Properties 창에서 innerdataset 속성을 찾습니다. innerdataset 속성을 선택하면 아래와 같이 속성 옆에 [...] 버튼이 나타나고 그 버튼을 클릭하면 다음과 같이 InnerDataset 편집기가 나타납니다. 편집기에는 아래와 같이 입력하고 [OK] 버튼을 클릭하면 바인딩이 완료됩니다.

Properties 창에서 아래와 같이 codecolumn, datacolumn, innerdataset 속성에 자동으로 값이 설정되었는지 확인합니다.

Combo 동작시 최초로 선택되어 보이는 초기값은 index 속성으로 설정합니다. index에 설정할 값은 현재 바인딩되어 있는 Dataset의 아이템 순서대로 앞에서부터 0, 1, 2...의 순서로 정의됩니다.

예제에서는 apple을 초기값으로 사용하기 위해 Properties 창에서 index를 0으로 설정합니다. text와 value 속성은 index 값을 설정하면 자동으로 설정됩니다.

성공적으로 Combo가 만들어졌는지 QuickView(Ctrl + F6)로 확인합니다.

콤보 에디트에 apple이 초기값으로 선택되어 있는지 확인하고 드롭 버튼을 눌러 목록에서 다른 아이템을 선택하여 해당 값으로 값이 변경되는지 확인합니다.

Combo 구성하기 - 동적 아이템 목록

일반적으로 Combo를 구성할 때 아이템 목록을 데이터베이스로부터 가져와 사용합니다. 이는 Combo의 아이템을 데이터베이스에서 관리하여 아이템 정보가 변경되어도 화면을 수정할 필요 없이 아이템 목록을 동적으로 구성할 수 있기 때문입니다.

데이터베이스로부터 데이터를 받아 Combo의 아이템 목록을 구성하기 위해서는 Dataset이 필요합니다. 이번 장에서는 Combo에 Dataset을 바인딩시켜 동적으로 아이템을 구성하는 방법에 대해 설명합니다.

예제

다음은 6개 아이템 목록을 갖는 Combo 예제입니다. Combo의 드롭 버튼을 클릭하면 아이템 목록이 나오며 그중에서 하나의 아이템을 선택할 수 있습니다. 아이템을 선택하면 콤보 에디트에 선택한 아이템이 반영됩니다.

Dataset 컴포넌트를 바인딩해서 목록을 보여주고 있기 때문에 Grid 컴포넌트를 표시할 때 같은 데이터를 공유할 수 있습니다. 오른쪽에 배치한 Grid 컴포넌트는 00부터 05까지 코드만 가지고 있는데 Combo 컴포넌트에 바인딩된 Dataset의 정보를 가지고 텍스트 형태로 데이터를 보여줍니다. 또한 Combo 컴포넌트의 value 속성값을 Grid 컴포넌트에 바인딩된 Dataset 오브젝트와 바인딩해서 Grid 컴포넌트에서 선택한 항목을 Combo 컴포넌트에서 보여주고 Combo 컴포넌트에서 선택한 값을 Grid 컴포넌트에 업데이트합니다.

sample_combo_03.xfdl

예제에서 사용한 핵심 기능

codecolumn

Combo의 아이템 항목에서 코드값으로 사용할 칼럼을 설정하는 속성입니다. 코드는 Combo 내부적으로 아이템을 처리할 때 사용하는 일종의 ID 값입니다.

datacolumn

Combo의 아이템 항목에서 데이터값으로 사용할 칼럼을 설정하는 속성입니다. 데이터는 Combo에 출력되어 사용자에게 보일 아이템 정보입니다.

innerdataset

Combo에 바인딩(아이템 항목을 구성)할 Dataset의 ID를 설정하는 속성입니다.

예제 구현 방법

툴바에서 Combo 를 선택한 후, 폼 위에서 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

Combo에 출력할 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간을 클릭하여 Dataset을 생성합니다. Dataset은 형태가 없는 논리적인 오브젝트입니다. 따라서 다른 컴포넌트와 달리 폼에 표시되지 않고 Invisible Obejct 영역에 표시됩니다.

2. 생성한 Dataset에 아이템 정보를 입력합니다. Invisible Objects 영역에 있는 Dataset00을 더블 클릭하면 Dataset 편집기가 뜨는데 아래와 같이 입력합니다. 입력이 완료되면 Dataset 편집기 창을 닫습니다. 창을 닫으면 작업 내용은 자동으로 저장됩니다.

데이터셋을 Combo에 바인딩합니다. 바인딩을 위해서는 Combo의 codecolumn, datacolumn 속성에 알맞은 데이터셋의 칼럼을 설정해야 합니다.

Invisible Objects 영역에 있는 Dataset 오브젝트(ds_combo)을 폼에 배치한 Combo 컴포넌트로 드래그 앤 드롭하고 [Bind InnerDataset "ds_combo"]을 선택하면 아래와 같이 Bind InnerDataset 창이 뜹니다.

codecolumn에 'CODE'를 datacolumn에 'DATA'를 입력 혹은 선택하고 [OK] 버튼을 클릭하면 바인딩이 완료됩니다. 이 예제는 설정에 대한 이해가 쉽도록 데이터셋의 칼럼 이름을 CODE와 DATA로 하였습니다.

Combo 동작 시 최초로 선택되어 보이는 초기값은 index 속성으로 설정합니다. index에 설정할 값은 현재 바인딩되어 있는 데이터셋의 아이템 순서대로 앞에서부터 0, 1, 2...의 순서로 정의됩니다.

예제에서는 apple을 초기값으로 사용하기 위해 index를 '0'으로 설정합니다. text와 value 속성은 index 값을 설정하면 자동으로 설정됩니다.

성공적으로 Combo가 만들어졌는지 퀵뷰(Ctrl + F6)로 확인합니다.

콤보 에디트에 apple이 초기값으로 선택되어 있는지 확인하고 드롭 버튼을 눌러 목록에서 다른 아이템을 선택하여 해당 값으로 값이 변경되는지 확인합니다.

Combo 컴포넌트 옆에 예제와 같이 2개의 Grid 컴포넌트를 배치합니다. 그리고 Dataset 오브젝트를 하나 더 생성합니다. Dataset 오브젝트 생성 정보는 아래와 같습니다. 데이터는 00~05 사이의 값을 임의로 입력합니다.

Dataset 오브젝트를 마우스 왼쪽 버튼으로 누른 상태로 드래그해서 Grid 컴포넌트 위로 가져가면 바인딩 작업이 처리됩니다. 첫번째 Grid 컴포넌트는 바인딩까지만 처리하고 두번째 Grid 컴포넌트는 해당 CODE 값을 텍스트로 보여주도록 수정합니다. Grid 컴포넌트를 더블클릭해서 Grid Contents Editor를 실행하고 아래 속성값을 수정합니다.

Invisible Objects 영역에 있는 Dataset 오브젝트(ds_grid)을 폼에 배치한 Combo 컴포넌트로 드래그 앤 드롭하고 [Bind With "ds_grid"]을 선택하면 아래와 같이 Bind Item 창이 뜹니다. Bind Item 창에서 속성 항목과 칼럼 ID 항목을 수정합니다.

Grid 컴포넌트가 예제 이미지처럼 코드와 텍스트 모두 표현되는지 확인하고 Grid 컴포넌트의 항목이나 Combo 컴포넌트의 항목을 변경했을 때 어떻게 표현되는지 확인합니다.

키워드 검색을 통하여 관련 아이템 추출하기

Combo의 type 속성을 설정하면 아이템을 직접 선택하는 방법 외에 검색어를 입력하여 목록에서 아이템을 검색하고, 선택하는 기능을 구현할 수 있습니다. 예를 들어, 속성값을 'filter'나 'filterlike'로 설정하면 포털 사이트에서 제공하는 자동완성 기능과 유사한 효과를 보여줄 수 있습니다.

예제

다음은 라디오 버튼으로 Combo의 type 속성 중 하나를 선택하면 해당 타입으로 Combo가 동작하는 예제입니다. 설정할 수 있는 타입은 dropdown, search, filter, filterlike 입니다.

• DROPDOWN은 Combo가 포커스를 받으면 모든 아이템을 콤보 리스트에 표시합니다. 이때는 콤보 에디트에 문자열을 입력할 수 없으며 오직 마우스를 이용한 선택만 가능합니다.

• SEARCH는 콤보 에디트가 활성화되고 문자열을 입력할 수 있습니다. 문자열을 입력하면 콤보 리스트에 모든 아이템을 표시하고 입력한 문자열로 시작하는 첫 번째 아이템으로 포커스가 이동합니다.

• FILTER는 콤보 에디트가 활성화되어 문자열을 입력할 수 있습니다. 문자열을 입력하면 콤보 리스트에 문자열로 시작하는 아이템만 표시하고 그 중 첫 번째 아이템으로 포커스가 이동합니다.

• FILTERLIKE는 SQL의 like 문과 같은 기능으로 입력된 문자열이 들어가는 모든 아이템을 콤보 리스트에 표시합니다. 예를 들어, 'p'을 입력하면 'p'가 들어가 있는 apple과 peach가 목록에 표시되고 첫 번째 아이템인 apple로 포커스가 이동합니다.

sample_combo_04.xfdl

예제에서 사용한 핵심 기능

type

Combo의 검색 기능을 설정하는 속성입니다. 설정값에 따라 아이템 목록을 보여주는 방법을 설정할 수 있습니다. 검색 기능은 search, filter, filterlike로 설정했을 경우에 사용이 가능합니다.

onitemchanged

Combo에서 값이 변경된 후 발생하는 이벤트입니다. 여기서 값이란 Combo의 index, text, value 속성의 값을 말하며 이 속성이 사용자의 마우스, 키보드 조작으로 변경되는 경우에 이벤트가 발생합니다. 스크립트에 의해 값이 변경되는 경우에는 이벤트가 발생하지 않습니다.

예제 구현 방법

툴바에서 Combo 를 선택한 후, 폼 위에서 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

Combo에 출력할 아이템 목록을 가진 Dataset을 생성합니다.

1. 툴바에서 Dataset 을 선택한 후, 폼 위 적당한 공간을 클릭하여 Dataset을 생성합니다. Dataset은 형태가 없는 논리적인 오브젝트입니다. 따라서 다른 컴포넌트와 달리 폼에 표시되지 않고 Invisible Obejct 영역에 표시됩니다.

2. Invisible Object 창에서 데이터셋을 선택한 후 Properties 창에서 id를 'ds_combo'로 변경합니다.

3. 그다음 생성한 데이터셋에 아이템 정보를 입력합니다. Invisible Objects 영역에 있는 ds_combo를 더블 클릭하면 Dataset 편집기가 뜨는데 아래와 같이 입력합니다. 입력이 완료되면 Dataset 편집기 창을 닫습니다. 창을 닫으면 작업 내용은 자동으로 저장됩니다.

Dataset을 Combo에 바인딩합니다. 바인딩을 위해서는 Combo의 codecolumn, datacolumn 속성에 알맞은 Dataset의 칼럼을 설정해야 합니다.

Invisible Objects 영역에 있는 ds_combo를 폼에 배치한 Combo 컴포넌트로 드래그 앤 드롭하고 [Bind InnerDataset "ds_combo"]를 선택하면 아래와 같이 Bind InnerDataset 창이 뜹니다.

codecolumn에 'CODE'를 datacolumn에 'DATA'를 입력 혹은 선택하고 [OK]를 클릭하면 바인딩이 완료됩니다.

Combo의 Properties 영역에서 type 속성을 'dropdown'으로 설정합니다. 아무 값도 설정하지 않으면 dropdown으로 동작합니다.

초기값을 설정하기 위해 index 속성은 '0'으로 설정합니다. '0'으로 설정하면 Dataset의 첫번째 값인 apple이 초기값으로 설정됩니다.

Combo의 4가지 타입인 dropdown, search, filter, filterlike를 선택하여 설정할 수 있도록 라디오 메뉴를 만듭니다.

1. 툴바에서 Radio 를 선택한 후, 폼 위에서 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

2. 생성한 Radio 컴포넌트를 선택하고 마우스 오른쪽 버튼을 눌러 컨텍스트 메뉴에서 [Bind Innerdataset > Innerdataset Editor] 메뉴를 선택합니다. 그러면 InnerDataset 편집기가 나오는데 아래와 같이 입력한 후 [OK] 버튼을 클릭합니다.

예제의 라디오 메뉴와 같이 가로 방향으로 아이템을 나열하기 위해 direction 속성을 'vertical'로 설정합니다. 그리고 초기값을 DROPDOWN으로 하기 위해 index 속성은 '0'으로 설정합니다.

라디오 버튼을 사용해 Combo의 타입을 설정합니다. 사용자가 라디오 버튼으로 아이템을 선택할 때 Combo 타입의 설정이 변경되도록 onitemchanged 이벤트 함수를 등록하고 스크립트를 작성합니다.

/* 라디오 버튼의 onitemchanged 이벤트 함수 */

this.Radio00_onitemchanged = function(obj:Radio,e:ItemChangeEventInfo)
{
	switch(e.postindex)
	{
		case 0:	/* DROPDOWN */
			this.Combo00.set_type("dropdown");
			break;
		case 1:	/* SEARCH */
			this.Combo00.set_type("search");
			break;
		case 2:	/* FILTER */
			this.Combo00.set_type("filter");
			break;
		case 3: /* FILTERLIKE */
			this.Combo00.set_type("filterlike");
			break;
		default:
			trace("UNKNOWN TYPE");	
	}
};

성공적으로 Combo가 만들어졌는지 퀵뷰(Ctrl + F6)로 확인합니다.

라디오 메뉴에서 DROPDOWN, SEARCH, FILTER, FILTERLIKE를 하나씩 선택한 후 콤보 에디트에 검색어를 입력하며 타입에 따라 검색 결과가 목록에 표시되는지 확인합니다.

멀티 콤보 구현하기

Combo 컴포넌트에 표시되는 목록은 하나의 데이터만 표시할 수 있기 때문에 자세한 내용을 볼 수 없는 단점이 있습니다. 버튼 클릭 시 보여지는 기본 아이템 목록 대신에 Grid 컴포넌트를 활용해 좀 더 자세한 정보를 볼 수 있도록 기능을 구현할 수 있습니다.

예제

Combo 컴포넌트의 버튼 클릭 후 보여지는 Grid 컴포넌트 항목을 클릭하면 Combo 데이터로 입력됩니다.

sample_combo_05.xfdl

예제에서 사용한 핵심 기능

ondropdown

Combo 컴포넌트의 dropbutton을 클릭했을때 아이템 리스트가 표시되는 시점에 발생하는 이벤트입니다. false 값을 반환하면 아이템 리스트를 표시하지 않습니다. 예제에서는 아이템 리스트를 표시하지 않고 Grid 컴포넌트의 visible 속성값을 true로 변경합니다.

예제 구현 방법

Combo 컴포넌트와 Grid 컴포넌트를 배치합니다. 예제에서는 데이터 갯수가 4개로 한정되어 있다는 전제아래 Grid 컴포넌트의 크기를 조정했습니다. Grid 컴포넌트가 처음에는 보이지 않아야 하기 때문에 visible 속성값을 false로 변경합니다.

Dataset 오브젝트를 생성하고 데이터를 아래와 같이 추가합니다.

Combo 컴포넌트와 Grid 컴포넌트에 생성된 Dataset 오브젝트를 바인딩합니다.

Grid 컴포넌트에서는 head 영역이 보이지 않도록 합니다. Grid Contents Editor를 실행한 후 head row를 선택하고 Delete 버튼을 클릭합니다.

ondropdown 이벤트 함수에서 Grid 컴포넌트의 visible 속성값을 true로 변경해주어야 하고 아이템 리스트가 뜨지 않도록 false 값을 반환합니다.

this.Combo00_ondropdown = function(obj:nexacro.Combo,e:nexacro.EventInfo)
{
	this.Grid00.set_visible(true);
	return false;
};

Grid 컴포넌트가 아이템 리스트 대신 보여지고 항목 선택 시 해당 값을 Combo 컴포넌트로 전달하고 다시 visible 속성값을 false로 변경합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	this.Grid00.set_visible(false);
	this.Combo00.set_value(this.Dataset00.getColumn(e.row, "CODE"));
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. dropbutton을 클릭해서 아이템을 선택하고 정상적으로 Combo 컴포넌트에 반영되는지 확인합니다.

여러 항목 선택하는 콤보 구현하기

콤보 목록에서 여러 항목을 선택해야 하는 경우 사용할 수 있는 팁입니다.

예제

Combo 컴포넌트의 버튼 클릭 후 보여지는 Grid 컴포넌트 항목에서 원하는 항목을 체크하고 다른 칼럼을 클릭하면 Combo 데이터로 입력됩니다.

sample_combo_06.xfdl

예제에서 사용한 핵심 기능

getColumn

지정된 ROW 인덱스의 지정된 칼럼값을 반환합니다. 예제에서는 체크된 항목값을 확인하기 위한 용도로 사용하고 있습니다.

예제 구현 방법

Combo 컴포넌트와 Grid 컴포넌트를 배치합니다. 예제에서는 데이터 갯수가 4개로 한정되어 있다는 전제아래 Grid 컴포넌트의 크기를 조정했습니다. Grid 컴포넌트가 처음에는 보이지 않아야 하기 때문에 visible 속성값을 false로 변경합니다.

Dataset 오브젝트를 생성하고 데이터를 아래와 같이 추가합니다. check 칼럼은 선택 여부를 확인하기 위한 용도로 데이터를 입력하지 않아도 괜찮습니다.

Grid 컴포넌트에 생성된 Dataset 오브젝트를 바인딩합니다. Grid 컴포넌트에서는 head 영역이 보이지 않도록 합니다. Grid Contents Editor를 실행한 후 head row를 선택하고 Delete 버튼을 클릭합니다.

첫번째 칼럼 Cell 오브젝트의 displaytype, edittype 속성값을 아래와 같이 수정합니다.

ondropdown 이벤트 함수에서 Grid 컴포넌트의 visible 속성값을 true로 변경해주어야 하고 아이템 리스트가 뜨지 않도록 false 값을 반환합니다.

this.Combo00_ondropdown = function(obj:nexacro.Combo,e:nexacro.EventInfo)
{
	this.Grid00.set_visible(true);
	return false;
};

Grid 컴포넌트가 아이템 리스트 대신 보여지고 항목 선택 시 해당 값을 Combo 컴포넌트로 전달하고 다시 visible 속성값을 false로 변경합니다. 첫번째 칼럼은 체크박스 영역이기 때문에 이벤트가 적용되지 않도록 합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(e.col!=0)
	{
		this.Grid00.set_visible(false);
		this.fn_comboEdit_set();
	}
};

연결된 fn_comboEdit_set 함수를 생성합니다. 첫번째 칼럼이 체크되어 있는 DATA 칼럼의 텍스트를 조합해서 반환합니다.

this.fn_comboEdit_set = function()
{
	var str_txt = "";
	
	for (i=0;i<this.Dataset00.getRowCount();i++)
	{
		if (this.Dataset00.getColumn(i, "check")==1)
		{
			str_txt += this.Dataset00.getColumn(i,"DATA") + ",";
			
		}
	}	
	this.Combo00.set_text(str_txt.substr(0, str_txt.length-1));
};

QuickView(Ctrl + F6)를 실행하여 결과를 확인합니다. dropbutton을 클릭해서 아이템을 선택하고 정상적으로 Combo 컴포넌트에 반영되는지 확인합니다.

대소문자 구분 없이 검색하거나 필터링하기

Combo의 type 속성값을 설정하면 원하는 값을 찾을 수 있으나 대소문자를 구분하고 있습니다. 영어 대소문자 구분 없이 검색하고자 할때는 type 속성값을 다르게 지정해줄 수 있습니다.

예제

Radio 컴포넌트에서 선택하는 항목에 따라 대소문자 구분 여부를 선택할 수 있습니다. "search", "filter", "filterlike"는 대소문자를 구분해서 입력한 항목 그대로 처리하고 "caseisearch", "caseifilter", "caseifilterlike"는 대소문자 구분없이 처리합니다.

sample_combo_07.xfdl

예제에서 사용한 핵심 기능

type

기존 속성값에서 대소문자 구분 없이 처리할 수 있는 "caseisearch", "caseifilter", "caseifilterlike" 값을 지정할 수 있습니다.

예제 구현 방법

this.Radio00_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
    this.Combo00.set_type(e.postvalue);
};

마우스 오버 시 항목 펼치기

dropdown 메소드를 사용해 특정 상황에서 combolist 항목을 펼칠 수 있습니다.

예제

Combo 컴포넌트에 마우스를 가져가면 항목이 펼쳐집니다.

sample_combo_08.xfdl

예제에서 사용한 핵심 기능

isDropdown

combolist가 화면에 표시되어 있는지 여부를 확인합니다.

dropdown

combolist를 화면에 표시합니다.

예제 구현 방법

this.Combo00_onmouseenter = function(obj:nexacro.Combo,e:nexacro.MouseEventInfo)
{
	if(!obj.isDropdown()) {
		obj.dropdown();
	}
};

/*
this.Combo00_onmouseleave = function(obj:nexacro.Combo,e:nexacro.MouseEventInfo)
{
	if(obj.isDropdown()) {
		obj.dropdown();
	}
};
*/

스크립트에서 속성값 변경 시 이벤트 처리하기

Combo 컴포넌트의 index 속성값을 스크립트에서 수정한 경우에는 이벤트가 발생하지 않습니다. 하지만, 필요에 의해 이벤트가 발생해야 한다면 강제로 이벤트를 만들 수 있습니다.

예제

첫 번째 버튼 클릭 시에는 index는 변경되지만, 이벤트는 발생하지 않습니다. 두 번째 버튼 클릭 시에는 index가 변경되며 이벤트가 발생합니다.

sample_combo_09.xfdl

예제에서 사용한 핵심 기능

fireEvent

설정된 EventInfo 오브젝트로 지정된 오브젝트에 대한 이벤트를 발생합니다.

예제 구현 방법

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Combo00.set_index(3);
	this.TextArea00.set_value("Button00_onclick");
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var preindex = this.Combo00.index;
	var pretext = this.Combo00.text;
	var prevalue = "";
	this.Combo00.set_index(3);
	var postindex = this.Combo00.index;
	var posttext = this.Combo00.text;
	var postvalue = "";
	this.TextArea00.set_value("Button01_onclick");
	
	var evt = new nexacro.ItemChangeEventInfo(this, "canitemchange", preindex, pretext, prevalue, postindex, posttext, postvalue);
	this.Combo00.canitemchange.fireEvent(this.Combo00, evt, true);

};

this.Combo00_canitemchange = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.TextArea00.insertText(" -> canitemchange");
};

dropbutton 크기 변경하기

Combo 컴포넌트 오른쪽에 표시되는 작은 아이콘이 dropbutton 입니다. type 속성값에 따라 필터링이 되는 경우에도 dropbutton을 클릭하면 모든 항목을 표시합니다. 예제에서는 dropbutton 의 크기를 변경하는 방법을 살펴봅니다.

예제

첫 번째 버튼 클릭 시에는 크기를 20으로 지정하고 두 번째 버튼 클릭 시에는 0으로 지정해서 보이지 않도록 합니다.

sample_combo_10.xfdl

예제에서 사용한 핵심 기능

buttonsize

dropbutton의 크기를 지정합니다. width, height 속성값을 지정해주는 것과 같은 동작인데, Combo 컴포넌트의 크기를 벗어나지 않도록 하는 등의 내부적인 처리가 포함되어 있습니다. Combo 컴포넌트의 크기보다 큰 값을 지정하면 알아서 값을 보정합니다.

예제 구현 방법

width와 height 속성값을 지정하고 싶다면 문자열 내에 공백문자로 구분해서 2개의 값을 지정합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Combo00.set_buttonsize("40 20");
};

속성값을 0으로 지정하면 화면에 표시되지 않습니다. dropbutton 컨트롤 자체를 삭제한 것은 아니기 때문에 다시 buttonsize를 수정하면 다른 크기로 표시됩니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Combo00.set_buttonsize(0);
};

this.sample_combo_10_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.Combo00.dropbutton.set_background("cornflowerblue");
};