[ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!!

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

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

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

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

내용을 요약하면 

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'
 			}
 			
 		})
 	})
 })

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