ExtJS 시작하기
ExtJS 프레임워크 다운르도 > Sencha 홈페이지
1. 사이트 다운로드
http://www.sencha.com/legal/GPL/
>> ExtJS선택 / 이메일
2. 회신 메일에서 다운로드
메일로 ext-5.1.1-gpl.zip을 받을 수 있습니다.
3. 압축해제
4. 해당 부분 복사.
/build/packages/
/build/ext-all.js
5. 예제 파일 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HelloWold</title>
<link href="js/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet">
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
//자바스크립트의 onload, jQuery의 $(document).ready와 동일한 기능
Ext.onReady(function(){
Ext.Msg.alert("Title","HelloWorld");
})
</script>
</head>
<body></body>
</html>
참고: http://mongodev.tistory.com/3
Theme 관련
packages/ext-theme-XXX 형태의 디렉토리에 있다.
aria: Black
classic: Blue
crisp: ExtJS 5부터 지원
crisp-touch
gray: Gray
neptune: ExtJS 4부터 지원
neptune-touch: ExtJS 5부터 지원
<< Theme 수정 >>
<link href="js/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css" rel="stylesheet">
TIP:
Alert창 Javascript의 alert에서 행바꿈은 "\n"을 사용하지만, ExtJS는 Alert창은 HTML로 구성되어있기에 "<br/>"로 행바꿈.
다른 HTML코드를 작성 해주시면 내용 부분에 적용 가능합니다.
Ext.onReady(function(){
Ext.Msg.alert("Title","HelloWorld<br />Poo!!");
})
ExtJS 다양한 레이아웃
레이아웃 종류
Absolute
Accordion
Border
Box
Card
Center
Column
Absolute: 브라우저 및 새로고침을 해도 동일한 위에 출력
Ext.onReady(function(){
Ext.create('Ext.Panel',{
title: 'Ab',
width: 500,
height: 500,
x: 50,
y: 50,
layout: 'absolute',
renderTo: Ext.getBody()
});
})
Accordion: 클릭한 패널 활성화
Ext.onReady(function(){
Ext.create('Ext.Panel',{
title: 'Ab',
width: 500,
height: 500,
x: 50,
y: 50,
layout: 'accordion',
items:[
{
title:'1',
html:'1 page'
},
{
title:'2',
html:'2 page'
},
{
title:'3',
html:'3 page'
}
],
renderTo: Ext.getBody()
});
})
Border 레이아웃: 여러개의 중첩되는 부분에 resize를 할수 있는 라인이 생김
region 속성 : 위치값 (north, east, south, west, center)
split속성 : Resize 설정 (ex: split: true )
flex 속성 : 수직/수평의 공간 계산하여 공간을 확보
collapsible 속성 : 해당 영역을 잡히게 하는 속성
Ext.onReady(function(){
Ext.create('Ext.Panel',{
title: 'Border',
width: 500,
height: 500,
layout: 'border',
items:[
{
region: 'north', //위치 결정
title:'1',
html:'1 page',
layout: 'fit',
flex:1,
split: true //마우스로 사이즈를 조절하는 부분.
},
{
region: 'south',
title:'2',
html:'2 page',
layout: 'fit',
flex:1,
split: true // 마우스로 사이즈를 조절할수 있는 Border 프레임 부분
},
{
region: 'center',
title:'3',
html:'3 page',
layout: 'fit',
flex:1,
split: true
},
{
region: 'west',
title:'4',
html:'4 page',
layout: 'fit',
flex:1,
split: true,
collapseDirection:'left'
collapsible: true
}
],
renderTo: Ext.getBody()
});
})
Box: HBoxLayout과 VBoxLayout 클래스의 기본 클래스 (일반적으로 직접 사용할 필요 없음)
Card: 페이지를 넘기는 형식의 레이아웃 (예:Instal Wizard방식의 레이아웃)
Center: 중앙에 배치하기 위한 레이아웃.
Column: 고정폭 또는 %로 지정하여 여러개의 열 형식의 레이아웃을 작성하기 위한 최적의 레이아웃 (비추천)
Fit: 레이아웃의 Default 속성 (layout속성을 지정하지 않아으면, 해당 속성으로 된다.) / layout:fit을 설정시 부모의 패널에 가득채워지는 결과를 확인됩니다.
Form: 폼필드를 컨테이너 넓이에 맞춰지고, 렌더링을 하는 레이아웃 / 회원가입과 같은 화면 구성시 유용합니다.
HBox: 수평방향 자식 항목들을 배치 (왼쪽->오른쪽으로 배치 / layout:fit과 비슷)
VBox: 수직방향 자식 항목들을 배치 (위->아래 배치 / 각각의 자식 패널 Width, Height 다르게)
Table: Rowspan, Colspan을 이용 복잡한 레이아웃 작성하기 위해 사용
참고 사이트: http://mongodev.tistory.com/6
'Web > Javascript' 카테고리의 다른 글
| [Sencha&ExtJS] ExtJS 기초.5 - Ext.Msg.창 (0) | 2015.06.24 |
|---|---|
| [Sencha&ExtJS] ExtJS 기초.4 - Panel / toolbar 위치정렬 / Button (0) | 2015.06.24 |
| [Sencha&ExtJS] ExtJS 기초.3 - 이벤트 handler / listeners (0) | 2015.06.24 |
| [Sencha&ExtJS] ExtJS 기초.2 - ExtJS 문법/create/config/renderTo (0) | 2015.06.19 |
| [Sencha&ExtJS] Sencha 2.2.1 동영상 (0) | 2015.06.18 |
| Javascript로 excel 또는 csv 파일 만들기 (ExcellentExport.js 2.0) Edge 브라우저 지원 (0) | 2015.03.31 |
| [JS] setInterval() 반복 실행 (0) | 2015.03.21 |
| 새창 띄우기 window.open (0) | 2014.10.24 |
(로그인하지 않으셔도 가능)