첫번재 녹화다보니 너무 버벅거리고 혼잣말 하는거 같다 ㅠ

설명한답시고 녹화해서 올렸는데... 설명못하고 단순히 저혼자 타이핑한듯한... 영상으로 올렸네요 ;; 

다음녹화부터는 자세히 설명부터 열심히 준비해서 올리도록 하겠습니다. ㅠㅠ

녹화자 목소리는... 제가 들어도 이상하네요; ㅎㅎㅎ

내용을 요약하면 

grid + store는 패키지라고 생각하면 된다.

그리드 중, 상단 제목을 나타내는것은 columns옵션

json 배열에 text key의 value가 화면에 표출되는 title이 된다.

넓이 지정을 하고 싶다면 flex값을 1부터 높여주면 될테고, 

dataIndex는 그리드의 데이터 리스트의 key값과 맞춰주기 위한 value값이다.

store는 저장공간이라고 생각하면 되는데, 첫번째로 해줘야 할 작업이 fields 옵션에 columns에 정의했던 내용과 일치시켜준다.

일치시켜준 value의 key는 name을 지정하고 columns 의 dataIndex의 value값과 통일 시켜준다.

그외의 데이터타입등 지정해주는 옵션이 있겠지만 추후에 다루도록 해보자!

fields옵션까지 완료 되었으면 이제 데이터들을 넣어보자

data옵션에 넣고자 하는 데이터들을 넣어보자

하단 소스처럼 fields에서 name을 지정해준 value값이 data에서는 key값이 된다. 그리고 그의 value가 화면에 표출되는 데이터들이다.

별도의 ajax 통신없이 페이지 자체적으로 데이터를 넣어준것이므로 proxy : 'memory'라고 주었다.

다음 강좌는 조금더 상세하게 준비해서 올리도록 해야겠다...

샘플링한 grid 예제 코드이다.

 Ext.onReady(function(){
 	Ext.create('Ext.grid.Panel',{
 		renderTo : Ext.getBody(),
 		columns : [
 			{
 				text : '제목1',
 				flex : 1,
 				dataIndex : 'title1'
 			},
 			{
 				text : '제목2',
 				flex : 1,
 				dataIndex : 'title2'
 			}
 		],
 		store : Ext.create('Ext.data.Store',{
 			fields : [
	 			{
	 				name : 'title1'
	 			},
	 			{
	 				name : 'title2'
	 			}
 			],
 			data : [
	 			{
	 				title1 : '첫번째 값',
	 				title2 : '두번째 값'
	 			}
 			],
 			proxy : {
 				type : 'memory'
 			}
 			
 		})
 	})
 })

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

흔히 자바스크립트에서 다음과 같은 경고창들을 많이 띄워줬을 것이다.

alert("경고창"),confirm("컨펌창") 과 같은 경고창을 흔히들 많이 띄워봤을 것이다.

프롬프트 다이얼로그도 있지만 해당 부분은 자주 쓰는 다이얼로그가 아니므로 건너 뛰도록 

하겠다.

넣어주는 동시에 다이얼로그 창에 옵션을 줘서 아이콘들도 넣어보자!! 

기본 alert 창은 전에 1장에서 hello world 예제를 띄워봤을때 한번 접해봤었다.

기억 안나시는 분들을 위하여!

Ext.Msg.alert('타이틀영역', '헬로우 월드')

alert메시지와 비슷한대 좀더 RIA스럽다~ *-_-*

자 이제 icon을 넣어보고 버튼 옵션들을 변경하면서 테스트 해보자

우선 기본적인 틀은

Ext.Msg.show({

});

함수다

Ext.Msg.alert는 내부에 타이틀,내용이 들어갔었다.

그러나, Ext.Msg.show는 할경우 옵션값들은

title, msg, icon, buttons들이 있다

title : '경고창 상단 타이틀 내용'

msg : '경고창에 뿌려줄 내용;

icon : '경고창에 표출해줄 아이콘'

icon에 들어갈 상수값

Ext.Msg.ERROR

Ext.Msg.INFO,

Ext.Msg.QUESTION,

Ext.Msg.WARNING

