알지 오 평 생 교육 원 ExtJS 4 강좌 입니다 . 전문가 들 이 뽑 은 꼭 배워야 하 는 실무 활용 강의 그동안 찾 던 ExtJS 4 강좌 의 완전 판 ! 여러분 의 마지막 강의 가 되 어 드리 겠 습니다 . 알 지오 에서 는 PC 와 스마트폰 , 태블릿 을 이용 해서 언제 , 어디 서 나 공부 를 할 수 있 습니다 . 열심히 공부 해서 ExtJS 4 강좌 를 마스터 해 보 세요 . 제 가 알 지오 에서 ExtJS 4 강좌 를 공부 하 면서 실무 중심 의 전문가 적 인 노하우 들 을 많이 얻 을 수 있 었 습니다 . 특히 강의 내용 중 에서 도 데이터 객체 모델링 에 대해서 아주 자세 하 고 단계 적 으로 배우 면서 정리 할 수 있 어서 가장 만족 하 는 내용 입니다 . 강사 님 이 어려운 내용 을 잘 설명 해 주 셔서 초보 자 인 저 도 이해 가 잘 될 정도 이 었 습니다 . 그리고 따로 컴퓨터 에 앉 아서 강의 를 들 을 시간 이 없 었 는데 알 지 오 는 모바일 강의 도 제공 해 주 어서 시간 날 때 마다 틈틈이 보 니 생각 했 던 것 보다 강의 를 더 많이 보 게 되 었 습니다 . 강의 로딩 속도 도 좋 고 이용 환경 도 말끔 해서 공부 하 는데 정말 편했 습니다 . ExtJS 4 강좌 정보 입니다 . 추천 인터넷 강의 : 알 지오 ExtJS 4 강의 , ExtJS 4 강좌 , ExtJS 4 교육 , ExtJS 4 학원 , ExtJS 4 인강 , ExtJS 4 인터넷 강의 , ExtJS 4 인터넷 강좌 , ExtJS 4 동영상 , ExtJS 4 동영상 강의 , ExtJS 4 동영상 강좌 , ExtJS 4 배우 기 , ExtJS 4 사용법 , ExtJS 4 사용 방법 01 . 32 분 클래스 part 1 클래스 선언 , 클래스 객체 화 , 클래스 내부 생성자 , 클래스 상속 , 전역 변수 , 지역 변수 , 이벤트 핸들러 책갈피 : [ 00 : 07 ] 기본 클래스 선언 방법 / [ 00 : 24 ] 클래스 생성 / [ 01 : 23 ] 클래스 객체 화 시켜 화면 에 띄우 기 / [ 02 : 14 ] 결과 확인 / [ 02 : 45 ] 메소드 생성 / [ 03 : 22 ] 메소드 호출 / [ 03 : 30 ] 결과 확인 / [ 04 : 00 ] 클래스 내부 생성자 선언 / [ 05 : 08 ] 결과 확인 / [ 05 : 27 ] config 선언 / [ 06 : 30 ] 값 변경 / [ 06 : 53 ] 결과 확인 / [ 07 : 15 ] get 함수 사용 / [ 07 : 53 ] 결과 확인 / [ 08 : 24 ] 콜백 함수 / [ 09 : 46 ] 결과 확인 / [ 10 : 28 ] 클래스 상속 / [ 11 : 13 ] 자식 클래스 선언 / [ 12 : 37 ] 결과 확인 / [ 13 : 16 ] name 과 age 값 확인 / [ 14 : 16 ] 생성자 선언 시 에 동시 에 초기 화 하 는 법 / [ 15 : 09 ] 결과 확인 / [ 15 : 58 ] 믹스 인 클래스 / [ 16 : 15 ] 클래스 생성 / [ 16 : 59 ] togglebutton 메소드 추가 / [ 17 : 36 ] 결과 확인 / [ 17 : 55 ] onoff 메소드 추가 / [ 18 : 33 ] 결과 확인 / [ 19 : 26 ] 믹스 인 된 클래스 함수 호출 / [ 19 : 55 ] 결과 확인 / [ 20 : 26 ] 전역 변수 , 지역 변수 / [ 21 : 11 ] 결과 확인 / [ 22 : 32 ] gmessage 출력 / [ 23 : 11 ] this 키워드 사용 / [ 23 : 41 ] 콘솔 값 확인 / [ 24 : 07 ] person 내부 에 변수 선언 / [ 24 : 36 ] 결과 확인 / [ 25 : 47 ] bind 함수 와 이벤트 핸 들러 / [ 25 : 52 ] 전역 변수 생성 / [ 26 : 33 ] 버튼 이벤트 선언 / [ 27 : 26 ] 버튼 화면 배치 추가 / [ 27 : 41 ] 결과 확인 / [ 28 : 11 ] 특정 값 에 대한 텍스트 호출 하 기 / [ 29 : 03 ] 결과 확인 / [ 30 : 03 ] listener 선언 / [ 30 : 48 ] afterrender 선언 / [ 31 : 18 ] 결과 확인 02 . 36 분 클래스 part 2 클래스 의 동적 로딩 , Alias 선언 하 여 배치 , 컴포넌트 쿼리 , Panel 확장 , 텍스트 엘리먼트 삽입 , 오버 라 이 딩 , 오버 라 이 딩 텍스트 필드 책갈피 : [ 00 : 04 ] 클래스 의 동적 로딩 / [ 00 : 21 ] 미리 선언 한 클래스 살펴보 기 / [ 00 : 51 ] 클래스 파일 불러와 사용 하 기 / [ 01 : 42 ] 클래스 실행 / [ 02 : 22 ] 메소드 실행 / [ 02 : 35 ] 결과 확인 / [ 02 : 53 ] 클래스 에 엘리어스 선언 하 여 배치 하 기 / [ 03 : 07 ] 클래스 선언 / [ 03 : 38 ] 엘리어스 지정 / [ 04 : 00 ] 클래스 화면 에 배치 / [ 04 : 30 ] 컨테이너 구성 / [ 05 : 45 ] 결과 확인 / [ 06 : 15 ] 컴포넌트 쿼리 / [ 06 : 46 ] 폼 살펴보 기 / [ 07 : 00 ] 폼 요소 검색 기능 실습 / [ 07 : 15 ] xtype 기반 으로 검색 하 기 / [ 08 : 24 ] 결과 확인 / [ 09 : 35 ] xtype 중첩 해서 검색 하 기 / [ 09 : 54 ] 결과 확인 / [ 10 : 43 ] 속성 값 기반 으로 검색 하 기 / [ 11 : 58 ] 결과 확인 / [ 12 : 50 ] 셀 렉터 결합 / [ 13 : 50 ] 결과 확인 / [ 14 : 37 ] id 기반 검색 / [ 15 : 41 ] 결과 확인 / [ 16 : 00 ] ExtraOption / [ 16 : 52 ] 결과 확인 / [ 17 : 33 ] 컴포넌트 쿼리 버튼 안 에 삽입 하 기 / [ 19 : 37 ] 결과 확인 / [ 21 : 15 ] 추가 적 인 컴포넌트 쿼리 / [ 21 : 33 ] is 메소드 사용 / [ 22 : 37 ] 결과 확인 / [ 23 : 40 ] down 메소드 사용 / [ 24 : 18 ] 결과 확인 / [ 24 : 41 ] up 메소드 사용 / [ 25 : 41 ] last 메소드 사용 / [ 26 : 48 ] 결과 확인 / [ 27 : 26 ] 패널 확장 기능 / [ 29 : 07 ] 패널 선언 / [ 29 : 22 ] 결과 확인 / [ 29 : 44 ] 텍스트 엘리먼트 삽입 / [ 30 : 44 ] 클래스 외부 에서 생 성 / [ 31 : 18 ] 결과 확인 / [ 32 : 00 ] 오버 라 이 딩 / [ 33 : 15 ] 결과 확인 / [ 33 : 50 ] 오버 라 이 딩 텍스트 필드 / [ 35 : 44 ] 결과 확인 03 . 31 분 DOMDOM 엘리먼트 선택 , DOM 트리 순회 , DOM 스타일 변경 , DOM 엘리먼트 생성 , DOM 이벤트 핸들링 책갈피 : [ 00 : 10 ] DOM 엘리먼트 선택 / [ 00 : 44 ] DOM 엘리먼트 추가 / [ 01 : 36 ] h 2 레벨 추가 / [ 02 : 15 ] DOM 엘리먼트 첫 번 째 실습 / [ 02 : 30 ] get 메소드 로 엘리먼트 가져오 기 / [ 02 : 57 ] 결과 값 입력 / [ 03 : 07 ] 결과 확인 / [ 03 : 21 ] 셀렉 트 함수 사용 / [ 04 : 12 ] 기존 값 확인 / [ 04 : 25 ] 코드 수행 후 결과 확인 / [ 04 : 57 ] 쿼리 살펴보 기 / [ 05 : 30 ] 결과 확인 / [ 06 : 46 ] DOM 엘리먼트 조회 함수 / [ 07 : 26 ] item 얻 기 / [ 08 : 31 ] 결과 확인 / [ 09 : 09 ] previous item 열기 / [ 09 : 50 ] 결과 확인 / [ 10 : 03 ] next item 열기 / [ 10 : 33 ] 결과 확인 / [ 10 : 48 ] 부모 객체 조회 방법 / [ 11 : 45 ] 결과 확인 / [ 12 : 03 ] 자식 객체 조회 방법 / [ 13 : 18 ] 결과 확인 / [ 13 : 43 ] first , last 메소드 / [ 14 : 16 ] 결과 확인 / [ 15 : 22 ] DOM 엘리먼트 스타일 변경 하 기 / [ 15 : 41 ] 스타일 변경 / [ 16 : 25 ] 결과 확인 / [ 17 : 26 ] css 적용 / [ 18 : 07 ] name _ dept 적용 방법 / [ 18 : 30 ] 결과 확인 / [ 19 : 07 ] 대기 후 나타내 기 효과 / [ 20 : 11 ] 결과 확인 / [ 20 : 41 ] 콘텐츠 변경 / [ 20 : 56 ] 결과 확인 / [ 21 : 29 ] 엘리먼트 예제 사용 / [ 23 : 10 ] 결과 확인 / [ 23 : 26 ] 문자열 자체 추가 기능 / [ 23 : 56 ] 결과 확인 / [ 24 : 11 ] DOM 이벤트 핸들링 / [ 24 : 37 ] 클릭 이벤트 추가 / [ 25 : 55 ] 결과 확인 / [ 26 : 37 ] get 은 부모 객체 로부터 얻 고 이벤트 는 자식 엘리먼트 에 일괄 적용 하 기 / [ 27 : 52 ] 결과 확인 / [ 28 : 41 ] 다른 방법 으로 동작 하 기 / [ 29 : 37 ] 결과 확인 / [ 30 : 06 ] 여러 옵션 추가 04 . 52 분 애니메이션 간단 한 엘리먼트 애니메이션 , 사용 자 정의 애니메이션 , 날짜 데이터 분석 , 형식 화 , 조작 , Ajax 를 이용 한 데이터 로딩 , Json 데이터 인코딩 과 디 코딩 책갈피 : [ 00 : 13 ] 애니메이션 효과 알아보 기 / [ 00 : 27 ] 애니메이션 구현 될 모양 정의 / [ 01 : 14 ] 스크립트 시작 / [ 01 : 47 ] puff 효과 / [ 02 : 59 ] useDisplay 옵션 / [ 03 : 30 ] 애니메이션 효과 확인 / [ 03 : 52 ] switch off 효과 / [ 04 : 28 ] 애니메이션 효과 확인 / [ 04 : 44 ] 슬라이드 효과 In / Out / [ 05 : 26 ] 애니메이션 효과 확인 / [ 05 : 53 ] 슬라이드 아웃 효과 적용 / [ 06 : 15 ] 애니메이션 효과 확인 / [ 06 : 38 ] 프레임 효과 / [ 07 : 15 ] 애니메이션 효과 확인 / [ 07 : 30 ] fade out 효과 / [ 08 : 03 ] 애니메이션 효과 확인 / [ 08 : 15 ] 알림 창 에 애니메이션 적용 / [ 09 : 00 ] 애니메이션 효과 확인 / [ 09 : 24 ] 사용 자 정의 애니메이션 / [ 09 : 58 ] 엘리먼트 스타일 정의 / [ 10 : 54 ] 애니메이션 구현 대상 지정 / [ 11 : 18 ] 아래 방향 으로 이동 / [ 11 : 58 ] 애니메이션 효과 확인 / [ 12 : 22 ] 공 튀기 기 애니메이션 / [ 13 : 28 ] 애니메이션 효과 확인 / [ 13 : 58 ] 추가 적 인 옵션 살펴보 기 / [ 14 : 24 ] easing 효과 / [ 14 : 43 ] 기본 동작 확인 / [ 16 : 25 ] bounceIn / bounceOut / [ 17 : 07 ] backIn / backOut / [ 17 : 48 ] elasticIn / elasticOut / [ 18 : 26 ] iterations / [ 19 : 11 ] before / after animate / [ 20 : 37 ] 애니메이션 효과 확인 / [ 21 : 22 ] 키 프레임 이벤트 / [ 22 : 02 ] 애니메이션 효과 확인 / [ 22 : 47 ] 날짜 데이트 분석 , 형식 화 , 조작 / [ 23 : 33 ] 데이트 객체 초기 화 / [ 24 : 26 ] 여러 가지 날짜 형식 표시 / [ 25 : 10 ] 결과 확인 / [ 25 : 33 ] 직접 파라미터 내 에서 구현 해 날짜 출력 하 기 / [ 25 : 47 ] 결과 확인 / [ 26 : 00 ] 날짜 문자열 분석 / [ 26 : 33 ] 결과 확인 / [ 26 : 44 ] 유효 한 날짜 분석 / [ 26 : 56 ] 결과 확인 / [ 27 : 26 ] 날짜 관련 기능 / [ 28 : 00 ] 결과 확인 / [ 30 : 10 ] 디폴트 포맷 속성 / [ 31 : 03 ] 스토어 데이트 만들 기 / [ 32 : 15 ] 예제 확인 / [ 32 : 52 ] 데이터 에 디폴트 포맷 적용 / [ 33 : 28 ] 기본 형식 지정 하 는 방법 / [ 34 : 00 ] 결과 확인 / [ 34 : 15 ] daterenderer / [ 34 : 50 ] 결과 확인 / [ 35 : 15 ] ajax 를 이용 한 데이터 로딩 / [ 35 : 49 ] 제이슨 데이터 정의 / [ 36 : 07 ] 데이터 로딩 / [ 37 : 51 ] 받 아 온 코드 출력 / [ 38 : 27 ] 결과 확인 / [ 38 : 45 ] 파일 이름 변경 후 결과 확인 / [ 39 : 29 ] 추가 기능 살펴보 기 / [ 40 : 37 ] 예 제 네트워크 살펴보 기 / [ 41 : 05 ] param 값 입력 / [ 41 : 22 ] 결과 확인 / [ 42 : 00 ] disableCaching / [ 43 : 30 ] 결과 확인 / [ 44 : 00 ] JSONP Request / [ 45 : 22 ] 데이터 로딩 / [ 46 : 06 ] 결과 확인 / [ 46 : 45 ] json 데이터 인코딩 과 디 코딩 / [ 47 : 22 ] 객체 생성 / [ 47 : 45 ] 인코딩 / [ 48 : 04 ] 결과 확인 / [ 48 : 30 ] 디 코딩 / [ 49 : 14 ] 결과 확인 / [ 50 : 43 ] encodeDate / [ 51 : 13 ] 결과 확인 05 . 36 분 레이아웃 시스템 과 컴포넌트 배치 part 1 FitLayout 으로 컴포넌트 확장 , VBoxLayout 으로 수직 레이아웃 생성 , HBoxLayout 으로 수평 레이아웃 생성 , ColumnLayout 으로 콘텐츠 나타내 기 , AccordionLayout 으로 축소 가능 한 레이아웃 생성 책갈피 : [ 00 : 51 ] fitLayout 으로 컴포넌트 확장 / [ 01 : 11 ] 기본 패널 구성 / [ 01 : 44 ] 확인 / [ 01 : 59 ] 서브 패널 추가 / [ 02 : 30 ] 확인 / [ 02 : 44 ] fitLayout 적용 / [ 03 : 00 ] 확인 / [ 03 : 44 ] VBoxLayout 으로 수직 레이아웃 만들 기 / [ 04 : 00 ] 뷰 포트 생성 / [ 05 : 39 ] flex 옵션 / [ 06 : 15 ] 확인 / [ 07 : 13 ] align 옵션 / [ 08 : 18 ] 구성 옵션 살펴보 기 / [ 09 : 15 ] 레이아웃 결과 보 기 / [ 11 : 54 ] pack 옵션 / [ 12 : 18 ] 기본 셋 팅 확인 / [ 13 : 11 ] HBoxLayout 으로 수평 레이아웃 만들 기 / [ 13 : 43 ] 레이아웃 구성 / [ 15 : 50 ] 레이아웃 에 패널 배치 / [ 16 : 41 ] 확인 / [ 17 : 36 ] 정렬 옵션 / [ 18 : 02 ] 정렬 옵션 - top / [ 18 : 33 ] 기본 레이아웃 보 기 / [ 19 : 03 ] 각 옵션 입력 후 결과 확인 / [ 20 : 29 ] pack 옵션 / [ 21 : 06 ] center 값 지정 / [ 21 : 41 ] columnLayout 으로 콘텐츠 나타내 기 / [ 22 : 15 ] 패널 정의 / [ 22 : 52 ] 패널 생성 확인 / [ 23 : 06 ] 아이템 배치 / [ 23 : 30 ] 확인 / [ 24 : 18 ] 컬럼 너비 적용 / [ 24 : 45 ] 확인 / [ 25 : 30 ] 패널 에 프레임 적용 / [ 26 : 26 ] 여백 적용 / [ 27 : 22 ] 확인 / [ 28 : 40 ] AccordionLayout 으로 축소 가능 한 레이아웃 만들 기 / [ 29 : 37 ] 입력 할 내용 준비 / [ 30 : 00 ] 레이아웃 생성 / [ 30 : 44 ] 아이템 구성 / [ 31 : 03 ] 내용 삽입 / [ 32 : 07 ] 확인 / [ 32 : 34 ] AccordionLayout 적용 / [ 32 : 52 ] 확인 / [ 33 : 52 ] 옵션 살펴보 기 / [ 34 : 35 ] titleCollapse / [ 35 : 00 ] 확인 06 . 31 분 레이아웃 시스템 과 컴포넌트 배치 part 2 CardLayout 으로 스택 컴포넌트 나타내 기 , 부모 크기 에 비례 하 는 앵커 컴포넌트 만들 기 , BorderLatout 으로 전체 화면 어플리케이션 만들 기 , 다양 한 레이아웃 조합 책갈피 : [ 00 : 09 ] CardLayout 으로 스택 컴포넌트 나타내 기 / [ 01 : 19 ] 패널 생성 / [ 02 : 07 ] 패널 에 채워 넣 을 카드 생성 / [ 03 : 45 ] 두 번 째 카드 생성 / [ 04 : 46 ] 세 번 째 카드 생성 / [ 05 : 29 ] 결과 확인 / [ 06 : 00 ] 전환 하 는 기능 추가 / [ 06 : 23 ] 이전 으로 넘어가 는 버튼 생성 / [ 07 : 00 ] 두 번 째 버튼 생성 / [ 07 : 39 ] 결과 확인 / [ 07 : 55 ] 다음 카드 로 전환 / [ 08 : 24 ] 부모 크기 에 비례 하 는 앵커 컴포넌트 만들 기 / [ 09 : 16 ] percentage / [ 10 : 03 ] 레이아웃 옵션 설정 / [ 10 : 45 ] 앵커 옵션 적용 / [ 11 : 31 ] 결과 확인 / [ 12 : 05 ] offset 을 사용 한 패널 생성 / [ 12 : 24 ] 패널 위치 지정 / [ 12 : 50 ] 내부 아이템 배치 / [ 13 : 05 ] 앵커 옵션 적용 / [ 13 : 37 ] 결과 확인 / [ 14 : 03 ] side 변화 / [ 14 : 18 ] 윈도우 생성 / [ 14 : 26 ] 앵커 옵션 적용 / [ 15 : 41 ] 결과 확인 / [ 15 : 50 ] percent & offset 혼용 / [ 16 : 02 ] 윈도우 생성 / [ 16 : 15 ] 앵커 옵션 적용 / [ 16 : 32 ] 결과 확인 / [ 16 : 52 ] borderlayout 으로 전체 화면 어플리케이션 만들 기 / [ 17 : 29 ] 뷰 포트 생성 / [ 19 : 22 ] 결과 확인 / [ 19 : 41 ] 영역 간 여백 할당 / [ 20 : 29 ] 영역 크기 조절 옵션 추가 / [ 21 : 33 ] 결과 확인 / [ 22 : 15 ] 다양 한 레이아웃 조합 / [ 22 : 33 ] view port / [ 23 : 25 ] 메인 메뉴 패널 생성 / [ 24 : 33 ] 하위 배치 아이템 정의 / [ 24 : 56 ] create 패널 생성 / [ 26 : 00 ] 내부 에 생성 할 카드 생성 / [ 26 : 44 ] user management / [ 28 : 33 ] content panel / [ 29 : 03 ] 결과 확인 07 . 36 분 트리 와 패널 서버 에서 트리 노드 가져오 기 , 트리 노드 정렬 , 드래그 앤 드롭 으로 노드 이동 , 다른 패널 로 콘텐츠 가져오 기 , 패널 가장자리 로 아이템 고정 , 윈도우 로 간단 한 폼 나타내 기 책갈피 : [ 00 : 14 ] 서버 에서 트리 노드 가져오 기 / [ 00 : 34 ] 데이터 준비 / [ 01 : 29 ] 데이터 트리 로 구성 하 기 / [ 02 : 22 ] 루트 지정 / [ 02 : 53 ] 트리 패널 생성 / [ 03 : 20 ] 스토어 파일 지정 / [ 04 : 15 ] 트리 구성 살펴보 기 / [ 04 : 53 ] 결과 확인 / [ 05 : 29 ] 트리 노드 정렬 / [ 06 : 15 ] store 생성 / [ 06 : 39 ] 결과 확인 / [ 06 : 46 ] 오름차순 정렬 / [ 07 : 46 ] 결과 확인 / [ 08 : 22 ] sorterFn 정렬 / [ 09 : 48 ] 결과 확인 / [ 10 : 07 ] 버튼 정렬 / [ 11 : 05 ] 결과 확인 / [ 11 : 50 ] 드래그 앤 드롭 으로 노드 이동 하 기 / [ 12 : 35 ] 첫 번 째 트리 구성 / [ 14 : 39 ] 결과 확인 / [ 14 : 54 ] 두 번 째 트리 구성 / [ 16 : 30 ] 결과 확인 / [ 17 : 22 ] 다른 패널 로 콘텐츠 가져오 기 / [ 18 : 03 ] 트리 구성 / [ 19 : 22 ] 트리 에서 이벤트 처리 부분 생성 / [ 21 : 00 ] 버튼 클릭 시 신규 탭 생성 부분 구현 / [ 23 : 18 ] 탭 속성 지정 / [ 23 : 47 ] 탭 인덱스 전달 / [ 24 : 03 ] 뷰 포트 생성 / [ 24 : 32 ] 결과 확인 / [ 25 : 33 ] 패널 가장자리 로 아이템 고정 / [ 25 : 37 ] 패널 생성 / [ 26 : 00 ] 상단 에 툴바 고정 / [ 27 : 30 ] 결과 확인 / [ 27 : 44 ] 하단 아이템 추가 / [ 28 : 11 ] 결과 확인 / [ 28 : 41 ] 패널 생성 / [ 28 : 48 ] fbar 사용 / [ 29 : 17 ] 결과 확인 / [ 29 : 37 ] 단 축어 사용 / [ 30 : 10 ] 결과 확인 / [ 30 : 37 ] 윈도우 로 간단 한 폼 나타내 기 / [ 31 : 06 ] 폼 생성 / [ 31 : 41 ] 아이템 구성 / [ 32 : 37 ] 버튼 추가 / [ 33 : 29 ] 윈도우 구성 / [ 34 : 15 ] 결과 확인 08 . 52 분 패널 과 데이터 뷰 탭 에 툴 팁 나타내 기 , 탭 패널 의 탭 바 조작 , XTEMPLATE 에서 인라인 자바 스크립트 실행 , EXT . XTEMPLATE 멤버 함수 만들 기 , EXT . XTEMPLATE 에 로직 추가 , EXT . XTEMPLATE 의 날짜 형식 화 , 데이터 스토어 와 연결 된 데이터 뷰 의 생 성 , 데이터 뷰 클릭 으로 상세 정보 표시 책갈피 : [ 00 : 11 ] 탭 에 툴 팁 나타내 기 / [ 00 : 37 ] 예제 만들 기 / [ 01 : 06 ] 탭 생성 / [ 02 : 00 ] 탭 컨 피그 추가 / [ 02 : 28 ] 결과 확인 / [ 03 : 00 ] tool tip 사용 자 정의 / [ 03 : 44 ] 결과 확인 / [ 04 : 12 ] 탭 패널 의 탭 바 조작 / [ 04 : 46 ] 패널 생성 / [ 05 : 15 ] 탭 추가 / [ 06 : 15 ] 탭 확인 / [ 06 : 46 ] 스타일 추가 / [ 08 : 09 ] 탭 아이콘 추가 / [ 08 : 48 ] 결과 확인 / [ 09 : 09 ] 동적 으로 아이콘 변경 / [ 10 : 09 ] 결과 확인 / [ 10 : 39 ] 탭 너비 설정 / [ 11 : 37 ] 결과 확인 / [ 12 : 24 ] 탭 바 위치 변경 / [ 12 : 52 ] 결과 확인 / [ 13 : 37 ] 탭 나타내 기 와 감추 기 / [ 14 : 56 ] 결과 확인 / [ 15 : 39 ] XTemplate 에서 인라인 자바 스크립트 실행 / [ 16 : 45 ] 데이터 배열 정의 / [ 17 : 30 ] 버그 의 상세 내용 화면 에 나타내 기 / [ 18 : 45 ] 표 구성 / [ 20 : 07 ] 결과 확인 / [ 20 : 41 ] 인라인 자바 스크립트 추가 / [ 21 : 03 ] 내용 살펴보 기 / [ 21 : 37 ] 결과 확인 / [ 22 : 03 ] XTemplate 멤버 함수 만들 기 / [ 22 : 26 ] 데이터 구성 / [ 23 : 52 ] 함수 추가 / [ 24 : 30 ] 결과 확인 / [ 25 : 07 ] 글자 생략 하 기 / [ 25 : 44 ] 예제 살펴보 기 / [ 26 : 26 ] 디스크 립 션 나타내 기 / [ 27 : 18 ] 결과 확인 / [ 27 : 45 ] 파라미터 구성 해서 템플 릿 적용 / [ 28 : 52 ] 결과 확인 / [ 29 : 21 ] XTemplate 에 로직 추가 / [ 30 : 03 ] 이전 예제 살펴보 기 / [ 30 : 41 ] 사용 자 이름 체크 하 기 / [ 31 : 26 ] 멤버 추가 / [ 31 : 40 ] 결과 확인 / [ 32 : 22 ] XTemplate 의 날짜 형식 화 / [ 32 : 45 ] 기본 날짜 출력 / [ 33 : 15 ] 결과 확인 / [ 33 : 29 ] 날짜 형식 변경 / [ 33 : 50 ] 결과 확인 / [ 34 : 30 ] 패턴 사용 / [ 34 : 51 ] 결과 확인 / [ 35 : 07 ] 데이터 스토어 와 연결 된 데이터 뷰 의 생 성 / [ 35 : 52 ] 데이터 표현 모델 생성 / [ 36 : 22 ] 데이터 스토어 구성 / [ 36 : 52 ] 데이터 뷰 정의 / [ 38 : 00 ] 패널 정의 , 데이터 뷰 추가 / [ 38 : 37 ] 결과 확인 / [ 39 : 00 ] 스타일 추가 / [ 40 : 04 ] 결과 확인 / [ 40 : 34 ] 패널 에 버튼 효과 적용 / [ 41 : 59 ] 결과 확인 / [ 42 : 37 ] 데이터 뷰 상세 정보 표시 / [ 43 : 15 ] 상세 정보 의 폼 생성 / [ 45 : 19 ] 결과 확인 / [ 46 : 27 ] 데이터 뷰 상세 정보 표시 / [ 47 : 07 ] 예제 확인 / [ 48 : 07 ] itemdbclick / [ 48 : 22 ] 결과 확인 / [ 48 : 37 ] itemcontextmenu / [ 50 : 06 ] 결과 확인 / [ 50 : 49 ] selectionchange / [ 51 : 42 ] 결과 확인 09 . 36 분 폼 로딩 과 제출 과 유효 성 검사 복잡 한 폼 레이아웃 구성 , 폼 데이터 채우 기 , 폼 데이터 제출 , VTYPE 으로 폼 필드 유효 성 검사 , 사용 자 정의 VTYPE 만들 기 , 서버 에 파일 업로드 , 예외 처리 와 콜백 함수 다루 기 책갈피 : [ 00 : 02 ] 복잡 한 폼 레이아웃 구성 / [ 00 : 48 ] 폼 패널 선언 / [ 01 : 22 ] 텍스트 필드 추가 / [ 02 : 38 ] 결과 확인 / [ 02 : 57 ] 파일 첨부 폼 추가 / [ 03 : 07 ] 결과 확인 / [ 04 : 15 ] 참조 얻 어 오 기 / [ 04 : 30 ] 일부 데이터 채우 기 / [ 04 : 46 ] 결과 확인 / [ 05 : 00 ] 전체 폼 채우 기 / [ 05 : 46 ] 결과 확인 / [ 06 : 00 ] 모델 인 스턴스 로 폼 채우 기 / [ 07 : 00 ] 결과 확인 / [ 07 : 29 ] 서버 로부터 폼 채우 기 / [ 07 : 57 ] 결과 확인 / [ 08 : 18 ] 폼 데이터 제출 / [ 08 : 45 ] 폼 제출 함수 추가 / [ 09 : 11 ] 서브 밋 버튼 추가 / [ 09 : 33 ] 결과 확인 / [ 11 : 00 ] 모델 을 사용 하 여 폼 제출 하 기 / [ 14 : 09 ] 결과 확인 / [ 15 : 03 ] 서브 밋 폼 구현 / [ 16 : 00 ] 결과 확인 / [ 17 : 14 ] vtype 으로 폼 필드 유효 성 검사 , 사용 자 정의 vtype / [ 18 : 03 ] 유효 성 검사 추가 / [ 18 : 15 ] 결과 확인 / [ 19 : 29 ] 사용 자 정의 vtype / [ 21 : 33 ] 적용 / [ 22 : 03 ] 결과 확인 / [ 22 : 59 ] 기능 설명 / [ 23 : 22 ] apply 부분 수정 / [ 24 : 33 ] 폼 필드 값 얻 어 오 기 / [ 26 : 03 ] 패스워드 필드 추가 / [ 26 : 48 ] 결과 확인 / [ 28 : 36 ] 서버 에 파일 업로드 / [ 28 : 55 ] 폼 패널 생성 / [ 29 : 37 ] 추가 한 필드 확인 / [ 29 : 47 ] 버튼 추가 / [ 30 : 22 ] 결과 확인 / [ 32 : 15 ] 버튼 문구 변경 / [ 32 : 34 ] 예외 처리 와 콜백 함수 / [ 33 : 15 ] 패널 에 아이템 추가 / [ 33 : 30 ] 버튼 추가 / [ 35 : 00 ] 액션 추가 / [ 35 : 14 ] 예외 처리 / [ 35 : 43 ] 결과 확인 10 . 45 분 폼 필드 사용 과 설정 part 1 라디오 버튼 나열 , 체크 박스 그룹 덧붙이 기 , JSON 으로부터 체크 박스 그룹 을 동적 으로 만들 기 , 날짜 필드 에서 선택 가능 한 범위 설정 , 날짜 필드 로딩 과 구문 분석 , 스피너 필드 를 사용 한 숫자 입력 책갈피 : [ 00 : 08 ] 폼 필드 사용 / [ 01 : 11 ] 라디오 버튼 나열 / [ 01 : 23 ] 기본 레이아웃 / [ 02 : 13 ] 라디오 버튼 구성 / [ 03 : 28 ] 폼 화면 에 표시 / [ 03 : 36 ] 결과 확인 / [ 04 : 27 ] 가로 방향 정렬 / [ 04 : 46 ] 객체 만들 기 / [ 05 : 25 ] 라디오 버튼 구성 / [ 06 : 09 ] 결과 확인 / [ 06 : 41 ] 세로 방향 정렬 / [ 07 : 00 ] 결과 확인 / [ 07 : 15 ] 컬럼 사용자 정의 / [ 07 : 46 ] 객체 만들 기 / [ 08 : 16 ] 라디오 버튼 구성 / [ 09 : 28 ] 결과 확인 / [ 10 : 18 ] 체크 박스 그룹 덧붙이 기 / [ 11 : 15 ] 체크 박스 그룹 생성 / [ 11 : 54 ] 체크 박스 아이템 배치 / [ 12 : 41 ] 패널 생성 / [ 13 : 18 ] 결과 확인 / [ 14 : 16 ] setvalue 함수 호출 / [ 14 : 43 ] 결과 확인 / [ 15 : 24 ] 체크 박스 그룹 에서 사용 할 수 있 는 더 많 은 기능 사용 하 기 / [ 16 : 52 ] 체크 박스 체크 하 기 / [ 17 : 07 ] 결과 확인 / [ 17 : 33 ] 불 리언 값 사용 하 기 / [ 17 : 48 ] 결과 확인 / [ 18 : 07 ] 모든 방법 을 setvalue 요청 으로 조합 하 기 / [ 19 : 15 ] 결과 확인 / [ 19 : 37 ] 제이슨 으로 부 터 체크 박스 그룹 을 동적 으로 만들 기 / [ 20 : 56 ] 패널 객체 정의 / [ 22 : 00 ] 부모 객체 함수 호출 / [ 22 : 22 ] 결과 확인 / [ 22 : 36 ] 제이슨 파일 생성 / [ 23 : 10 ] 제이슨 파일 로드 / [ 24 : 30 ] onload 함수 틀 만들 기 / [ 25 : 22 ] 결과 확인 / [ 25 : 41 ] 체크 박스 그룹 생성 / [ 26 : 26 ] 체크 박스 실제 생성 / [ 27 : 48 ] 결과 확인 / [ 29 : 52 ] check all button / [ 30 : 52 ] 내부 에 토글 핸들러 구현 / [ 31 : 47 ] 결과 확인 / [ 32 : 43 ] 날짜 필드 에서 선택 가능 한 범위 설정 / [ 33 : 30 ] 기본 날짜 설정 방법 / [ 34 : 00 ] 결과 확인 / [ 34 : 14 ] 최대 / 최소 구간 설정 / [ 34 : 37 ] 결과 확인 / [ 34 : 52 ] 비 활성 화 날짜 설정 / [ 35 : 30 ] 결과 확인 / [ 35 : 45 ] 특정 요일 비활성 화 / [ 36 : 22 ] 결과 확인 / [ 36 : 37 ] 날짜 필드 로딩 과 구문 분석 / [ 37 : 07 ] 날짜 선택 필드 생성 / [ 38 : 00 ] 결과 확인 / [ 38 : 34 ] 다중 으로 날짜 형식 입력 / [ 39 : 07 ] 결과 확인 / [ 39 : 22 ] 스피너 필드 를 사용 한 숫자 입력 / [ 39 : 50 ] 폼 패널 생성 / [ 40 : 30 ] 내부 채우 기 / [ 42 : 00 ] 결과 확인 / [ 42 : 49 ] 스피너 필드 추가 옵션 / [ 43 : 30 ] keyNavEnabled 옵션 / [ 44 : 00 ] 결과 확인 / [ 44 : 37 ] 두 기능 제거 한 결과 확인 11 . 35 분 폼 필드 사용 과 설정 part 2 슬라이드 필드 값 조정 하 기 , 콤 보 박스 에 서버 데이터 로드 하 기 , 콤 보 박스 자동 완성 하 기 , 콤 보 박스 아이템 렌더링 하 기 , 리치 에디터 생성 하 기 , 반복 되 는 폼 필드 와 필드 셋 생성 하 기 , 폼 필드 결합 하 기 책갈피 : [ 00 : 10 ] 슬라이더 필드 값 조정 / [ 00 : 58 ] slider . single / [ 01 : 48 ] 결과 확인 / [ 02 : 23 ] slider . multi / [ 03 : 06 ] 결과 확인 / [ 03 : 30 ] 움직이 는 드래 거 동작 의 반응 / [ 04 : 29 ] 슬라이더 추가 / [ 04 : 46 ] 리스 너 추가 / [ 05 : 30 ] 업데이트 부분 추가 / [ 05 : 54 ] 결과 확인 / [ 06 : 39 ] 콤 보 박스 에 서버 데이터 로드 / [ 07 : 15 ] user . json 파일 준비 / [ 07 : 27 ] 모델 정의 / [ 08 : 16 ] 스토어 생성 / [ 09 : 07 ] 패널 생성 / [ 10 : 35 ] 결과 확인 / [ 11 : 16 ] 콤 보 박스 자동 완성 / [ 12 : 13 ] 스토어 생성 / [ 12 : 45 ] 콤 보 박스 생성 / [ 13 : 33 ] 결과 확인 / [ 13 : 58 ] 자동 완성 기능 추가 / [ 14 : 09 ] 결과 확인 / [ 14 : 33 ] 추가 기능 사용 / [ 15 : 28 ] 결과 확인 / [ 15 : 45 ] 콤 보 박스 아이템 렌더링 / [ 16 : 22 ] 데이터 모델 정의 / [ 16 : 56 ] 데이터 구성 / [ 17 : 22 ] 콤 보 박스 추가 / [ 17 : 45 ] 아이템 구성 / [ 18 : 56 ] 결과 확인 / [ 19 : 44 ] HTML 필드 를 사용 한 리치 에디터 / [ 20 : 45 ] 퀵 매 니 져 초기 화 / [ 21 : 00 ] 폼 패널 생성 / [ 21 : 37 ] 결과 확인 / [ 22 : 15 ] 큰 에디터 생성 / [ 22 : 33 ] 결과 확인 / [ 22 : 51 ] Custom options / [ 23 : 45 ] 결과 확인 / [ 24 : 22 ] 반복 되 는 폼 필드 와 필드 셋 생성 / [ 25 : 14 ] 폼 패널 생성 / [ 25 : 32 ] 필드 추가 / [ 26 : 00 ] GuestFieldSet 생성 / [ 26 : 22 ] 컴포넌트 초기 화 / [ 26 : 36 ] 내부 요소 구성 / [ 27 : 21 ] 버튼 추가 / [ 29 : 11 ] 결과 확인 / [ 30 : 00 ] 폼 필드 결합 / [ 30 : 48 ] v 타입 코드 정의 / [ 31 : 11 ] 폼 패널 생성 / [ 32 : 05 ] 필드 추가 / [ 33 : 52 ] 결과 확인 12 . 38 분 데이터 패키지 part 1 데이터 객체 모델링 하 기 , 프록시 를 이용 한 모델 로딩 과 저장 하 기 , 스토어 로 크로스 도메인 데이터 로드 하 기 , 모델 관계 설정 과 중첩 데이터 로딩 하 기 책갈피 : [ 00 : 05 ] 데이터 객체 모델링 / [ 01 : 48 ] ext 모델 확장 클래스 생성 / [ 02 : 07 ] 필드 속성 정의 / [ 04 : 15 ] 객체 생성 / [ 04 : 44 ] 객체 에 값 집 어 넣 기 / [ 05 : 24 ] 객체 필드 출력 / [ 05 : 53 ] 결과 확인 / [ 06 : 23 ] 객체 값 바꾸 기 / [ 06 : 41 ] 결과 확인 / [ 07 : 15 ] id 필드 지정 하 기 / [ 08 : 01 ] 로딩 전 필드 데이터 가공 방법 / [ 09 : 15 ] 결과 확인 / [ 09 : 43 ] 프록시 를 이용 한 모델 로딩 과 저장 / [ 10 : 43 ] php 파일 이용 하 기 / [ 11 : 26 ] 모델 정의 / [ 12 : 16 ] 유효 성 정의 필드 구성 / [ 13 : 15 ] 모델 프록시 설정 / [ 14 : 28 ] 콜백 추가 / [ 14 : 58 ] 결과 확인 / [ 16 : 18 ] 세이브 메소드 호출 / [ 16 : 52 ] 결과 확인 / [ 17 : 17 ] book id 없이 book 모델 인 스턴스 를 생성 하 고 세이브 메소드 호출 하 기 / [ 17 : 48 ] 결과 확인 / [ 18 : 03 ] 디스 트로이 동작 확인 / [ 18 : 29 ] 결과 확인 / [ 18 : 45 ] 스토어 로 크로스 도 메인 데이터 로드 하 기 / [ 19 : 52 ] 모델 정의 / [ 20 : 02 ] 필드 구성 / [ 20 : 30 ] 프록시 설정 / [ 21 : 03 ] 추가 적 인 파라미터 주기 / [ 21 : 26 ] 리더 속성 적용 / [ 21 : 52 ] 데이터 로드 / [ 22 : 22 ] 동작 삽입 / [ 22 : 47 ] 결과 확인 / [ 23 : 33 ] 다음 레코드 값 확인 / [ 24 : 25 ] 모델 관계 설정 과 중첩 데이터 로딩 / [ 26 : 14 ] 각 모델 정의 / [ 27 : 17 ] associations 추가 / [ 27 : 48 ] 인 스턴스 만들 기 / [ 28 : 37 ] 인 스턴스 문장 실행 / [ 29 : 41 ] 제이슨 파일 로드 / [ 30 : 03 ] 각 모델 로 로드 된 데이터 확인 / [ 30 : 48 ] 결과 확인 / [ 32 : 15 ] belongs to 관계 보 기 / [ 32 : 34 ] 모델 정의 / [ 33 : 29 ] 모델 인 스턴스 생성 / [ 33 : 45 ] get book 호출 / [ 34 : 12 ] 결과 확인 / [ 34 : 52 ] HasOne 관계 정의 / [ 35 : 15 ] 데이터 정의 / [ 37 : 06 ] 호출 추가 / [ 37 : 12 ] 결과 확인 13 . 36 분 데이터 패키지 part 2 모델 필드 의 유효 성 검사 하 기 , 스토어 데이터 그룹 핑 하 기 , 스토어 예외 처리 하 기 , HTML 5 로컬 저 장소 의 데이터 저장 과 로딩 하 기 책갈피 : [ 00 : 06 ] 모델 필드 유효 성 검사 / [ 01 : 00 ] 필드 채워 넣 기 / [ 01 : 40 ] validations 추가 / [ 03 : 14 ] validate 메소드 를 사용 한 유효 성 검사 구현 / [ 04 : 15 ] 결과 확인 / [ 05 : 10 ] 출판사 필드 누락 데이터 생성 / [ 06 : 00 ] 이메일 주소 유효 성 검사 / [ 06 : 44 ] 이메일 체크 용 데이터 생성 / [ 07 : 30 ] 결과 확인 / [ 08 : 00 ] 사용 자 정의 타입 유효 성 명시 / [ 09 : 20 ] 유효 성 검사 두 가지 실행 / [ 10 : 03 ] 필드 추가 / [ 10 : 37 ] 클래스 객체 생성 / [ 11 : 13 ] 결과 확인 / [ 12 : 03 ] 스토어 데이터 그룹 핑 / [ 13 : 50 ] xml 살펴보 기 / [ 14 : 31 ] 모델 정의 / [ 14 : 46 ] 필드 입력 / [ 15 : 20 ] 트위터 스토어 생성 / [ 15 : 46 ] 스토어 데이터 그룹 핑 방식 정의 / [ 16 : 11 ] 로드 메소드 호출 / [ 17 : 21 ] 결과 확인 / [ 17 : 52 ] 그룹 메소드 를 사용 해 실행 중 인 스토어 그룹 핑 하 기 / [ 18 : 37 ] 결과 확인 / [ 20 : 03 ] 최소 값 반환 하 기 / [ 20 : 30 ] 결과 확인 / [ 21 : 03 ] 스토어 의 예외 처리 / [ 22 : 03 ] 데이터 로드 모델 정의 / [ 22 : 33 ] 익 셉 션 이벤트 설정 / [ 23 : 11 ] 함수 로직 추가 후 오류 에 타입 에 따라 동작 변경 / [ 24 : 30 ] 예제 분석 / [ 25 : 56 ] 결과 확인 / [ 26 : 48 ] 값 조작 해 에러 메시지 바꾸 기 / [ 27 : 56 ] ajax 프록시 에 공통 응답 핸들러 추가 하 기 / [ 29 : 36 ] 결과 확인 / [ 30 : 14 ] html 5 로컬 저 장소 의 데이터 저장 과 로딩 / [ 30 : 52 ] 유저 인포 모델 정의 / [ 31 : 18 ] 필드 정의 / [ 31 : 29 ] 프록시 설정 / [ 32 : 07 ] 세이브 메소드 호출 / [ 32 : 22 ] 결과 확인 / [ 33 : 52 ] userinfo . load 사용 / [ 34 : 07 ] 결과 확인 14 . 50 분 표 데이터 다루 기 part 1 간단 한 표 데이터 나타내 기 , RowEditor 로 그리드 데이터 편집 하 기 , 페이징 툴바 추가 하 기 , 스크롤 기능 이 제공 된 그리드 에서 데이터 다루 기 , 드래그 앤 드롭 으로 그리드 간 레코드 이동 하 기 , 그리드 그룹 생성 하 기 책갈피 : [ 00 : 06 ] 간단 한 표 데이터 나타내 기 / [ 01 : 15 ] 스크립트 문 추가 / [ 01 : 38 ] 스토어 선언 / [ 03 : 15 ] 패널 생성 / [ 03 : 42 ] 컬럼 정의 / [ 05 : 15 ] 결과 확인 / [ 05 : 53 ] roweditor 로 그리드 데이터 편집 / [ 07 : 46 ] 저장 된 데이터 서버 로 부르 기 / [ 08 : 18 ] 플러그인 설정 / [ 08 : 48 ] 그리드 패널 생성 / [ 09 : 11 ] 컬럼 셋 팅 / [ 09 : 26 ] 플러그인 과 셀 타입 보 기 / [ 10 : 26 ] 결과 확인 / [ 11 : 43 ] 페이징 툴바 추가 / [ 12 : 35 ] 스크립트 지정 / [ 12 : 56 ] php 파일 보 기 / [ 13 : 24 ] 스토어 선언 후 그리드 와 연결 하 기 / [ 14 : 31 ] 페이징 툴바 추가 / [ 15 : 16 ] 결과 확인 / [ 17 : 03 ] 스크롤 기능 이 제공 된 그리드 에서 데이터 다루 기 / [ 19 : 26 ] 스토어 생성 / [ 20 : 37 ] 패널 지정 / [ 21 : 07 ] 결과 확인 / [ 22 : 41 ] 페이지 스크롤 옵션 을 사용 해 일부 성능 조절 하 기 / [ 23 : 18 ] 그리드 옵션 제공 / [ 23 : 26 ] 버티컬 스크롤 러 옵션 추가 / [ 24 : 11 ] 결과 확인 / [ 25 : 26 ] trailingBufferZone 옵션 / [ 26 : 48 ] scrollToLoadBuffer 옵션 / [ 27 : 15 ] 옵션 살펴보 기 / [ 29 : 18 ] 드래그 앤 드롭 으로 그리드 간 레코드 이동 / [ 30 : 07 ] 그리드 패널 생성 / [ 30 : 29 ] 데이터 채워 넣 기 / [ 30 : 56 ] 컬럼 구성 / [ 31 : 18 ] 그리드 패널 생성 2 / [ 32 : 05 ] 드래그 앤 드롭 옵션 사용 / [ 34 : 15 ] 결과 확인 / [ 35 : 52 ] 추가 적 인 동작 만들 기 / [ 36 : 45 ] 행 데이터 갱신 하 기 / [ 38 : 00 ] 동일 한 코드 반대쪽 패널 에 적용 / [ 38 : 20 ] 결과 확인 / [ 39 : 04 ] 하나 의 패널 안 에서 행 순서 바꾸 기 / [ 39 : 58 ] 그룹 추가 / [ 40 : 15 ] 결과 확인 / [ 40 : 45 ] 그리드 에 그룹 생성 하 기 / [ 41 : 43 ] 스토어 에 그룹 필드 추가 / [ 42 : 35 ] 그룹 헤더 탬 플릿 추가 / [ 43 : 00 ] 기본 그리드 생성 / [ 43 : 29 ] 예제 분석 / [ 44 : 07 ] 인라인 코드 그리드 에 추가 하 기 / [ 45 : 07 ] 결과 확인 / [ 46 : 12 ] 그리드 그룹 생성 추가 기능 / [ 47 : 07 ] 그룹 클릭 이벤트 구현 / [ 47 : 52 ] 결과 확인 / [ 48 : 45 ] 그 루핑 기능 을 없애 거나 나타나 게 하 는 동작 구현 / [ 49 : 39 ] 결과 확인 15 . 43 분 표 데이터 다루 기 part 2 그리드 셀 의 사용 자 지정 렌더링 하 기 , 그리드 데이터 의 합계 행 만들 기 , RowBody 기능 사용 하 기 , 컨텍스트 메뉴 추가 하 기 , 선택 한 행 으로 폼 채우 기 , 그리드 액션 컬럼 에 버튼 추가 하 기 책갈피 : [ 00 : 08 ] 템플 릿 컬럼 을 사용 한 그리드 셀 의 사용 자 지정 렌더링 방법 / [ 00 : 55 ] 동일 한 예제 사용 / [ 01 : 15 ] 파일 을 스크립트 로 불러와 사용 / [ 01 : 53 ] 그리드 패널 생성 후 books - store 와 연결 / [ 02 : 00 ] 컬럼 정의 / [ 02 : 46 ] 리타 이틀 컬럼 을 그리드 컬럼 / 템플 릿 컬럼 으로 정의 / [ 03 : 19 ] span 사용 / [ 03 : 30 ] QuickTip 추가 / [ 03 : 53 ] css 스타일 적용 / [ 04 : 12 ] 결과 확인 / [ 05 : 00 ] price 컬럼 / [ 05 : 15 ] tpl 명시 / [ 05 : 46 ] 결과 확인 / [ 06 : 30 ] 그리드 데이터 의 합계 행 만들 기 실습 / [ 07 : 00 ] 그룹 의 마지막 행 에 결과 값 표현 / [ 07 : 43 ] 그리드 패널 생성 후 컬럼 생성 / [ 07 : 57 ] 컬럼 속성 에 대한 옵션 / [ 08 : 33 ] features 집합체 에 ftype 속성 값 으로 summary 추가 / [ 09 : 20 ] function / [ 09 : 31 ] writer 컬럼 에 카운트 집계 추가 / [ 10 : 22 ] css 스타일 적용 / [ 10 : 43 ] 결과 확인 / [ 11 : 18 ] 그리드 그룹 마다 결과 를 나타내 는 방법 실습 / [ 11 : 33 ] ftype 를 groupingsummary 로 변경 / [ 11 : 54 ] 저장 후 결과 확인 / [ 12 : 33 ] rowbody 기능 으로 전체 행 너비 에 맞 게 데이터 표현 / [ 13 : 43 ] 그리드 생성 / [ 13 : 52 ] 컬럼 정의 / [ 14 : 07 ] publishdate 너비 고정 / [ 14 : 26 ] features 옵션 추가 / [ 14 : 37 ] rowbody 객체 작성 / [ 15 : 15 ] 행과 열 에 대한 템플 릿 / [ 15 : 35 ] 결과 확인 / [ 16 : 15 ] ftype 옵션 에 rowwrap 추가 / [ 16 : 22 ] 결과 확인 / [ 16 : 56 ] features 를 xTemplate 으로 변경 / [ 17 : 15 ] 나머지 부분 은 동일 하 게 구현 / [ 17 : 45 ] 결과 확인 / [ 18 : 02 ] 그리드 행 에서 동작 하 는 컨텍스트 메뉴 추가 / [ 18 : 26 ] 마우스 우 클릭 으로 컨텍스트 메뉴 나타내 기 / [ 18 : 41 ] 그리드 생성 / [ 18 : 56 ] 컬럼 생성 / [ 19 : 21 ] contexMenu 변수 선언 / [ 19 : 37 ] items 는 text 와 icon 으로 구성 / [ 20 : 03 ] 마우스 우 클릭 이벤트 생성 / [ 21 : 11 ] defaults 옵션 / [ 21 : 37 ] 결과 확인 / [ 22 : 18 ] 컨텍스트 메뉴 선택 / [ 22 : 52 ] 그리드 행 에서 동작 하 는 컨텍스트 메뉴 추가 / [ 23 : 41 ] 각 아이템 에 itemId 부여 / [ 24 : 07 ] 선택 한 행의 배열 을 반환 / [ 25 : 14 ] viewButton 구현 / [ 25 : 41 ] 결과 확인 / [ 26 : 41 ] 선택 한 행 으로 폼 채우 기 / [ 27 : 30 ] 그리드 패널 생성 / [ 27 : 47 ] 컬럼 생성 / [ 28 : 07 ] 필드 설정 을 해서 패널 을 생 성 / [ 28 : 21 ] layout 설정 / [ 28 : 41 ] 폼 채우 기 / [ 29 : 37 ] 폼 패널 추가 완료 / [ 30 : 07 ] 그리드 에서 selType 추가 / [ 30 : 41 ] 폼 패널 버튼 추가 / [ 31 : 07 ] 버튼 동작 확인 / [ 31 : 41 ] 결과 확인 / [ 32 : 07 ] 폼 수정 후 결과 확인 / [ 32 : 52 ] 그리드 액션 컬럼 에 버튼 추가 / [ 33 : 13 ] 클릭 할 수 있 는 아이콘 을 사용 한 액션 컬럼 의 생성 방법 / [ 33 : 35 ] QuickTipManager 초기 화 / [ 33 : 49 ] 그리드 생성 후 컬럼 생성 / [ 34 : 20 ] 컬럼 에 actioncolumn 추가 / [ 34 : 37 ] items 추가 - icon / [ 35 : 15 ] 두 번 째 icon 추가 / [ 35 : 57 ] 세 번 째 icon 추가 / [ 36 : 15 ] 결과 확인 / [ 37 : 52 ] 동적 으로 버튼 을 추가 / [ 38 : 37 ] css 를 사용 해서 동적 으로 icon 을 변경 / [ 39 : 45 ] getClass function 선언 / [ 40 : 59 ] handler 구성 / [ 41 : 15 ] 결과 확인 / [ 42 : 00 ] 컬럼 을 감추 는 기능 16 . 31 분 버튼 과 메뉴 다루 기 스플릿 버튼 생성 하 기 , 컨텍스트 메뉴 사용 하 기 , 콤 보 박스 를 툴바 에 추가 해 그리드 필터링 하 기 , 메뉴 에서 색상 선택기 사용 하 기 책갈피 : [ 00 : 07 ] 스플릿 버튼 생성 실습 / [ 00 : 44 ] 저장 하 는 문서 형식 을 사용 자 가 선택 할 수 있 도록 스플릿 버튼 구현 / [ 01 : 11 ] 객체 선언 / [ 01 : 26 ] 텍스트 필드 추가 / [ 02 : 00 ] 패널 생성 / [ 02 : 38 ] 툴바 구성 / [ 03 : 00 ] 코드 실행 / [ 03 : 45 ] 스플릿 버튼 에 메뉴 객체 추가 / [ 04 : 23 ] 3 개 의 아이템 구성 / [ 04 : 58 ] 결과 확인 / [ 05 : 09 ] 각각 의 메뉴 선택 / [ 05 : 39 ] 스플릿 버튼 - 하위 메뉴 나타내 기 / [ 06 : 00 ] 스플릿 버튼 클릭 이벤트 생성 / [ 06 : 27 ] 결과 확인 / [ 07 : 00 ] cycle 컴 퍼 넌 트 사용 / [ 07 : 46 ] cycle 버튼 - 메뉴 를 로컬 객체 안 에다 선언 / [ 08 : 11 ] 결과 를 통해 동작 확인 / [ 09 : 03 ] 이벤트 핸들러 추가 / [ 09 : 41 ] 컨텍스트 메뉴 사용 방법 실습 / [ 09 : 56 ] 마우스 우 클릭 으로 메뉴 에 접근 / [ 10 : 58 ] 그리드 패널 생성 / [ 11 : 15 ] 컬럼 지정 / [ 11 : 54 ] Ext menu 객체 초기 화 / [ 12 : 05 ] 아이템 3 가지 배치 / [ 12 : 26 ] 그리드 에서 우 클릭 으로 동작 하 는 함수 구현 / [ 12 : 58 ] stopEvent / [ 13 : 26 ] 버튼 을 가려 주 거나 활성 화 하 는 기능 추가 / [ 13 : 56 ] status 필드 / [ 14 : 37 ] default / [ 15 : 22 ] 결과 확인 / [ 16 : 18 ] status 값 에 따라 버튼 이 제대로 구성 이 되 었 는지 확인 / [ 17 : 11 ] 콤 보 박스 를 툴바 에 추가 해 그리드 필터링 실습 / [ 18 : 17 ] 별도 의 스토어 생성 / [ 18 : 48 ] data 를 세 가지 로 표현 / [ 19 : 22 ] filterCombo 선언 / [ 20 : 22 ] 그리드 생성 / [ 20 : 55 ] dockedItems 배치 / [ 21 : 21 ] 컬럼 배치 / [ 21 : 41 ] 결과 확인 / [ 22 : 44 ] 핸들러 함수 / [ 23 : 30 ] 조건문 / [ 24 : 41 ] 동작 구현 확인 / [ 25 : 15 ] 메뉴 에서 색상 선택기 사용 방법 실습 / [ 25 : 41 ] 배 경색 변경 방법 / [ 26 : 03 ] 버튼 생성 / [ 26 : 26 ] ColorPicker 객체 추가 / [ 27 : 02 ] 결과 확인 / [ 27 : 26 ] 색상 을 선택 하 면 바탕 이 바뀌 도록 구현 / [ 27 : 37 ] handler 추가 / [ 28 : 26 ] 해시 코드 추가 / [ 28 : 40 ] 결과 확인 / [ 29 : 11 ] 사용 자 정의 의 색상 을 선택 할 수 있 도록 팔레트 구성 / [ 29 : 26 ] redHuePicker 추가 / [ 29 : 45 ] 컬러 값 배치 / [ 30 : 06 ] handler 구성 / [ 30 : 26 ] button 에서 사용 한 ColorPicker 를 redHuePicker 로 교체 / [ 30 : 56 ] 결과 확인 17 . 34 분 그리 기 와 차트 다루 기 part 1 기본 도형 그리 기 , 그 라데 이 션 적용 하 기 , 패스 그리 기 , 스프 라이트 전환 과 상호 작용 하 기 , 외부 데이터 로 막대 차트 만들 기 책갈피 : [ 00 : 08 ] 기본 도형 그리 기 실습 / [ 00 : 32 ] 간단 한 동형 그리 기 를 통해 새로운 패키지 알아보 기 / [ 00 : 48 ] 설명 도표 / [ 01 : 06 ] surface / [ 01 : 14 ] sprite / [ 01 : 34 ] Ext . draw . Component / [ 02 : 00 ] 원 과 직사각 형 으로 이루어진 아이콘 만들 기 / [ 02 : 21 ] 객체 선언 / [ 02 : 30 ] viewBox / [ 02 : 58 ] 아이콘 의 머리 부분 만들 기 / [ 03 : 14 ] 아이템 명시 / [ 03 : 45 ] 직사각형 만들 기 / [ 04 : 30 ] rotate 옵션 추가 / [ 05 : 00 ] 스프 라이트 의 type 옵션 / [ 05 : 57 ] 결과 확인 / [ 06 : 14 ] 기본 도 형 그리 기 실습 / [ 06 : 30 ] 텍스트 스프 라이트 를 정의 하 고 설정 하 는 방법 / [ 06 : 46 ] textComponent 생성 / [ 07 : 15 ] text 의 내용 을 명시 / [ 07 : 30 ] 결과 확인 / [ 07 : 46 ] 그 라데 이 션 적용 / [ 08 : 13 ] 앞 예제 에 그라 데 이 션 적용 / [ 08 : 28 ] 예제 가져오 기 / [ 09 : 03 ] 핀 부분 그 라데 이 션 적용 / [ 09 : 28 ] 그라 디언 트 집합체 구성 / [ 10 : 11 ] 그 라데 이 션 적용 - id 값 / [ 11 : 37 ] 코드 설명 / [ 12 : 07 ] 그 라데 이 션 의 type / [ 12 : 16 ] stops 객체 / [ 12 : 45 ] 필요 한 만큼 stops 옵션 추가 / [ 13 : 20 ] 결과 확인 / [ 13 : 37 ] 패스 그리 기 / [ 14 : 05 ] 직선 으로 이루어진 스프 라이트 / [ 14 : 18 ] 초 원위 에 집 그리 기 / [ 14 : 28 ] Ext . draw . Component 생성 / [ 14 : 50 ] items 구성 / [ 15 : 09 ] 직사각 형 / [ 15 : 37 ] 중간 결과 확인 / [ 15 : 58 ] 집 을 그리 기 위해 패스 타입 의 스프 라이트 추가 / [ 16 : 32 ] path 구성 / [ 17 : 33 ] path 설정 옵션 / [ 18 : 41 ] 결과 확인 / [ 19 : 03 ] 곡선 으로 이루어진 스프 라이트 / [ 19 : 22 ] Ext . draw . Component 생성 / [ 19 : 37 ] 중간 결과 확인 / [ 19 : 48 ] 패스 스프 라이트 추가 / [ 21 : 10 ] 결과 확인 / [ 21 : 30 ] 스프 라이트 의 전환 과 상호 작용 / [ 21 : 56 ] 직사각형 을 만들 어 속성 변경 / [ 22 : 41 ] 객체 를 표현 할 컴포넌트 명시 / [ 22 : 59 ] 중간 결과 확인 / [ 23 : 07 ] 속성 값 변경 / [ 23 : 33 ] 직사각 형 면적 확대 / [ 24 : 03 ] 스프 라이트 의 회전 과 색상 변경 / [ 24 : 25 ] 중간 결과 확인 / [ 24 : 37 ] 스프 라이트 의 위치 속성 변경 / [ 25 : 22 ] 애니메이션 옵션 / [ 25 : 40 ] 애니메이션 이 동작 할 시간 / [ 26 : 07 ] 결과 확인 / [ 26 : 51 ] 마우스 를 스프 라이트 에 올리 거나 클릭 할 때 색상 과 크기 변경 / [ 27 : 00 ] 새 파일 생성 / [ 27 : 10 ] 사각형 만들 기 / [ 27 : 21 ] listeners 옵션 - mouseover / [ 27 : 41 ] mouseout / [ 27 : 56 ] mouseup / [ 28 : 11 ] 애니메이션 효과 추가 / [ 28 : 41 ] 결과 확인 / [ 29 : 37 ] 외부 데이터 로 막대 차트 만들 기 실습 / [ 30 : 26 ] 모델 명시 / [ 30 : 52 ] 스토어 생성 / [ 31 : 56 ] panel 에 아이템 집합체 로 차트 추가 / [ 32 : 22 ] items 구성 / [ 33 : 27 ] 결과 확인 18 . 40 분 그리 기 와 차트 다루 기 part 2 로컬 데이터 로 파이 차트 만들 기 , 연속 으로 갱신 되 는 데이터 로 선형 차트 만들 기 , 레이블 , 색상 , 축 서식 사용 자 정의 하 기 , 차트 컴포넌트 의 이벤트 사용 하 기 , 그리드 편집 으로 차트 갱신 하 기 책갈피 : [ 00 : 08 ] 로컬 데이터 로 파이 차트 만들 기 / [ 00 : 50 ] 모델 생성 / [ 01 : 19 ] 데이터 정의 / [ 01 : 40 ] language 이름 과 percentage 를 정수 로 지정 / [ 01 : 53 ] 데이터 집합 로드 / [ 02 : 23 ] 패널 생성 / [ 03 : 15 ] 차트 를 스토어 와 연결 / [ 03 : 57 ] series 선언 / [ 04 : 11 ] 파이 차트 렌더링 / [ 04 : 38 ] label 추가 / [ 05 : 15 ] 결과 확인 / [ 06 : 15 ] 마우스 가 가리키 는 슬라이스 를 강조 하 는 효과 / [ 06 : 28 ] 하이라이트 설정 옵션 / [ 06 : 57 ] 결과 확인 / [ 07 : 15 ] 슬라이스 크기 에 따른 길 이 조정 / [ 07 : 43 ] lengthField / [ 07 : 56 ] 결과 확인 / [ 08 : 33 ] 연속 으로 갱신 되 는 데이터 로 선형 차트 만들 기 / [ 09 : 30 ] 스크립트 사전 생성 / [ 10 : 13 ] ext 데이터 모델 생성 / [ 10 : 26 ] 필드 를 두 가지 로 지정 / [ 10 : 46 ] 스토어 생성 / [ 11 : 24 ] 두 가지 변수 생성 / [ 11 : 39 ] proxy 정보 지정 / [ 12 : 13 ] listeners 추가 / [ 12 : 24 ] beforeLoad / [ 12 : 56 ] 갱신 과정 코드 로 구현 / [ 13 : 50 ] 패널 생성 / [ 14 : 05 ] 패널 의 기본 적 인 정보 생성 / [ 14 : 28 ] series 구성 / [ 15 : 13 ] 축 을 구성 하 는 코드 / [ 15 : 52 ] setInterval 함수 / [ 16 : 41 ] 로드 핸들러 를 통해 처리 / [ 17 : 26 ] addRecords / [ 17 : 48 ] 결과 확인 / [ 19 : 03 ] 레이블 , 색상 , 축 서식 사용 자 정의 / [ 19 : 17 ] 다양 한 테마 와 색상 , 그리드 를 적용 해 막대 차트 만들 기 / [ 19 : 41 ] 데이터 모델 정의 / [ 20 : 02 ] 스토어 생성 / [ 20 : 29 ] 차트 를 생성 해서 스토어 에 연결 / [ 20 : 56 ] theme 추가 / [ 21 : 11 ] background 는 그 라데 이 션 효과 / [ 21 : 36 ] theme 설정 옵션 / [ 22 : 00 ] 배경 화면 설정 옵션 / [ 22 : 15 ] angle 속성 / [ 22 : 47 ] 축 설정 / [ 22 : 59 ] axes 옵션 추가 / [ 23 : 18 ] 가로축 - 숫자 값 이 나타나 도록 설정 / [ 24 : 07 ] series 설정 에서 type 추가 / [ 24 : 30 ] 결과 확인 / [ 25 : 07 ] theme 제거 / [ 25 : 22 ] 막대 의 색 이 기본색 으로 변경 되 는 것 확인 / [ 25 : 37 ] 테마 를 사용 자 정의 로 생성 하 여 적용 하 는 방법 실습 / [ 26 : 07 ] 테마 생성 / [ 26 : 32 ] constructor 생성 / [ 27 : 07 ] 테마 적용 / [ 27 : 22 ] 결과 확인 / [ 27 : 55 ] 차트 컴포넌트 의 이벤트 / [ 28 : 40 ] 마우스 로 할 수 있 는 다양 한 동작 을 감지 하 는 방법 실습 / [ 29 : 03 ] 데이터 모델 정의 / [ 29 : 26 ] autoLoad 옵션 - 스토어 파일 생성 / [ 29 : 45 ] 차트 생성 / [ 29 : 56 ] 축 설정 / [ 30 : 22 ] series 설정 / [ 30 : 45 ] listeners 추가 / [ 30 : 52 ] itemmouseup / [ 31 : 14 ] console . log 입력 / [ 31 : 40 ] 결과 확인 / [ 32 : 28 ] itemmouseup 동작 제거 후 세부 적 인 동작 추가 / [ 33 : 28 ] 결과 확인 / [ 34 : 22 ] 그리드 편집 으로 차트 갱신 / [ 34 : 52 ] 편집 이 가능 한 그리드 차트 와 연결 하 는 방법 / [ 35 : 22 ] 모델 생성 / [ 35 : 57 ] 스토어 생성 후 데이터 집합 로드 / [ 36 : 30 ] 차트 변수 / [ 37 : 04 ] 그리드 패널 생성 / [ 37 : 22 ] 그리드 컬럼 값 지정 / [ 37 : 45 ] 플러그인 추가 / [ 38 : 20 ] 패널 생성 / [ 38 : 57 ] 결과 확인 / [ 39 : 49 ] 변경 한 값 이 차트 에 반영 되 는 것 확인 19 . 36 분 SASS , 고급 애플리케이션 설계 part 1 컴퍼스 로 SASS 컴파일 하 기 , SASS 소개 , 플러그인 의 고급 기능 사용 하 기 , MVC 패턴 으로 애플리케이션 설계 하 기 책갈피 : [ 00 : 06 ] ssas 와 컴퍼스 설치 / [ 00 : 56 ] sass - css 언어 를 개선 하 는 도구 / [ 01 : 19 ] 컴퍼스 / [ 01 : 45 ] sass 와 컴퍼스 를 사용 할 때 필요 한 개발 환경 구축 / [ 02 : 05 ] Ruby 다운로드 / [ 02 : 23 ] 가장 낮 은 버전 다운 / [ 02 : 34 ] 설치 진행 / [ 02 : 52 ] 모든 옵션 선택 하 고 설치 / [ 03 : 15 ] start command prompt with ruby 관리자 권한 으로 실행 / [ 03 : 30 ] 컴퍼스 설치 / [ 04 : 00 ] ruby 와 컴퍼스 모두 설치 완료 / [ 04 : 15 ] css 파일 을 컴파일 하 는 과정 실습 / [ 04 : 26 ] SASS 소개 / [ 05 : 11 ] 예 제 파일 만들 기 / [ 05 : 28 ] config . rb 파일 만들 기 / [ 06 : 15 ] html 파일 구성 / [ 06 : 29 ] sass 코드 만들 기 / [ 06 : 53 ] 컴퍼스 라이브러리 import 진행 / [ 07 : 15 ] html 에 적용 했 던 my _ style class 생성 / [ 07 : 46 ] h 1 태그 스타일 정의 / [ 08 : 24 ] chapter class 정의 / [ 08 : 46 ] box - shadow / [ 09 : 05 ] complement 함수 사용 / [ 09 : 30 ] current - recipe 추가 / [ 09 : 54 ] 컴파일 진행 / [ 10 : 05 ] start command prompt with ruby 관리자 권한 으로 실행 / [ 10 : 18 ] 예 제 파일 이 있 는 폴더 로 이동 / [ 10 : 48 ] css 파일 내용 보 기 / [ 11 : 20 ] html 파일 스타일 지정 / [ 11 : 31 ] css 링크 / [ 11 : 43 ] 결과 확인 / [ 12 : 18 ] 플러그인 의 고급 기능 / [ 13 : 09 ] 텍스트 필드 에 추가 하 는 플러그인 생성 / [ 13 : 45 ] 텍스트 필드 와 버튼 으로 구성 된 폼 만들 기 / [ 14 : 01 ] form 구성 / [ 14 : 33 ] item 구성 / [ 15 : 13 ] Ext . ux . ReadOnlyField 플 러 인 폴더 에 위치 / [ 15 : 50 ] Ext . ux . ReadOnlyField 작성 / [ 16 : 21 ] initEventHandlers / [ 16 : 41 ] eventhandler 구현 / [ 16 : 52 ] onParentRender 구현 / [ 17 : 26 ] 메소드 3 개 를 추가 해 읽 기 모드 와 편집 모드 사이 로 전환 하 는 기능 / [ 17 : 47 ] 메소드 참조 만들 기 / [ 18 : 10 ] handler 추가 / [ 18 : 32 ] 플러그인 지정 / [ 18 : 56 ] field . edit 추가 / [ 19 : 07 ] 예제 분석 / [ 19 : 52 ] Ext . DomHelper . append 메소드 / [ 20 : 14 ] setVisibilityMode 호출 / [ 20 : 26 ] edit 메소드 / [ 20 : 56 ] 필드 의 현재 값 저장 / [ 21 : 18 ] cancel 메소드 / [ 21 : 37 ] 예 제 파일 결과 확인 / [ 22 : 33 ] MVC 패턴 으로 애플리케이션 설계 / [ 22 : 52 ] model / [ 23 : 22 ] veiw / [ 23 : 33 ] controller / [ 24 : 03 ] index html 만들 기 / [ 25 : 11 ] Ext . application - name 지정 / [ 25 : 36 ] controller 지정 / [ 25 : 48 ] launch function 정의 / [ 26 : 15 ] controller 구현 / [ 26 : 22 ] directory 구조 만들 기 / [ 27 : 10 ] controller 파일 작성 / [ 27 : 26 ] store 와 model 지정 / [ 27 : 45 ] view / [ 28 : 03 ] customGrid 작성 / [ 28 : 15 ] alias 필드 를 통해 widget 이름 지정 / [ 28 : 32 ] 패널 생성 / [ 28 : 59 ] model / [ 29 : 11 ] 필드 지정 / [ 29 : 18 ] 스토어 생성 / [ 29 : 33 ] 데이터 배치 / [ 29 : 48 ] 모든 파일 구성 완료 / [ 30 : 30 ] Loader 활성 화 / [ 31 : 03 ] init 메소드 / [ 32 : 00 ] 결과 확인 / [ 32 : 35 ] LegacyBrowsers 를 지원 하 는 이미지 만들 기 / [ 33 : 07 ] 슬라이스 도구 / [ 33 : 52 ] sdk 도구 설치 / [ 35 : 07 ] 명령어 알아보 기 / [ 35 : 59 ] 생성 된 파일 확인 20 . 38 분 고급 애플리케이션 설계 part 2 사용자 동작 을 제어 하 는 컨트롤러 액션 추가 하 기 , MVC 패턴 으로 실전 애플리케이션 만들 기 , 센차 SDK 도구 로 애플리케이션 만들 기 , Ext Direct 시작 하 기 , Ext Direct 를 사용 한 폼 로딩 과 제출 하 기 , 애플리케이션 의 전반 적 인 예외 처리 하 기 책갈피 : [ 00 : 05 ] 사용 자 동작 을 제어 하 는 컨트롤러 액션 추가 / [ 00 : 21 ] mvc 구조 를 가지 고 어플리케이션 개발 / [ 01 : 06 ] mvc 어플리케이션 구조 를 만들 고 단계 에 따라 코드 추가 / [ 01 : 25 ] 폴더 구조 와 필요 한 파일 / [ 02 : 19 ] app . js 파일 / [ 02 : 30 ] Ext . Loader / [ 02 : 42 ] application 정의 / [ 03 : 00 ] launch function / [ 03 : 34 ] viewport 작성 / [ 03 : 57 ] initComponent 를 통해 초기 화 / [ 04 : 15 ] loginForm 작성 / [ 04 : 54 ] index 파일 보 기 / [ 05 : 30 ] 결과 확인 / [ 05 : 46 ] 로그인 과정 구현 / [ 06 : 10 ] init 메소드 추가 / [ 06 : 28 ] controller 설정 옵션 을 app . js 파일 에 추가 / [ 06 : 58 ] 메시지 나타내 기 / [ 07 : 08 ] onLoginButtonClick 메소드 추가 / [ 07 : 26 ] 로그인 버튼 에서 발생 한 클릭 이 벤트 와 액션 메소드 연결 / [ 08 : 05 ] 동작 테스트 / [ 08 : 18 ] 로그인 메시지 뜨 는 것 확인 / [ 08 : 31 ] 추가 기능 구현 / [ 09 : 39 ] refs 필드 / [ 10 : 18 ] 2 개 의 log 추가 / [ 10 : 52 ] 결과 확인 / [ 11 : 22 ] MVC 패턴 으로 실전 애플리케이션 만들 기 / [ 12 : 35 ] 폴더 구조 작성 / [ 13 : 03 ] html 파일 살펴보 기 / [ 13 : 50 ] 애플리케이션 이름 지정 / [ 14 : 03 ] launch function 작성 / [ 14 : 22 ] model - bug . js 파일 작성 / [ 14 : 41 ] 4 가지 필드 로 구성 / [ 14 : 54 ] store 파일 구성 / [ 15 : 28 ] 데이터 생성 / [ 15 : 50 ] 애플리케이션 에서 로드 하 는 동작 구현 / [ 16 : 03 ] 스토어 와 모델 속성 추가 / [ 16 : 45 ] 중간 확인 / [ 17 : 00 ] view 생성 / [ 17 : 41 ] bugdataview . js 파일 작성 / [ 18 : 07 ] 탬 플릿 구성 / [ 18 : 41 ] bugpanel 에 대한 구현 / [ 19 : 18 ] severity filter 존재 / [ 19 : 41 ] action / [ 20 : 03 ] bugform / [ 20 : 37 ] 4 가지 의 데이터 값 / [ 20 : 52 ] 버그 폼 을 띄 어 줄 새창 만들 기 / [ 21 : 02 ] bugformwindow / [ 21 : 11 ] 윈도우 의 속성 작성 / [ 21 : 36 ] viewport / [ 21 : 52 ] viewport 작성 / [ 22 : 17 ] html 파일 보 기 / [ 22 : 36 ] 스타일 적용 / [ 22 : 48 ] app . js 파일 수정 / [ 23 : 00 ] controller 구성 / [ 23 : 29 ] bugs . js 파일 작성 / [ 23 : 47 ] controller 파일 구성 / [ 24 : 15 ] init function / [ 24 : 29 ] autoCreateViewport 추가 / [ 24 : 41 ] 결과 확인 / [ 25 : 06 ] 액션 이벤트 구현 / [ 25 : 32 ] 레퍼런스 3 가지 작성 / [ 25 : 52 ] 버튼 클릭 과 컨트롤러 동작 연결 / [ 26 : 07 ] control 함수 작성 / [ 26 : 26 ] sortBySeverity / [ 27 : 22 ] 동작 확인 / [ 27 : 52 ] control - 6 가지 액션 / [ 28 : 25 ] 각각 의 함수 구현 / [ 28 : 41 ] onBugDataViewItemClick / [ 29 : 11 ] onSaveBugButtonClick / [ 29 : 32 ] 메소드 완성 - 각각 의 동작 확인 / [ 30 : 33 ] SenchaSDK 도구 로 어플리케이션 만들 기 / [ 31 : 56 ] 어플리케이션 작성 / [ 32 : 22 ] 예제 / [ 32 : 37 ] html 파일 / [ 33 : 22 ] view 폴더 에 2 가지 view 작성 / [ 33 : 52 ] launch function 구현 / [ 34 : 07 ] viewport 는 homescreen 하나 를 띄 어 주 는 역할 / [ 34 : 22 ] 결과 확인 / [ 34 : 42 ] sdk 도구 를 사용 해서 애플리케이션 의 jsb 3 형식 의 파일 만들 기 / [ 35 : 06 ] 예 제 폴더 로 이동 / [ 35 : 20 ] 명령어 실행 / [ 36 : 00 ] app . jsb 3 파일 생성 / [ 36 : 30 ] 하나 의 축소 된 파일 로 빌드 공유 하 기 글 요소