ExtJS Window Component / Tap Panel

ExtJS Window Component / Tap Panel

window 컴포넌트는 응용프로그램 창으로 사용되기 위한 특수패널이다. 

사이즈 조절과 최대/최소화 등이 가능하다.

Windows can also be linked to a Ext.ZIndexManager or managed by the Ext.WindowManager to provide grouping, activation, to front, to back and other application-specific behavior.

By default, Windows will be rendered to document.body. To constrain a Window to another element specify renderTo.

선언

Ext.window.Window로 선언하고, alias는 window다.

Ext.onReady(function(){
  var win = Ext.create('Ext.window.Window');
  win.show();
});

위는 JavaScript 문법으로 변수에 담아 show() 메소드를 호출해 window를 띄운 것이다. 

아래와 같은 조그마한 창이 등장한다.

autoShow는 기본값이 false다. 기본적으로 어플리케이션 창으로 활용되기 때문에 선언을 해 놓고 필요한 곳에서 불러오기 때문이다. 아래와 같이 선언하면 위 사진과 동일한 결과가 나온다.

Ext.onReady(function(){
  Ext.create('Ext.window.Window',{
    autoShow: true
  });
});

사용

기본적인 사용법은 다른 컴포넌트와 비슷하다.

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel',{
    width:300,
    height:300,
    border:true,
    renderTo:Ext.getBody(),
    items:[{
      xtype:'button',
      text:'패널버튼'
    }]
  })
  Ext.create('Ext.window.Window',{
    autoShow: true,
    width:300,
    height:300,
    title: 'window title',
    items: [{
      xtype: 'button',
      text: '버튼'
    }]
  });
});

panel 안에 버튼을 넣고, window는 따로 선언한 모습.

modal

modal: bolean 속성을 주면 창이 띄워졌을 때 창을 제외한 바깥이 색깔이 검게 변하면서 비활성화되어 클릭과 조작이 불가하며 창을 종료해야만 활성화된다. 안드로이드의 modal과 흡사하다.

resizable

resizable: boolean 으로 크기조절이 가능/불가하게 할 것인지 제어할 수 있다.

크기의 제한

minWidth, minHeight 속성을 부여하면 정해진 값 이하로는 줄일 수 없고

maxWidth, maxHeight 속성을 부여하면 정해진 값 이상으로 늘릴 수 없다.

넷 다 number 값을 가진다.

closable

closable: boolean 을 사용해 창 우측 상단의 종료버튼(X)를 없앨 수 있다. 기본값은 true다.

maximizable

maximizable: boolean 을 사용해 최대화버튼을 활성화할 수 있다.

  Ext.create('Ext.window.Window',{
    autoShow: true,
    width:300,
    height:300,
    minWidth: 100,
    minHeight: 100,
    maxWidth: 500,
    maxHeight: 500,
    title: 'window title',
    modal: true,
    resizable: false,
    closable: false,
    maximizable:true,
    items: [{
      xtype: 'button',
      text: '버튼'
    }]
  });

종료버튼(X)를 없애고 최대화 창을 생성했다.

보통은 아래와 같이 handler를 이용해 특정 이벤트가 발생하면 window가 뜨게 한다.

Ext.onReady(function(){
  Ext.create('Ext.panel.Panel',{
    width:300,
    height:300,
    border:true,
    renderTo:Ext.getBody(),
    items:[{
      xtype:'button',
      text:'패널버튼',
      handler : function(btn){
        var win = Ext.create('Ext.window.Window',{
          width:300,
          height:300,
          title: 'window title',
          modal: true,
          items: [{
            xtype: 'button',
            text: '버튼'
          }]
        });
        win.show();
      }
    }]
  });

Tap Panel

탭 패널은 위와 같은 것으로 웹이든 모바일이든 자주 쓰여 익숙한 컴포넌트다.

앞서 포스팅한 Ext.layout.container.Card 와 세트로 자주 쓰인다.

Ext.tab.Panel로 선언하고 alias는 tabpanel 이다. 

Ext.onReady(function(){
  Ext.create('Ext.tab.Panel',{
    width:500,
    height:500,
    renderTo: Ext.getBody(),
    items:[{
      xtype: 'panel',
      title: 'tab1'
    },{
      xtype: 'panel',
      title: 'tab2'
    },{
      xtype: 'panel',
      title: 'tab3'
    },{
      xtype: 'panel',
      title: 'tab4'
    }]
  });
});
 

tabPosition

tabPosition 속성을 이용해 탭의 위치를 변경할 수 있으며, bottom / left / right 등으로 위치를 조정한다.

기본값은 top이다.

Ref

Window: http://docs.sencha.com/extjs/6.5.3/classic/Ext.window.Window.html

Tab Panel: http://docs.sencha.com/extjs/6.5.3/classic/Ext.tab.Panel.html