buttons : 확인버튼, 확인/취소 버튼 등 ..

buttons에 들어갈 상수값

Ext.Msg.CANCEL

Ext.Msg.OK

Ext.Msg.YESNO

Ext.Msg.YESNOCANCEL

있다.

위에 상수값중에서 일부만 적용해서 화면에 출력해보겠다

본인이 출력할 다이얼로그 창은 alert/confirm이랑 같은 화면을 띄워보도록 하겠다

나머지 옵션들은 바꿔가면서 눈으로 확인해 보시길..

//1. alert("얼랏메시지") 와 같은 화면
Ext.onReady(function(){
	Ext.Msg.show({
		title : 'alert',
		msg : '얼랏메시지',
		icon : Ext.Msg.INFO,
		buttons : Ext.Msg.OK
	});
});
//2. confirm("컨펌메시지")와 같은 화면
Ext.onReady(function(){
         Ext.Msg.show({
		title : 'confirm',
		msg : '컨펌메시지',
		icon : Ext.Msg.QUESTION,
		buttons : Ext.Msg.YESNO
	});
});

1번,2번을 번갈아 가면서 소스적용을 하면서 띄워보자 

오늘은 흔히들 일반 자바스크립트에서 쓰는것처럼 모달창? 레이어팝업을 ExtJS에서 제공하는 

기능을 이용해서 띄워볼 것이다.

윈도우창 역시 다양한 옵션값들이 있으므로 해당 옵션들은 도큐먼트들을 보면서 사용하시길...

예제에서 사용하는 옵션들은 본인들이 주로 사용하는 옵션들 위주로 작성을 하였다.

샘플 예제는 다음과 같다.

Ext.onReady(function(){
	Ext.create("Ext.window.Window",{
		//타이틀명
		title : '레이어윈도우 샘플',
		//레이어팝업 높이
		height:500,
		//레이어팝업 넓이
		width:500,
		//자동으로 띄워주는옵션
		autoShow : true,
		//닫기버튼표출여부
		closable  : true,
		//최대화면버튼표출여부
		maximizable : true,
		//모달창 옵션(true/false)
		//false일경우 단순 레이어 팝
		//true일 경우 뒷단에 있는 버튼등 적용 불
		modal:true,
		//리사이즈 가능옵션(true/false)
		resizable : true,
		//타이틀 위치 정렬 : left,center,right
		titleAlign : 'center',
		//버튼표출해줄 툴바(옵션들)
		bbar: [
	       { xtype: 'button', text: '하단버튼' }
	    ],
	    fbar: [
            { type: 'button', text: '툴바버튼' }
        ],
        lbar: [
            { xtype: 'button', text: '상단버튼' }
        ]
	});	
})

해당 여러 옵션들이 있다.

하지만 대부분 레이어 팝업을 띄워주는 기능은 버튼 클릭등과 같은 이벤트 발생시 띄워주고 

싶을경우 autoShow 옵션은 false로지정해주거나 아예 옵션 설정에서 빼주면 된다.

빼주면 자동으로 뜰수가 없다.

이벤트 발생시 해당 정의된 모달창을 띄워주고 싶다? 그럼 다음과 같이 코딩하면 되겠다.

임시로 화면에 버튼을 생성 후, 클릭 이벤트 발생시 윈도우를 띄워주는 샘플 소스이다.

Ext.onReady(function(){
	Ext.create("Ext.button.Button",{
		text : '버튼',
		renderTo : Ext.getBody(),
		handler : function(){
			openWindow();
		}
	})	
})
function openWindow(){
	win = Ext.create("Ext.window.Window",{
		title : '레이어윈도우 샘플',
		height:500,
		width:500
	});
	win.show();
}

처음에 코딩한 예제랑은 틀리게 window옵션은 모두 제거하고 넓이/높이 옵션만 주었다.

코딩에서 보았듯이 handler : 버튼 클릭이벤트를 지정해주는 옵션이다.

버튼 클릭시 openWindow() 함수를 호출하는데

해당 함수는 window를 create한 후, win변수에 담아서 show()메서드로 화면에 띄워준다.

