[ExtJS강좌10] 폼을 화면에 출력하기 (2) - 콤보박스1

지난번에는 ExtJS에서 제공하는 입력 폼들을 띄워보았슴돠

이번장에서는 지난번에 언급했던!!!

html태그에서 select 태그와 유사한 combobox를 진행하도록 하겠음!!

아직 기존 extJS 연동준비가 안되어 있으시다면 해당 링크로 세팅을 하신후 

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

콤보박스는 이전 form태그들과 다른점이 있다면 store로 값을 받아와 key/value를 뿌려주는 

형식이다.  일반적으로,

<select>

<option value="1">값</option>

</select>

에서 store(ExtJS의 저장소!!)가 option태그에 해당하는 리스트 들을 의미한다.

demo화면의 소스를 보면 tpl형식으로 콤보박스 목록을 뿌리는게 있던대..

본인은 그냥 store에 받아서 key/value 세팅만 하도록 하겠다 ㅎㅎㅎ

뿌려주는 방식은 그리드 시간에 했던방식처럼 

1. data를 임의의 json array객체에 값을 넣어서 combobox 리스트에 뿌려주는 방식

2. ajax를 통하여 json객체를 combobox 리스트에 뿌려주는 방식

이 두가지를 다루도록 하겠다.

이번장에는 1.에 해당하는 부분을 다루도록 하겠다.

첫째로 필요한것은 가상의 데이터이다. 

select option의 value에 해당하는 값과 option이 보여줄 text 부분을 json array 변수로 만들어 보겠다.

//json 배열객체
	   var comboData = [
		                    {
		               			"name" : "콤보1",
		               			"value" : "value1"
		                    },
		                    {
		               			"name" : "콤보2",
		               			"value" : "value2"
		                    }
	                    ]

위의 데이터로 combobx의 <option></option> 값으로 출력을 할것이다!!

다음은 <option></option> 리스트를 만들어서 담아주어야 할 store 변수를 만들어 보자 

var combostore = Ext.create('Ext.data.Store', {
 	     //comboData의 key/value 구분
 	    fields: ['name','value'],
	    //key/value값이 들어간 comboData 변수가 목록이 된다.
	    data: comboData
   })

마지막으로 formpanel안에다가 xtype 이 콤보박스를 생성하면서~ 실제로 화면에 표출해야할 store를 combostore로 선언을 해야한다.

          //폼패널
	   Ext.create('Ext.form.Panel',{
		   //폼패널 타이틀
		   title : '폼패널 - 콤보박스 출력',
		   //지정위치
	       renderTo : Ext.getBody(),
	       items : [
				{
					//<select></select> Ext.form.field.ComboBox로 create가능
					xtype : 'combo',
					//label
					fieldLable : '콤보박스예제',
					//combo width
					width : 300,
					//화면에 보여질 값
					displayField: 'name',
					//실제 선택값
			        valueField: 'value',
			        //초기 선택 value값
			        value : 'value1',
			        //상단에 만들어놓은 comboData json 배열객체를 담기위한 store
					store : combostore 
				}
			]
	   })

위와같이 작성을 해보았다면 실행하여 option을 변경해보자

위의 combobx 예제는 sencha에서 제공하는 example combo랑 약간은 틀릴것이다.

화면 출력에 의미없는 속성들은 우선 제거 하였다.

물론 이벤트 발생시 필요한 속성이 있을 수 있겠지만,

단순 화면에 option list를 출력하기위해서는 의미 없는것으로 판단되어 제외해버렸다.

부분부분 필요한 것은 추후 MVC 강좌 시간에 추가적으로 넣어서 작업을 해보도록 하겠다!!

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!