ExtJS : Buttons

ExtJS : Buttons

기본 버튼들과 크기조절, 버튼에 아이콘 삽입 등에 대해 알아본다.

Preview

레이아웃과 버튼을 조합해서 아래와 같이 eclipse UI를 비슷하게 만들어보자.

layout

border를 이용해 레이아웃을 잡고, 위에 메뉴역할을 할 버튼 몇 개를 넣었다.

Ext.onReady(function(){
  Ext.create('Ext.container.Viewport',{
    layout:'border',
    renderTo: Ext.getBody(),
    items:[{
      xtype: 'panel',
      height:100,
      region:'north',
      header:false,
      items:[{
        xtype: 'toolbar',
        items:[{
          xtype:'button',
          text: 'File'
        },{
          xtype:'button',
          text: 'Edit'
        },{
          xtype:'button',
          text: 'Source'
        }]
      },{
        xtype: 'toolbar',
        items:[{
          xtype:'button'
        },{
          xtype:'button'
        },{
          xtype:'button'
        }]
      }]
    },{
      xtype: 'panel',
      width:150,
      region:'west',
      split: true,
      title: 'Project Explorer'
    },{
      xtype: 'panel',
      flex:1,
      title:'',
      header:false,
      region:'center',
      layout:'border',
      items:[{
        xtype:'panel',
        flex:2,
        title:'app.js',
        region:'center'
      },{
        xtype:'panel',
        flex:1,
        title:'Servers',
        region:'south'
      }]
    }]
  });
});

결과

icon

링크에 들어가서 원하는 모양의 아이콘을 찾고 해당 아이콘의 별칭을 복사한다.

iconCls 속성에 붙여넣기하는데, 복사한 별칭 앞에 x-fa 를 붙여줘야 제대로 출력된다.

        items:[{
          xtype:'button',
          iconCls: 'x-fa fa-plus'
        },{
          xtype:'button',
          iconCls: 'x-fa fa-floppy-o'
        },{
          xtype:'button',
          iconCls: 'x-fa fa-desktop'
        }]

Scale

크기는 scale로 제어한다. 왼쪽부터 차례대로 small, medium, large 크기다.

        {
          xtype: 'button',
          iconCls: 'x-fa fa-play',
          scale: 'small'
        },{
          xtype: 'button',
          iconCls: 'x-fa fa-pause',
          scale: 'medium'
        },{
          xtype: 'button',
          iconCls: 'x-fa fa-stop',
          scale: 'large'
        }

Toggle

한번 버튼을 클릭하면 누른 상태로 고정되고, 다시 한 번 클릭하면 해제되는 것이 토글이다.

일반 버튼이 누르고 떼면 원상복구되는 것과 차이가 있다.

위처럼 클릭하고 마우스를 떼도 눌러진 상태로 보인다.

{
    xtype: 'button',
    iconCls: 'x-fa fa-stop',
    scale: 'large',
    enableToggle: true
}

Menu

위 File 버튼처럼 눌렀을 때 하위메뉴가 나오게 하려면 menu 속성을 주면 된다.

menu는 jsonArray 값을 갖는다. 

Edit버튼처럼 메뉴버튼 부분이 분리되게 하려면 splitbutton이라고 선언한다.

왼쪽 Edit을 누르는 것과 오른쪽 menu 부분을 누르는 것이 분리되어 Edit 텍스트는 클릭이 되지 않게 된다.

items:[{
        xtype: 'toolbar',
        items:[{
          xtype:'button',
          text: 'File',
          menu: [{
            text: 'New'
          },{
            text: 'Open File'
          },{
            text: 'Close'
          }]
        },{
          xtype:'splitbutton',
          text: 'Edit',
          menu: [{
            text: 'Undo typing'
          },{
            text: 'Redo'
          },{
            text: 'Cut'
          }]
        },{
          xtype:'button',
          text: 'Source'
        }]

icon in menu

하위메뉴 왼쪽에 공백칸이 있는데 이 곳에 아이콘을 삽입할 수 있다.

위에서 버튼에 아이콘을 삽입한 것과 같은 방법을 사용하면 된다.

        menu: [{
            text: 'New',
            iconCls: 'x-fa fa-file'
          },{
....

Segmented button

버튼들이 그룹화되어 하위 버튼아이템들 중 하나만 선택된다.

radiobutton을 생각하면 쉽다.

그러나 allowMultiple: boolean (defalut false) 속성으로 다중선택이 가능하게 할 수도 있다.

{
          xtype: 'segmentedbutton',
          items:[{
            xtype:'button',
            text: 'Refactor'
          },{
            xtype:'button',
            text: 'Navigate'
          },{
            xtype:'button',
            text: 'Search'
          }]
        }

결과

app.js

Ext.onReady(function(){
  Ext.create('Ext.container.Viewport',{
    layout:'border',
    renderTo: Ext.getBody(),
    items:[{
      xtype: 'panel',
      height:100,
      region:'north',
      header:false,
      items:[{
        xtype: 'toolbar',
        items:[{
          xtype:'button',
          text: 'File',
          menu: [{
            text: 'New',
            iconCls: 'x-fa fa-file'
          },{
            text: 'Open File'
          },{
            text: 'Close'
          }]
        },{
          xtype:'splitbutton',
          text: 'Edit',
          menu: [{
            text: 'Undo typing'
          },{
            text: 'Redo'
          },{
            text: 'Cut'
          }]
        },{
          xtype:'button',
          text: 'Source'
        },{
          xtype: 'segmentedbutton',
          allowMultiple: true,
          items:[{
            xtype:'button',
            text: 'Refactor'
          },{
            xtype:'button',
            text: 'Navigate'
          },{
            xtype:'button',
            text: 'Search'
          }]
        }]
      },{
        xtype: 'toolbar',
        items:[{
          xtype:'button',
          iconCls: 'x-fa fa-plus'
        },{
          xtype:'button',
          iconCls: 'x-fa fa-floppy-o'
        },{
          xtype:'button',
          iconCls: 'x-fa fa-desktop'
        },{
          xtype: 'button',
          iconCls: 'x-fa fa-play',
          scale: 'small'
        },{
          xtype: 'button',
          iconCls: 'x-fa fa-pause',
          scale: 'medium'
        },{
          xtype: 'button',
          iconCls: 'x-fa fa-stop',
          scale: 'large',
          enableToggle: true
        }]
      }]
    },{
      xtype: 'panel',
      width:150,
      region:'west',
      split: true,
      title: 'Project Explorer'
    },{
      xtype: 'panel',
      flex:1,
      title:'',
      header:false,
      region:'center',
      layout:'border',
      items:[{
        xtype:'panel',
        flex:2,
        title:'app.js',
        region:'center'
      },{
        xtype:'panel',
        flex:1,
        title:'Servers',
        region:'south'
      }]
    }]
  });
});