autoShow옵션은 제거하면 기본적으로 false로 지정을 해주므로 자체적으로는 윈도우 화면이 생성되었으나 화면에서는 보이질 않는 상태이다.

그래서 show()라는 메서드를 통해서 화면에 출력시켜주었다.

무조건 win등과 같은 변수에 담아서 호출을 하지 않고

Ext.create().show(); 형식으로 정의를 해줘도 되지만 편의상 변수에 담아서 show() 메서드를 사용해주었다.

show()메서드 등의 이벤트 관련 메서드는 전에 알려준 extjs에서 제공하는 문서URL에서 window라고 검색후 methods 탭을 보면 확인 할 수 있을 것이다.

영상보고 마무리 !!

끝!!

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

저번시간에는 extjs5에서 레이아웃 구조를 잡아보았습니다.

자 이번에는 레이아웃에 각각 타이틀을 적용해보고 접히는 기능, 중점을 드래그 해서 레이아웃 조절 하는 기능 등을 예제로 진행해보겠습니다~

ExtJS 가 제공하는 API 들이 무궁무진 하므로 문서페이지를 보면서 응용하시는것이 도움이 제일 되겠지요

저는 단순히 예제를 통해서 몇가지 옵션들만 제공하므로 문서를 보시면서 공부하시는것을 강추 드립니다!! +_+

밑에 주소는 ExtJS 5 document url이고, 이전 버전 url의 document를 보고 싶으신분들은

http://docs.sencha.com/ 에서 사용하고 계신 버전을 보시면서 공부하시면 되실겁니다.

http://docs.sencha.com/extjs/5.0.0/

 해당 url로 들어가시면 밑에 화면처럼 뜰텐데 Ext JS 5 Api Docs 메뉴를 클릭하시면 document 페이지로 화면이 나옵니다.

클릭을 해보면 우측상단에 검색창이 있는데 찾고자 하는 타입및 옵션을 검색하셔서 자동완성된 목록을 클릭해보시면

이벤트,환경설정,메소드등의 다양한 옵션들을 찾으실수 있습니다. 해당 찾는 방법은 추후에 진행 하도록 하겠습니다.

이어서 전에 layout : 'border'를 잡아줬던 소스에 추가로

레이어 열기/닫기, 타이틀 설정, 레이어 드래그해서 영역 재구성 에 대한 옵션을 잡아보도록 하겠습니다.

단 3줄로 끝이납니다.

레이어 열기/닫기 : collapsible: true

제목설정 : title : '타이틀에들어갈 제목'

레이어 드래그 : split : true

이걸로 끝입니다. 저는 중앙영역인 region : 'center' 를 제외한 나머지에  모두 넣어봤습니다.

영상 녹화하고 보니 east에는 split 옵션을 빼먹었네요 ..;;; ㅎㅎ

- 소스  -

Ext.onReady(function(){
   Ext.create('Ext.Viewport', {
    layout : 'border',
    items : [
     {
      flex: 1,
         region: 'north',
         border: true,
         title : '북',
         collapsible: true,
         split: true
         
     },
     {
      flex: 1,
         region: 'center',
         title : '중앙',
         border: true
     },
     {
      flex: 1,
         region: 'west',
         border: true,
         title : '서',
         collapsible: true,
         split: true
     },
     {
      flex: 1,
         region: 'east',
         layout: 'fit',
         border: true,
         title : '동',
         collapsible: true,
         split: true
     },
     {
      flex: 1,
         region: 'south',
         border: true,
         title : '남',
         collapsible: true,
         split: true
     }
    ]
   });
  });

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!

일반 개발 프로젝트를 진행할때도 레이아웃 영역을 대부분 나눈다.

TOP/LEFT/RIGHT/CENTER/FOOTER 등등...

css랑 html태그, 스크립트등으로 레이아웃을 짜는데 extjs는 레이아웃작업들을 옵셜설정으로 

마무리 해준다.

기본적으로는 그림 그릴때 도화지가 필요하듯이

레이아웃을 짤때도 도화지가 필요하다

container, window, viewport, panel 등 여러가지가 있지만 본인은 viewport로 진행을 하겠다.

