03 Ext JS 동작의 기본

---

위젯

• 화면을 구성하는 집합으로 목적에 맞는 다양한 기능과 외형을 갖음
• 각 컴포넌트는 xtype을 이용하여 정의
  • xtype사용하는 이유 : Ext.create문을 이용하는 것 보다 짧고 간결하기 때문에

위젯의 실시간 추가

• child widget을 실시간으로 추가하려면 add메소드를 사용
  • add메소드는 일반적으로 Ext.create문을 이용하여 생성하고 사용

---

쿼리

• Ext.ComponentQuery.query
• 여러 건인 경우 : 배열 형태의 인덱스 값을 추가하여 처리
  • ex) Ext.ComponentQuery.query('datafield')[0];
  • ex) name속성이 추가되었을 경우 Ext.ComponentQuery.query('datafield[name=myDateField1]')[0];
• Ext JS 6에서는 id를 읽어올 수 있는 Ext.getCmp() 메소드 제공. 이 메소드는 id기준으로 조회하기 때문에 배열형식이 아닌 한건만 반환할 수 있도록 유일한 id를 부여해야한다.
  • ex) Ext.getCmp('myDateFieldId');

• 사용 가능

  • ex) Ext.ComponentQuery.query('#myDateFieldId')[0];
• 자식 노드 찾을 때
  • ex) 공백사용 Ext.ComponentQuery.query('panel fieldset')[0]
  • ex) ‘>’사용 Ext.ComponentQuery.query('panel>fieldset')[0]
  • 객체를 찾았을 경우 객체로부터 down메소드 사용
    • 첫번째 위젯 하나만 해당하므로 배열 사용x
    • ex) 위젯.down(’fieldset datefieldId’);
• 반대로 부모노드의 위젯 찾는 경우 up메소드 사용
  • ex) 위젯.up('fieldset');
• 자매노드 : previousSibling 또는 nextSibling
  • ex) 위젯.previousSibling('[name=myDateField11]');
• 객체를 사용하여 query문만 이용
  • ex) panel.query('datefield', panel)[0];
• 객체의 여러 위젯 동시에 호출 : ,(콤마) 사용
  • ex) panel.query('datefield, textfield')[0];

---

기본 이벤트

1. handler라는 이벤트 함수 부여하기
2. listeners 추가하기

{
	위젯
	listeners:{
		click:function() {
			... (이벤트 처리) ...
		}
}

• 위 방법은 정적인 방법. 동적으로 이벤트를 추가하려면 addListener를 이용하거나 on을 이용하여 추가

위젯.addListener('이벤트명', function(){
    ...(이벤트 처리)...
});

위젯.on('이벤트명', function() {
    ...(이벤트 처리)...    
})

---

엘리먼트를 이용한 이벤트 확장

• 기본적으로 제공되지 않는 이벤트를 부여하려면 해당 위젯의 element를 사용할 수 있음
• element의 이벤트를 받아 처리하려면 listeners에 el을 붙여 element의 이벤트임을 정의

listeners: {
    change:function() {
        console.log('datafield1 change listener', arguments);
    },
    el:{
        click:function() {
            console.log('datefield in click', arguments);
        }
    }
}

---

이벤트 예제

Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
    title:'Panel입니다.',
    renderTo:Ext.getBody(),
    bodyPadding:5,
    width:600,
    height:250,
    items:[{
        xtype:'fieldset',
        title:'입력하세요',
        items:[{
            xtype:'datefield',
            format:'Y-m-d',
            fieldLabel:'시작일',
            name:'myDateField1',
            handler:function() {
                console.log('datefield handler');
            },
            listeners:{
                change:function(){
                    console.log('datafield1 change listener', arguments);
                },
                el:{
                    click:function() {
                        console.log('datefield in click', arguments);
                    }
                }
            }
        },{
            xtype:'datefield',
            format:'Y-m-d',
            name:'myDateField2',
            fieldLabel:'종료일'
        },{
            xtype:'button',
            name:'button1',
            text:'확인',
            handler:function() {
                var temp1 = Ext.ComponentQuery.query('datefield[name=myDateField1]')[0];
                var temp2 = Ext.ComponentQuery.query('datefield[name=myDateField2]')[0];
                console.log('temp1', temp1);
                temp2.setValue(temp1.getValue());
            },
            listeners:{
                click:function() {
                    console.log('button in click', arguments);
                }
            }
        }]
    }],
    listeners:[
        {
            delegate:'button[name=button1]',
            click:function() {
                console.log('.................delegate button in click', arguments);
            },
        }
    ]
});
var button1 = Ext.ComponentQuery.query('button[name=button1]')[0];
button1.addListener('click', function() {
    console.log('button1 addListener click', arguments);
});
button1.on('click', function() {
    console.log('button1 on click', arguments);
});
var dateField1 = Ext.ComponentQuery.query('datefield[name=myDateField1]')[0];
dateField1.addListener('change', function() {
    console.log('dateField1 change', arguments);
});
var dateField1 = Ext.ComponentQuery.query('datefield[name=myDateField1]')[0];
dateField1.el.addListener('click', function() {
    console.log('dateField1 click', arguments);
});
})