Ext.form.Panel 설정

2024. 8. 3. 22:20Javascript/Sencha

{
	xtype: 'form',
	title: 'Login',
	frame: true,
	bodyPadding: 5,
	width: 250,
	// 전송할 url 정보 설정
	url: '/login',

	// defaultType 설정
	defaultType: 'textfield',
	items: [
		{
			fieldLabel: 'ID',
			name: 'username',
			allowBlank: false,
			labelWidth: 40,
			emptyText: 'User ID',
		},
		{
			fieldLabel: 'PW',
			name: 'password',
			allowBlank: false,
			labelWidth: 40,
			emptyText: 'Password',
			inputType: 'password',
		}
	],
	buttons: [
		{
			text: 'Reset',
			handler: function() {
				// 입력된 값 초기화
				this.up('form').getForm().reset();
			}
		},
		{
			text: 'Login',	
			handler: function() {
				let form = this.up('form').getForm();
				let fields = form.getFields();
				let errors = [];

				// 입력된 값의 정합성 체크
				if(form.isValid()) {
					form.submit({
						// header값 설정
						headers: {
							referer: /test',
						},
						// 파라메터값 설정
						params: {
							'_csrf': document.getElementById('_csrf').innerText
						},
						success: function(form, action) {
							// 서버에서 보내온 json값 가져오기
							let result = JSON.parse(action.response.responseText);
							window.location.href = result.redirect;
						},
						failure: function(form, action) {
							let result = JSON.parse(action.response.responseText);
							Ext.Msg.alert('Failed', result.msg);
						}
					});
				} else {
					Ext.Msg.alert('Warning', 'Check input data!');
				}
			}				
		}
	]
}