ExtJS : 자주쓰이는 Component별 config / event

ExtJS : config / event

간단한 이벤트에 대해 알아본다. 먼저 다음과 같은 구조를 그려보자.

지난 포스팅처럼 layout: 'border' 와 region 속성을 이용해 그릴 수 있다.

Ext.onReady(function(){
  Ext.create("Ext.container.Viewport", {
    renderTo: Ext.getBody(),
    border: true,
    layout: 'border',
    items:[{
      xtype: 'panel',
      region: 'west',
      flex:1,
      border:true
    },{
      xtype: 'panel',
      region: 'center',
      layout: 'border',
      flex:3,
      border:true,
      items:[{
        xtype: 'panel',
        region:'north',
        flex:2,
        border: true
      },{
        xtype: 'panel',
        region:'center',
        flex:1,
        border:true
      }]
    }]
  });
});

split, collasible, html

split을 사용하면 패널 사이에 마우스를 올렸을 때 크기조절이 가능하게 된다.

collasible은 true로 두면 panel의 title부분 우측에 화살표가 생겨, 접었다 폈다 할 수 있게 된다.

html에는 말 그대로 html태그를 그대로 사용하여 컴포넌트에 html를 사용할 수 있다.

items:[{
      xtype: 'panel',
      region: 'west',
      split: true,
      collapsible: true,
      title: '좌측입니다',
      flex:1,
      border:true,
      html:'<b>안녕하세요</b>'
    }

결과

패널 우측에 크기를 조절할 수 있게 바가 생겼고, html <b>태그를 이용해 굵게 표시된 글씨가 보인다.

타이틀을 누르면 이렇게 접어진다.

event부여 (handler)

event는 handler로 부여한다. 버튼에 클릭이벤트를 달아보았다.

  xtype: 'panel',
      region: 'center',
      layout: 'border',
      flex:3,
      border:true,
      items:[{
        xtype: 'panel',
        region:'north',
        flex:2,
        border: true,
        split: true,
        layout:'center',
        items: [{
          xtype: 'button',
          text: '버튼',
          handler: function(btn){
            alert('click!')
          }
        }]

결과

listeners

event를 여러개 주고 싶다면, listeners를 사용하면 된다.

아래는 하나라서 대괄호가 빠져 있지만, 여러 event를 부여하고 싶으면 jsonArray 형태로 여러개를 선언하면 된다.

          listeners : {
            click: function(btn) {
              alert('click!');
            }
          }