오늘녹화는 유독 잡음이 심하네요.. ㅠㅠ 

    다음강좌부터 최대한 잡음줄이고 ExtJS 강좌 진행하도록 하겠습니다.

    양해부탁드리고 수강해주세요 ^^


     ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼


    https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ



    이번강좌에 소개할 버튼컴포넌트 종류 


    xtype : 'button' / 'splitbutton' / 'segmentedbutton'



    xtype : 'button'


    기본 버튼컴포넌트이며, 버튼에 글자를 넣고 싶으면 text 속성에 value값을 정해주면 글자가 출력이 됩니다.




    아이콘을 넣어 주고 싶을 경우, iconCls 아이콘 스타일이 정의 된 클래스명을 지정해주면 됩니다.

    default로 font-awesome이 sencha cmd로 설치 하였을 때 기본적으로 지원이 되므로,


    http://fontawesome.io/icons





    상단 주소 접속 후,  원하고자 하는 이미지글자를 클릭하여 원하는 클래스명을 선택하여 iconCls config 의 값으로 정의해주면 아이콘이 버튼에 출력되는 것을 확인 할 수 있습니다.


    대신, font-awesome 아이콘 사용의 경우 별도로 "x-fa" 라는 클래스명을 같이 정의해주어야 화면에 출력됩니다.


    예를들어 font-awesome의 내가 선택한 아이콘의 클래스명이 "fa-plus" 라고 가정 할 경우


    iconCls : 'x-fa fa-plus'


    라고 지정해주어야 합니다.




    그리고 버튼사이즈도 width / height 속성을 주어서 변경이 가능하지만 scale이라는 속성을 정의해서 버튼 크기를 변경 할 수 있습니다.


    scale에서 미리 정의되어 사용할 수 있는 value 값은 "small / medium / large" 이렇게 3가지를 정의 해서 버튼 속성을 변경 할 수 있습니다.




    토글 버튼을 만들고 싶으시다면 ?  enableToggle config의 value값을 true라고 정의해줍니다.




    버튼메뉴를 구성하고 싶을경우, menu config를 json 배열 형식으로 여러개를 작성 해주면, 정의한 만큼의 메뉴 목록을 구성 할 수 있습니다.


    xtype : 'button',

    menu : [

      {

          text : "메뉴1"

      },

      {

          text : "메뉴2"

      }

    ]





    xtype : 'splitbutton'


    만일, 메뉴목록 중, 우측 화살표시버튼만 클릭해서 메뉴목록을 출력시키고 좌측 문구 또는 아이콘에 해당되는 영역을 클릭할 때, 일반적인 버튼 클릭 이벤트를 발생시키고자 할 경우에는 xtype을 "splitbutton" 이라고 정의해줍니다.





    xtype : 'segmentedbutton'


    버튼들을 그룹화시킨 컴포넌트로써, 버튼클릭이 유지된다는 장점이 있습니다.

    예를들어, 세그먼트버튼에 items 에 3개의 버튼을 정의했다 가정합니다.

    첫번째 버튼이 클릭했을 경우, 첫번째 버튼만 클릭상태 유지되고, 이외의 버튼들을 클릭상태를 유지하지 않습니다.



    만일, 단건으로 클릭상태 유지하는 것이 아니고, 여러개의 다중 토글기능이 가능하게끔 정의하고 싶다면,  allowMultiple 속성의 value 값을 true라고 정의해줍니다.



    Posted by 몽고