extjs button

    반응형
    이미지21

    [ ExtJS ] Toolbar 를 생성하고 위치를 지정하기

    ( 현 포스팅은 이전 포스팅 "[ ExtJS ] Button을 만들고 Event Listeners 달기." 에서 사용한 test.html 파일을 사용한다. ) 이전 포스팅에선 간단한 레이아웃에 버튼을 달고 이벤트를 적용시켜보았다. 이번엔 자주 이용하는 기능을 버튼 등으로 만들어 나란히 모아놓은 메뉴바인 Toolbar 를 추가해, 각 버튼을 좀 더 작관적으로 나누고 위치를 지정해보자. ExtJS 는 panel 에 Toolbar 를 만드는 속성으로 다음과 같은 방법 등을 지원한다. 1. dockedItems 2. Xbar 이제 순서대로 사용해 Toolbar 를 만들어 보자. 현재 기존의 test.html 의 코드는 아래와 같다. test.html dockedItems ExtJS 는 도구를 모아놓은 영역을 기..

    이미지21

    [ ExtJS ] Button을 만들고 Event Listeners 달기.

    이전 포스팅에서 언급한 Hbox, Vbox 로 간단한 화면을 만들어 버튼을 추가해보자. 먼저, 아래의 코드를 가진 test.html 이 있다고 가정하자. 여기서 xtype 은 input component 라고 생각하면 된다. textfield, datafield, numberfield 등 여러 type 을 지원하며, default 는 textfield 로 잡혀있다. 그리고 layout 은 vbox 이므로 item 들을 세로로 정렬해준다. 현재 test.html 의 실행화면은 아래와 같다. 자, 이제 버튼을 추가해보자. 아래와 같이 코드를 수정한다. 그럼 아래처럼 First Button 과 Second Button 이 생성된다. 이제 각 버튼을 클릭할 때 메세지 창을 띄우도록 이벤트를 추가해보자. 버튼에 ..