ExtJS 기준 패널과 같은 도화지 역할을 하는 껍데기에 상하좌우 모든 위치에 툴바적용이 가능합니다.
이번 포스팅은 패널에 툴바를 위치별로 생성하는 법을 알아보고 추가로 생성된 툴바에 자주 사용되는
버튼들을 생성해본 후 클릭이벤트를 적용해보도록 하겠습니다.
패널 도화지를 만드는 방법은 레이아웃만들 때 다루어 보았습니다.
panel에 툴바를 만드는 속성은 tbar/lbar/rbar/fbar/bbar속성을 이용하면 쉽게 위치별로 만드는것이 가능합니다.
추가로 dockedItems라는 속성으로도 툴바생성이 가능합니다.
ExtJS사이트의 샘플에서는 dockedItems를 주로 사용하여 툴바를 만들어줍니다만
이번 포스팅에서는 위의 5가지 속성으로만 툴바를 만들어보도록 하겠습니다.
tbar : tab bar를 의미하며 도화지영역 컨텐츠 내용 상단에 위치
lbar : left bar를 의미하며 도화지영역 컨텐츠 내용 좌측에 위치
rbar : right bar를 의미하며 도화지영역 컨텐츠 내용 우측에 위치
bbar : bottom bar를 의미하며 도화지영역 컨텐츠 내용 하단에 위치
fbar : footer barf를 의미하며 bbar와 동일한 위치인 하단에 놓이지만 툴바의 배경 및 UI가 다릅니다.
다음 코드를 보시겠습니다.
패널에 툴바 적용하기 샘플코드
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 500,
height: 400,
title : '도화지의 타이틀영역',
html : '도화지의 컨텐츠영역',
//해당 속성의 KEY값만을 변경함으로써 툴바의 위치 변경이 가능
bbar : [{
xtype : 'button',
text : '버튼1'
},{
xtype : 'button',
text : '버튼2'
}]
});
})
하단에 위치시킬 bottom bar속성을 주고 xtype이 button인 컴포넌트 2개를 생성하여 위치시켜 보았습니다.
여기서 xtype은 전에 말씀드렸던것처럼 <input type=""/> 와 비슷한 개념으로
ExtJS만의 html태그라고 생각하시면 되겠습니다.
bbar(bottom toolbar)코드 실행결과
하단에 bbar 속성이 적용되여 버튼컴포넌트들이 생성이 되었습니다.
상단 코드중 bbar 라는 key값을 lbar/rbar/tbar/fbar 등을 적용하여 각각의 위치 및 결과를 확인하겠습니다.
fbar(footer toolbar)코드 실행결과
Crisp 테마 기준으로 bbar와 같은 하단 영역이더라도 fbar버튼이 조금 더 깔끔한거 같네요.
tbar(tabbar toolbar)코드 실행결과
lbar(left toolbar)코드 실행결과
rbar(right toolbar)코드 실행결과
위치별로 생성된 툴바를 알아보았습니다.
json의 key/value를 이용만을 해서 컴포넌트를 생성한다는것이 심플하지 않으신가요??
저...저만 그런가요??;;;
테마별로 툴바의 디자인이 다르니 마음에 드시는 방법으로 작업하시면 되겠습니다.
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
다음은 버튼컴포넌트 클릭시 동작하는 클릭이벤트를 알아보겠습니다.
이전포스팅에 Card Layout 예를 들었을때 handler라는 속성을 보셨을 겁니다.
2014/10/20 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox)
보통 이벤트 발생시, listeners라는 속성으로 이벤트 핸들링을 해줍니다.
버튼컴포넌트 역시 이 리스너속성을 지원해주지만
이번장에서는 리스너대신 핸들러속성을 사용하도록 하겠습니다.
리스너의 경우는 추후에 포스팅 하도록 하겠습니다.
버튼컴포넌트에 클릭이벤트를 지원해주는것이 handler입니다.
handler 내에서 이제 json객체를 사용하는것이 아닌 내부적으로 일반 자바스크립트 코드 적용이 가능합니다.
미리 정의한 툴바에 '버튼1'이라는 문구를 가진 컴포넌트에 클릭이벤트를 발생시켜
ExtJS에서 제공하는 ALERT 위젯을 띄워보도록 하겠습니다.
버튼클릭이벤트 관련 샘플코드
Ext.onReady(function(){
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 500,
height: 400,
title : '도화지의 타이틀영역',
html : '도화지의 컨텐츠영역',
//해당 속성의 KEY값만을 변경함으로써 툴바의 위치 변경이 가능
bbar : [{
xtype : 'button',
text : '버튼1',
handler : function(btn){
Ext.Msg.alert('버튼클릭', '안녕버튼1?');
}
},{
xtype : 'button',
text : '버튼2'
}]
});
})
버튼클릭 이벤트 실행결과
툴바와 버튼 클릭이벤트에 대해서 알아보았습니다.
by 개발로짜
'웹개발강좌 > ExtJS' 카테고리의 다른 글
| ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기 (4) | 2014.10.23 |
|---|---|
| ExtJS 강좌 - 메뉴버튼을 포함한 다양한 버튼컴포넌트 구현해보기 (4) | 2014.10.22 |
| ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox) (0) | 2014.10.20 |
| ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Absolute,Accordion,Border) (2) | 2014.10.20 |
| ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편 (0) | 2014.10.18 |
지난 시간 모든 레이아웃을 소개하기에는 너무 길어질거 같아
남은 레이아웃에대한 포스팅을 이어서 진행하도록 하겠습니다.
Card와 Tab,Fit,HBox/VBox에 대한 소개 및 이해에 관하여 작성하도록 하겠습니다.
이번에 다룰 레이아웃에 대한 소개및 그외 레이아웃대한 소개글이 들어있는 이전 포스팅보러가기
이전 포스팅을 보시고 다루고자 할 레이아웃에 대한 이해를 하고 오셨나요?
그럼 본격적으로 진행을 해보도록 하겠습니다.
연동이 되지 않으신 분들은 하단 포스팅을 확인해주세요
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
Card Layout 샘플코드
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
//레이아웃유형 카드
layout : 'card',
width: 500,
height: 400,
items:[
{
title: '1page',
html: '첫페이지 나오는 컨텐츠영역'
},
{
title: '2page',
html: '두번째페이지 나오는 컨텐츠영역'
},
{
title: '3page',
html: '마지막페이지 나오는 컨텐츠영역'
}
],
fbar : [{
xtype : 'button',
text : '이전페이지',
handler : function(obj){
if(obj.up("panel").getLayout().getPrev()) {
obj.up("panel").setActiveItem(obj.up("panel").getLayout().getPrev());
}
}
},{
xtype : 'button',
text : '다음페이지',
handler : function(obj){
if(obj.up("panel").getLayout().getNext()) {
obj.up("panel").setActiveItem(obj.up("panel").getLayout().getNext());
}
}
}]
});
})
카드 레이아웃은 버튼 컴포넌트를 이용하여 화면을 이동을 해야 하기 때문에 panel 도화지를 이용하였습니다.
왜 계속 viewport만 사용하다 panel을 사용했느냐? 모르셔도 됩니다.
레이아웃의 강좌에서는 items와 layout 속성만을 익히시고 나머지 옵션들은 이후에 천천히 다루도록 하겠습니다.
fbar가 뭐고 handler안에 있는 함수들은 뭐지? 이 역시 모르셔도 됩니다.
너무 무심한거 아니냐고요?
이 포스팅에서는 각각의 레이아웃들의 의미를 이해하는것이 목적이므로 속성들에 대해서는 이후 다루도록 하겠습니다.
Card Layout 결과
카드레이아웃은 이전/다음페이지 버튼을 클릭하여 페이지 이동이 되시는것을 확인할 수 있습니다.
다음으로는 카드레이아웃(탭 레이아웃) 입니다.
카드레이아웃과 동일하지만 다른점이 있다면 탭레이아웃은 당연하겠지만 탭바가 존재한다는 것입니다.1
툴바에 버튼을 클릭하여 동일하게 이동이 가능하나 탭바가 있는데 궂이 툴바가 필요할까요?
코드를 먼저 보시죠
Tab Layout(다른말로 TabPanel) 샘플코드
Ext.onReady(function(){
//기존 card 레이아웃의 도화지가 일반 패널이었다면 tab은 layout 속성대신 Ext.tab.Panel이라는 탭도화지를 선언하면 됩니다.
Ext.create("Ext.tab.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 500,
height: 400,
items:[
{
title: '1page',
html: '첫페이지 나오는 컨텐츠영역'
},
{
title: '2page',
html: '두번째페이지 나오는 컨텐츠영역'
},
{
title: '3page',
html: '마지막페이지 나오는 컨텐츠영역'
}
]
});
})
위에 주석처럼 Tab레이아웃은 layout 속성을 변경하는것이 아니고
최상단 도화지의 컴포넌틑종류를 Ext.tab.Panel 적용을 해주는 것입니다.
Tab Layout(다른말로 TabPanel) 실행결과
다음 설명할 레이아웃종류는 Fit 입니다.
fit 레이아웃을 적용하게 되신다면 도화지의 자식의 레이아웃이 자동으로 width/height 100% 맞춰주는 레이아웃입니다.
Fit Layout 샘플코드
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 400,
height: 300,
//레이아웃 유형 fit
layout : 'fit',
items:[
{
title: '가득차는 자식레이아웃',
frame : true,
html: '자식레이아웃 1개만 부모레이아웃의 높이에 맞춰서 가득 채워집니다'
}
]
});
})
Fit Layout 실행결과
fit란?
부모 레이아웃의 높이가 얼마가 되었던간에 layout 속성값을 fit을 주게되면
무조건 자식의 width/height가 100%로 적용이 되는것이라고 이해하시면 되겠습니다.
단, 자식노드는 제일 처음에 정의된 1개로 100% 채워줍니다.
다음 그림을 참고하세요.
위 그림처럼 부모도화지에 layout:'fit' 을 지정해주게 되면 자식 패널이 가득 차게 되는 구조입니다.
만약 자식 레이아웃이 2개다? 그래도 방금 말씀드린것처럼 첫번째 자식 레이아웃만 가득차게 되며 두번째 자식 레이아웃은 화면에 나오지 않습니다.
위와같은 결과가 나오게 될것입니다 ^^
layout : 'fit' 속성을 준 자식 레이아웃은 한개만 지정이 가능하다만 기억하시면 되겠습니다.
그럼 layout : 'fit' 속성을 뭐하러 쓰느냐 라고 생각하실 분들이 계시겠지만
사용하다보면 layout : 'fit'은 필수(?)라고 할정도로 자주 쓰이니 기억해주세요.
마지막으로 소개할 레이아웃은 HBox/VBox 레이아웃입니다.
HBox : Horizon Box
VBox : Vertical Box
HBox는 가로로 패널들을 정렬시켜주는 레이아웃이고
VBox는 세로로 패널들을 정렬시켜주는 레이아웃입니다.
HBox Layout 샘플 코드
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.panel.Panel",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
width: 400,
height: 300,
//레이아웃 유형 fit
layout : 'hbox',
items:[
{
title: '가로정렬 자식레이아웃1',
flex : 1,
frame : true,
html: '가로정렬내용1'
},
{
title: '가로정렬 자식레이아웃2',
flex : 1,
frame : true,
html: '가로정렬내용2'
}
]
});
})
HBox Layout 실행 결과
위와 같이 HBox 타입으로 레이아웃 설정시 가로로 출력이 되는 것을 확인 하였습니다.
VBox는 위치변경만 될뿐이므로 layout : 'vbox' 속성은 별도로 확인해보시면 되겠습니다.
지금까지 레이아웃의 종류들을 알아보았습니다.
다음장에는 패널을 이용한 툴바의 위치설명 및 툴바에 생성된 버튼들의 태그 이벤트에 대해서 포스팅을 해보도록 하겠습니다.
by 개발로짜
'웹개발강좌 > ExtJS' 카테고리의 다른 글
| ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기 (4) | 2014.10.23 |
|---|---|
| ExtJS 강좌 - 메뉴버튼을 포함한 다양한 버튼컴포넌트 구현해보기 (4) | 2014.10.22 |
| ExtJS 강좌 - 툴바위치 및 버튼 클릭 이벤트 알아보기 (0) | 2014.10.21 |
| ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Absolute,Accordion,Border) (2) | 2014.10.20 |
| ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편 (0) | 2014.10.18 |
ExtJS의 레이아웃종류는 약 11종류를 제공해줍니다.
Absolute, Accordion, Border, Card, Tab, Fit, Hbox/Vbox, Table/Center/Column Layout
이번장에서는 각 레이아웃별 간단한 설명 및 Absolute,Accordion,Border레이아웃에 대한
샘플 코드 및 실행결과에 대하여 알아보도록 하겠습니다.
Absolute Layout
레이아웃명칭 그대로 절대적으로 레이아웃이 위치에 정해지면 브라우저 화면 사이즈가 바뀌더라도 지정된 위치에 fix 되는 레이아웃입니다.
특이한 경우를 제외하고는 잘 사용하지 않는 레이아웃입니다 ^^
Accordion Layout
jQueryUI에서도 제공되는 어코디언 레이아웃입니다.
어코디언을 사용할 경우는 여러개의 컨텐츠(?)들을 한화면에 뿌리기에 부담이 될 경우 사용하시면 되겠습니다.
한번의 클릭당 하나의 컨텐츠를 시각적으로 확인하기 깔끔한 레이아웃입니다.
제 블로그의 스킨에도 사용된 부분은 좌측에 위젯관련 사이드바에 적용이 되었습니다.
Border Layout
이 레이아웃은 초기에 화면의 전체 레이아웃을 잡는데 유용한 레이아웃입니다.
"Border"를 사용하게 되면 Header/Footer/Side 등의 구조를 쉽게 잡게 해줍니다.
거의 ExtJS의 필수로 알아야하는 레이아웃(?) 이라고 저는 생각합니다.
Card Layout
카드레이아웃은 컨텐츠 내용의 화면 전환을 하는것이라고 생각하시면 되겠습니다.
예를들면 스마트폰 어플화면에서 메뉴 또는 게시판 목록의 내용을 클릭하면 화면이 스르륵 슬라이드 되면서 다른 내용의 페이지로 이동이 되는기능을 자주 보셨을 것인대
비슷한 기능이라 생각하시면 될것입니다.
Tab Layout
탭기능은 따로 말씀드리지 않아도 되나 탭 레이아웃 역시 카드레이아웃과 동일한 레이아웃구조입니다.
탭과카드레이아웃의 차이점이라면 탭바의 존재유무정도겠네요.
Fit Layout
화면을 꽉채우는 레이아웃입니다.
이 레이아웃 역시 Border와 같이 자주 사용되는 레이아웃입니다.
Fit이라는 레이아웃을 사용될경우, 현재 지정된 상단부모의 영역에 맞추어 자동으로 사이즈를 채워주는 역할을 하는 레이아웃입니다.
글로는 설명드리기는 애매하지만 이후 예를 들면서 진행시 서서히 이해가 가실것입니다.
HBox/VBox Layout
HBox : 패널들을 가로로 출력시켜주는 레이아웃
VBox : 패널들을 세로로 출력시켜주는 레이아웃
이 레이아웃들은 로그인 또는 회원가입등 폼 구조를 잡아줄때 주로 사용을 합니다.
Table/Center/Column Layout
위처럼 나머지 3개의 레이아웃이 존재하는데 이 레이아웃들의 데핸 설명은 제외하도록 하겠습니다.
저도 사용해본적이 없어서 전달드리기가 애매~해서입니다 ;;
위와같이 다양한 레이아웃을 ExtJS에서는 제공을 해주고 있습니다.
실제로 코드 작성전에 밑의 내용을 꼭 이해해주셨으면 좋겠습니다.
※ ExtJS의 컴포넌트 생성의 경우 JSON 규격으로 KEY/VALUE값으로만으로 생성이 가능합니다.
(기존의 일반 스크립트를 이용하여 구현했던 분들에게는 이해하기 약간 난해하실수 있습니다.)
그렇다면 이제 각 레이아웃의 이해를 돕고자 레이아웃관련 샘플코드를 몇가지 작성해보도록 하겠습니다.
레이아웃을 그리기기전에 도화지나 A4용지와 같은 역할을 해주는 껍데기가 있어야 하겠죠?
도화지 역할을 해주는 컴포넌트들은 'panel', 'container', 'viewport' 3가지정도로 요약할 수 있겠습니다.
container같은 경우는 저는 거의 사용을 하지 않고
최상단 부모 껍데기를 제작하고자 할 경우에는 viewport를 사용하고
viewport의 자식 레이아웃을 그릴경우에는 panel을 사용합니다.
어떠한 껍데기로 생성하여 컴포넌트를 그릴지는 스스로 결정을 하시길 바랍니다.
그럼 지난강좌 INCLUDE를 기본적으로 한 CSS/JS파일이 존재한다 가정하고 레이아웃을 그려보도록 하겠습니다.
연동법은 하단 포스팅을 참고해주세요
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
그럼 제일먼저 Absolute Layout에 대하여 예를 들어보도록 하겠습니다.
ExtJS 사이트의 샘플코드는 Ext.panel.Panel이란 도화지에 생성하여
예를들지만 저같은 경우에는 viewport라는 도화지를 이용하여 예를 들도록 하겠습니다.
viewport 도화지의 장점이라 하면, 별도의 높이속성을 지정하지 않아도
가로/세로의 간격이 자동으로 브라우저의 100%를 채워줍니다.
Absolute Layout 샘플코드
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.container.Viewport",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
//absolute 레이아웃
layout : 'absolute',
items:[
{
//패널의 제목
title: '첫번째 패널',
//패널의 x,y 좌표위치
x: 50,
y: 50,
//패널의 Body영역에 들어갈 HTML내용
html: 'x좌표 50/y좌표 50',
//패널의 넓이/높이
width: 200,
height: 100,
//테두리두께 옵션
frame: true
},
{
//패널의 제목
title: '두번째패널',
//패널의 x,y 좌표위치
x: 125,
y: 125,
//패널의 Body영역에 들어갈 HTML내용
html: 'x좌표 125/y좌표 125',
//패널의 넓이/높이
width: 200,
height: 100,
//테두리두께 옵션
frame: true
}
]
});
})
Absolute Layout 결과
위처럼 절대좌표로 인해서 겹쳐지는 화면을 확인 할수 있습니다.
설명을 드리자면 Ext.create부분에 panel 객체를 하나 생성 후 items 하단내에 sub 컴포넌트들을 2개 정의하였습니다.
흰바탕이 도화지 역할을 하는 첫번째 viewport객체이고
items 내부에 각 x/y좌표 및 title/html등의 옵션을 준 panel 컴포넌트들이 도화지 위에 그려진 것입니다.
items내에 xtype이란것이 지정되지 않았지만 지정을 하지 않으셨다면
기본 레이아웃의 xtype은 panel로 인식되니 xtype 속성을 붙여주셔도 무관합니다.
여기서 xtype이란 쉽게말해서 html태그들과 유사한 개념이라고 이해하시면 되겠습니다.
Accordion Layout 샘플코드
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.container.Viewport",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
//absolute 레이아웃
layout : 'accordion',
items:[
{
//패널의 제목
title: '두번째 accordion 타이틀',
//패널의 내용
html: '첫번째 accordion 내용'
},
{
//패널의 제목
title: '첫번째 accordion 타이틀',
//패널의 내용
html: '두번째 accordion 내용'
}
]
});
})
Accordion Layout 실행결과
어코디언 레이아웃은 위와같이 접히고 펼치는 효과로 인하여
컨텐츠내용이 하나씩 보여지는것이 가능한것을 확인하였습니다.
Border Layout 샘플코드
해당 코드는 레이아웃구조를 정하는데 자주 사용되는 방식이니 코드작성 후
각 속성별 상세 설명을 들어가도록 하겠습니다.
Ext.onReady(function(){
//도화지가 되는 Panel컴포넌트 생성
Ext.create("Ext.container.Viewport",{
//도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다)
renderTo : Ext.getBody(),
//absolute 레이아웃
layout : 'border',
items:[
{
//헤더(header)
region : 'north',
//패널의 제목
title: '상단 타이틀',
border : true,
//패널의 내용
html: '상단 내용'
},
{
//중앙
region : 'center',
//패널의 제목
title: '중앙 타이틀',
border : true,
//패널의 내용
html: '중앙 내용'
},
{
//풋터(footer)
region : 'south',
//패널의 제목
title: '하단 타이틀',
border : true,
//패널의 내용
html: '하단 내용'
},
{
//좌측사이드
region : 'west',
//패널의 제목
title: '좌측 타이틀',
border : true,
//패널의 내용
html: '좌측 내용'
},
{
//우측사이드
region : 'east',
//패널의 제목
title: '우측 타이틀',
border : true,
//패널의 내용
html: '우측 내용'
}
]
});
})
도화지의 자식격인 items내에 패널의 속성중 region이라는 속성값이 존재합니다.
이 속성값이 각각의 위치를 잡아주는 속성값입니다.
영단어라서 어디에 위치하는것인지는 쉽게 이해가 가실것입니다.
north : 북,center : 중앙,south : 남,west : 서,east : 동
"border:true" 속성을 준 이유는 영역의 구분을 눈으로 확인하고자 지정해준것입니다.
영역구분이 보기가 싫으신분이시라면 border:true를 제거 혹은 border:false를 주시면 되겠습니다.
Border Layout 실행결과
글이 길어지면 지루해지겠죠?
나머지 레이아웃에 대한 설명은 다음장에 이어서 진행하도록 하겠습니다.
다음 포스팅에 다룰 레이아웃 종류
Card,Tab,Fit,Hbox/Vbox Layout
by 개발로짜
'웹개발강좌 > ExtJS' 카테고리의 다른 글
| ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기 (4) | 2014.10.23 |
|---|---|
| ExtJS 강좌 - 메뉴버튼을 포함한 다양한 버튼컴포넌트 구현해보기 (4) | 2014.10.22 |
| ExtJS 강좌 - 툴바위치 및 버튼 클릭 이벤트 알아보기 (0) | 2014.10.21 |
| ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox) (0) | 2014.10.20 |
| ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편 (0) | 2014.10.18 |