Combo Basic

여러 후보 값 중에서 하나의 값을 선택하는 용도로 사용되는 컴포넌트인
Combo를 이용하여 기능 구현 방법을 제시합니다.

Combo 데이터 만드는 방법

InnerDataSet

Combo의 데이터는  DataSet를 사용하여 리스트를 표현할 수 있습니다.

Contents Editor를 사용방법

Combo 데이터로 사용하는 값은 DataSet을 사용하지 않고 Contents Editor 통해서도 만들 수 있습니다.

• Combo 속성 창에서 innerdataset 부분에 보시면 데이터셋 선택할 수 있는 콤보버튼과 “…”버튼이 있습니다.

• “…” 버튼을 선택 하면 다음과 같은 화면이 뜹니다.

• 위에서 데이터셋 사용과 같이 row를 추가하고 추가된 row에 값을 아래와 같이 대입합니다.

• OK 버튼을 누르면 데이터셋이 바인딩된 것처럼 사용할 수 있습니다.

DataSet 바인딩

Combo 은 Dataset과 바인딩 하여 표현할 수 있습니다.

Type

dropdown

검색을 하지 않고 전체 아이템을 리스트에 보여 줍니다.

search

입력된 문자열에 근접한 문자열을 찾아 리스트 창에 선택하여 줍니다.

filter

입력된 문자열을 기준으로 아이템을 필터링하여 리스트 창에 보여줍니다.

소스 위치

Sample\Combo\np_Combo_Basic.xfdl

Multi Combo

PopupDiv를 이용하여 멀티콤보 만들기

• Combo컴포넌트는 기본적으로 하나의 codecolumn과 datacolumn으로 구성되어 있어 두개 이상의 datacolumn 정보를 표현하기 어렵습니다.

• 이를 해결하기 위한 방법으로 PopupDiv와 여러 컴포넌트를 조합하여 Multi Combo 형태로 표현이 가능합니다.

주요 소스 내용

/*  버튼클릭  */
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{    
 var nX = system.screenToClientX(this, system.clientToScreenX(obj,16)) - this.pdiv_input.width;
 var nY = system.screenToClientY(this, system.clientToScreenY(obj, 30));  
  
 this.pdiv_input.trackPopup(nX+12, nY); // ComboBox펼치기
}
/*  그리드 셀클릭  */
this.pdiv_input_grd_input_oncellclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
 this.pdiv_input.closePopup();
 this.edt_output0.set_value(this.ds_data.getColumn(e.row, "COL0"));
 this.edt_output1.set_value(this.ds_data.getColumn(e.row, "COL1"));
}

소스 위치

Sample\Combo\np_Combo_MultiCombo.xfdl

Combo 대소문자 구별 없이 filtering하기

filter 메소드를 이용하여 Combo의 여러 후보 값을 입력된 문자열 기준으로 대소문자 구별 없이 필터 처리 되도록 구현할 수 있습니다.

관련 메소드

filter()

Dataset에서 조건 식을 만족하는 레코드만 보이게 하는 메소드

주요 소스 내용

this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 var nRow = this.ds_data.rowcount;
 var sData;
 this.ds_data.addColumn("COL2", "STRING", 255);
 for (var i = 0; i < nRow; i++)
 {
   sData = this.ds_data.getColumn(i, "COL1").toString().toUpperCase();
   this.ds_data.setColumn(i, "COL2", sData);
 }
 var sFilter = "COL2.toString().indexOf('" + this.edt_input.value.toUpperCase() + "') >= 0";
  this.ds_data.filter(sFilter); 
}

소스 위치

Sample\Combo\np_Combo_FilterNoLetter.xfdl