픽커 사용하기.

모바일은 크기가 작으므로 입력할 수 있는 화면의 양이 크지 않다.

별도의 팝업 창을 제공하거나 픽커 같은 컴포넌트가 지원된다면 화면을 아주 유용하게 구성할 수 있다.

픽커를 구성하기 위해 Ext.Picker와 연결할 textField와 Ext.Picker를 호출할 수 있는 버튼을 선택했다.

textField와 Ext.Picker의 이벤트 처리 부분에는 상호 간 연계하는 부분이 구현되어 있다.

Ext.Picker를 생성한다.

고객명과 고객등급을 설정해 놓았으며, 고객명을 선택할 경우 고객의 등급이 화면에 나타난다.

var degree_picker = new Ext.Picker({
	slots:[
		{
			name:'degree_data', 
			title:'고객등급', 
			data:[
				{text:'홍길동', value:'VIP'}, 
				{text:'임걱정', value:'VIP'},
				{text:'나비야', value:'우량'},
				{text:'푸르른', value:'일반'}
			]
		}
	], 
		
	listeners:{
		"hide": function(picker) {
			console.log(picker.getValue().degree_data);
			Ext.getCmp("degree_field").setValue(picker.getValue().degree_data);
		}
	}
}) // degree_picker END

Ext.DatePicker는 Ext.Picker와 동일하지만 날짜를 사용하기 쉽게 년/월/일이 구분되어 나타나고

각각을 스크롤하여 선택한 후 Done 버튼을 클릭할 때 날짜의 포멧에 맞춰 항목을 설정하면 된다.

Ext.DatePicker를 생성할 때 day, month, year의 기본값을 설정한다.

필요하다면 현재 날짜를 읽어와 설정하는 것이 효율적이다.

var date_picker = new Ext.DatePicker({
	useTitles: true, 
	
	value:{
		day:	18, 
		month:	4, 
		year:	2011
	}, 
	
	listeners:{
		"hide": function(picker) {
			console.log(Ext.getCmp("date_field"));
			Ext.getCmp("date_field").setValue(picker.getValue().format('Y-m-d'));
		}
	}
}) // date_picker END

이벤트 처리와 Ext.getCmp() 함수의 사용을 잘 살펴봐야 한다.

픽커의 화면이 나타난 후 항목을 클릭할 때 이벤트를 발생시키는 것이 아니라

Done 버튼을 클릭해 hide 이벤트가 발생할 때에 값을 설정해 hide 이벤트를 처리해준다.

Ext.Picker 일 경우 전달 방법이다.

listeners:{
	"hide": function(picker) {
		console.log(picker.getValue().degree_data);
		Ext.getCmp("degree_field").setValue(picker.getValue().degree_data);
	}
}

픽커 사용하기 Sample Source.

Ext.setup({

	onReady: function() {
		
		var date_picker = new Ext.DatePicker({
			useTitles: true, 
			
			value:{
				day:	18, 
				month:	4, 
				year:	2011
			}, 
			
			listeners:{
				"hide": function(picker) {
					console.log(Ext.getCmp("date_field"));
					Ext.getCmp("date_field").setValue(picker.getValue().format('Y-m-d'));
				}
			}
		}) // date_picker END
		
		var degree_picker = new Ext.Picker({
			slots:[
				{
					name:'degree_data', 
					title:'고객등급', 
					data:[
						{text:'홍길동', value:'VIP'}, 
						{text:'임걱정', value:'VIP'},
						{text:'나비야', value:'우량'},
						{text:'푸르른', value:'일반'}
					]
				}
			], 
			
			listeners:{
				"hide": function(picker) {
					console.log(picker.getValue().degree_data);
					Ext.getCmp("degree_field").setValue(picker.getValue().degree_data);
				}
			}
		}) // degree_picker END
		
		var panel = new Ext.form.FormPanel({
			fullscreen:true, 
			layout:{
				align:'center', 
				pack:'center'
			}, 
			items:[
				{
					xtype:'textfield', 
					id:'degree_field', 
					label:'고객등급', 
					placeHolder:'Click', 
					autoCapitalisze: true, 
					useClearIcon: false
				}, 
				{
					xtype:'button', 
					ui:'normal', 
					text:'고객등급', 
					handler: function() {
						degree_picker.show();
					}
				}, 
				{
					xtype:'textfield', 
					id:'date_field', 
					label:'날짜', 
					placeHolder:'Click', 
					autoCapitalisze:true, 
					useClearIcon:false
				}, 
				{
					xtype:'button', 
					ui:'normal', 
					text:'날짜', 
					handler: function() {
						date_picker.show();
					}
				}
			]
		}) // panel END
		
	} // onReady END
})

http://doworld.net84.net/study/picker.html