[Sencha Architect/ExtJS/센차] - view(뷰)만들기

링크 : http://www.sencha.com/

센차를 실행합니다.

센차를 실행하면 위와 같은 화면이 나오죠?

뷰를 만들 땐 Viewport가 있어야 합니다.

왼쪽에 검색창에 Viewport를 입력하세요,
드레그가 가능하니 드레그를 이용해서 Views에 넣어주세요!

검색창에는 센차에서 제공하는 기능들이 있습니다.

Viewport를 넣고 그안에 Container를 넣어둔 화면입니다.
Viewport로 View를 사용하겠다고 했고 Container로 화면을 구성할 수 있죠...

이해가 안가시겠지마...나중에 아~ 이거였어? 설명을 잘 못하네~ 라고 생각하시게 될 겁니다...ㅋ

지금은 화면 중간에 톱니바퀴모양에 주목해 주세요~~!!!

그 톱니바퀴를 누르면 위와 같은 화면이 나옵니다.

그러면 layout을 어떻게 할 것인지 나옵니다.
뭐 기본적으로 다 눌러보고 해보시면 좋겠지만 자주쓰는 몇가지만 설명드리자면,,,,
absolute : 사용자가 해당 레이아웃 안에 있는 기능들의 위치를 마음대로 조절 할 수 있습니다. 원하는 위치에 정확히 구성이 가능하나 화면크기에 따라서 많은 차이가 나타나게 됩니다.

auto : 자동으로 할당됩니다.

fit : layout크기에 가득차게 됩니다.

hbox : ㅁㅁㅁㅁㅁㅁ 이런식으로 수평적으로 구성 할 수 있습니다.

vbox : 

ㅁ

ㅁ

ㅁ

ㅁ

ㅁ 이런식으로 수직적으로 구성 할 수 있습니다.

저는 주로 hbox와 vbox를 이용합니다. 이 두가지를 잘 사용하면 될 것 같습니다. 

이렇게 레이아웃을 구성하면 그 안에 있는 다른 구성원들은 select a layout위에 flex를 입력하게 나오는데 화면비율입니다.

이 비율로 정하면 화면이 크거나 작아졌을때 유용합니다.

소수점단위로도 입력이 가능합니다.

원하는 비율을 입력하세요!

그럼 본격적으로 화면을 구성하기 전에 저장을 하고 넘어 가겠습니다.

SAVE를 누르면 위와 같은 화면이 나오고 Path를 정하고 Project Name을 입력하고 저장. 꾹!

Puvlish Path인데요.

이클립스와 연동이 가능하기 때문에 이클립스 경로로 Path를 구성하시면 됩니다.

혹시 Path를 잘못잡으셨다면 위의 경로로 들어가보세요.

수정 가능합니다~~

Sencha로 임의로 구성해 본 화면입니다. 좀 더 이쁘고 원하는 구성으로 구현 할 수 있으니 많이 연습해보세요~