mvc 기반으로 본인은 extjs를 익혀서 최초 도화지는 viewport로 하는게 편함.. -_-;;

그리고 솔직히 다른놈들은 어떻게 자세히 써야 하는지 모르겠음... ㅠㅠ

우선 include파일은 첫회때 했던것이 전부라 별도로 없다.

화면은 포토샵이 없어서 그림판으로 대충 찍찍 그림

extjs는 좀더 좋은점이 그냥 영단어다... 

동,서,남,북,중간

아직 무슨 말을 하는지 이해가 안가실테니 우선 도화지(viewport)를 만들어 보겠음

Ext.onReady 내에 선언해주십쇼

      Ext.create('Ext.Viewport', {

      });

이렇게 하면 도화지 생성완료 json 틀이라는것을 명심하십쇼

자다음 저 레이아웃 영역을 나누는 옵션을 주어야 하는데 layout옵션에는 몇가지 옵션들이 있지만 저렇게 영역나누지 쉬운 

옵션명은  'border' 라는 놈입니다.

코딩으로 하면 

layout : 'border' 

그리고 화면들 각각의 레이아웃들을 아이템들이라 items라는 배열형 json에다 기술하시면 됩니다.

layout : 'border',

items : [

{

// 각각의 레이어 영역설정할 json

},

{

// 각각의 레이어 영역설정할 json

}

]

이런식으로 items라는 키내에 여러가지 레이아웃들을 넣어주면 됩니다.

layout을 'border' 라고 주셨으면 변수선언했듯이 난 이 뷰포트라는 도화지에 영역을 

나눌것이다~ 라는 의미입니다.

저렇게 줘봤자 화면에 아무런 변화가 없음 브라우저 하얀화면에 뷰포트라는 하얀 도화지만 올려놓고 레이어 나눌꺼예요~ 한거니... 

자 이제는 영역을 나눠 봐야겠지요

items json array에 영역 json object를 담아줘봅시다.

{

region : 'west'

}

이런형태로 영역을 나눠주면 된다 화면에 나와있는 영단어(소문자로 적을것)를 region이라는 옵션에 넣어주면 지가 알아서 

찍찍 그린다 ㅋㅋㅋ

region의 옵션값들은 north / center / west / east / south 이다.

Ext.create('Ext.Viewport', {
    layout : 'border',
    items : [
             {
                region : 'west'
             },{
                region : 'east'
             },{
               region : 'south'
             },{
               region : 'center'
             },{
               region : 'north'
            }
    ]
});

해당 소스로 이제는 영역이 나누어졌다 하지만 백날 실행해봐도 화면에 아무것도 안뜰것이다.

html 태그옵션중 <table border = "1"> 과 같이 

border : true 라는 옵션을 주고 각각의 json object들에게 flex : 1 옵션을 모두 지정해보자

예를들어 하나의 json object 객체로 설명을 하겠다.

{

flex: 1,

region: 'north',

border: true

}

이런형태가 되는것이다. 

<table> 태그에 border="1" width = "50%" 처럼 간격을 설정해주는것처럼

영역놈들도 flex은 간격에 관련된 설정이고, border는 굵기를 표시하는 옵션이다

border 옵션은 굳이 주지 않아도 되긴하지만 간격이 얼마나 되는지를 모르니 샘플로 넣어봤다.

자 이제 레이아웃 다짰다~~~ 

실행시켜봅시다!!

오~~ 나왔다!!

한 글에 내용이 너무 길면 쓰는사람도, 읽는사람도 지친다.. ㅋㅋㅋ

소스만 간략하게 붙이고 오늘은 여기까지!

다음에는 레이아웃들의 옵션을 가지고 장난질을 쳐볼것임...

Ext.onReady(function(){

Ext.create('Ext.Viewport', {

layout : 'border',

items : [

{

flex: 1,

   region: 'north',

   border: true

},

{

flex: 1,

   region: 'center',

   border: true

},

{

flex: 1,

   region: 'west',

   border: true

},

{

flex: 1,

   region: 'east',

   layout: 'fit',

   border: true

},

{

flex: 1,

   region: 'south',

   border: true

}

]

});

});

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!