ExtJS4 - 총 12시간 48분 / 강의당평균 : 38분23초

ExtJS4

전체 : 12시간 48분 / 강의당평균 : 38분23초

01 클래스 part1

클래스 선언/클래스 객체화/클래스 내부 생성자/클래스 상속/전역 변수/지역 변수/이벤트 핸들러

32분

책갈피 : [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 클래스 part2

클래스의 동적로딩/Alias 선언하여 배치/컴포넌트 쿼리/Panel 확장/텍스트엘리먼트 삽입/오버라이딩/오버라이딩 텍스트필드

36분

책갈피 : [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 DOM

DOM 엘리먼트 선택/DOM 트리 순회/DOM 스타일 변경/DOM 엘리먼트 생성/DOM 이벤트 핸들링

31분

책갈피 : [00:10] DOM 엘리먼트 선택 / [00:44] DOM 엘리먼트 추가 / [01:36] h2 레벨 추가 / [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 애니메이션

간단한 엘리먼트 애니메이션/사용자 정의 애니메이션/날짜데이터 분석, 형식화, 조작/Ajax를 이용한 데이터 로딩/Json 데이터 인코딩과 디코딩

52분

책갈피 : [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 레이아웃 시스템과 컴포넌트 배치 part1

FitLayout으로 컴포넌트 확장/VBoxLayout으로 수직 레이아웃 생성/HBoxLayout으로 수평 레이아웃 생성/ColumnLayout으로 콘텐츠 나타내기/AccordionLayout으로 축소 가능한 레이아웃 생성

36분

책갈피 : [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 레이아웃 시스템과 컴포넌트 배치 part2

CardLayout 으로 스택 컴포넌트 나타내기/부모 크기에 비례하는 앵커 컴포넌트 만들기/BorderLatout으로 전체화면 어플리케이션 만들기/다양한 레이아웃 조합

31분

책갈피 : [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 패널과 데이터뷰

탭에 툴팁 나타내기/탭 패널의 탭바 조작/XTEMPLATE에서 인라인 자바스크립트 실행/EXT.XTEMPLATE 멤버 함수 만들기/EXT.XTEMPLATE에 로직 추가/EXT.XTEMPLATE의 날짜 형식화/데이터 스토어와 연결된 데이터뷰의 생성/데이터뷰 클릭으로 상세 정보 표시

52분

책갈피 : [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 폼 로딩과 제출과 유효성 검사

복잡한 폼 레이아웃 구성/폼 데이터 채우기/폼 데이터 제출/VTYPE으로 폼 필드 유효성 검사/사용자 정의 VTYPE 만들기/서버에 파일 업로드/예외 처리와 콜백 함수 다루기

36분

책갈피 : [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 폼 필드 사용과 설정 part1

라디오 버튼 나열/체크박스 그룹 덧붙이기/JSON으로부터 체크박스 그룹을 동적으로 만들기/날짜 필드에서 선택 가능한 범위 설정/날짜 필드 로딩과 구문 분석/스피너 필드를 사용한 숫자 입력

45분

책갈피 : [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 폼 필드 사용과 설정 part1

슬라이드 필드 값 조정하기/콤보박스에 서버 데이터 로드하기/콤보박스 자동완성하기/콤보박스 아이템 렌더링하기/리치 에디터 생성하기/반복되는 폼 필드와 필드셋 생성하기/폼 필드 결합하기

35분

책갈피 : [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 데이터 패키지 part1

데이터 객체 모델링하기/프록시를 이용한 모델 로딩과 저장하기/스토어로 크로스 도메인 데이터 로드하기/모델 관계 설정과 중첩 데이터 로딩하기

38분

책갈피 : [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 데이터 패키지 part2

모델 필드의 유효성 검사하기/스토어 데이터 그룹핑하기/스토어 예외 처리하기/HTML5 로컬 저장소의 데이터 저장과 로딩하기

36분

책갈피 : [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] html5 로컬 저장소의 데이터 저장과 로딩 / [30:52] 유저 인포 모델 정의 / [31:18] 필드 정의 / [31:29] 프록시 설정 / [32:07] 세이브 메소드 호출 / [32:22] 결과 확인 / [33:52] userinfo.load 사용 / [34:07] 결과 확인

14 표 데이터 다루기 part1

간단한 표 데이터 나타내기/RowEditor 로 그리드 데이터 편집하기/페이징 툴바 추가하기/스크롤 기능이 제공된 그리드에서 데이터 다루기/드래그 앤 드롭으로 그리드 간 레코드 이동하기/그리드 그룹 생성하기

50분

책갈피 : [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 표 데이터 다루기 part2

그리드 셀의 사용자 지정 렌더링하기/그리드 데이터의 합계 행 만들기/RowBody 기능 사용하기/컨텍스트 메뉴 추가하기/선택한 행으로 폼 채우기/그리드 액션 컬럼에 버튼 추가하기

43분

책갈피 : [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 그리기와 차트 다루기 part1

기본 도형 그리기/그라데이션 적용하기/패스 그리기/스프라이트 전환과 상호작용하기/외부 데이터로 막대 차트 만들기

34분

책갈피 : [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 그리기와 차트 다루기 part2

로컬 데이터로 파이 차트 만들기/연속으로 갱신되는 데이터로 선형 차트 만들기/레이블, 색상, 축 서식 사용자 정의하기/차트 컴포넌트의 이벤트 사용하기/그리드 편집으로 차트 갱신하기

40분

책갈피 : [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 SASS, 고급 애플리케이션 설계 part1

컴퍼스로 SASS 컴파일하기/SASS 소개/플러그인의 고급기능 사용하기/MVC 패턴으로 애플리케이션 설계하기

36분

책갈피 : [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] h1태그 스타일 정의 / [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 고급 애플리케이션 설계 part2

사용자 동작을 제어하는 컨트롤러 액션 추가하기/MVC 패턴으로 실전 애플리케이션 만들기/센차 SDK 도구로 애플리케이션 만들기/Ext Direct 시작하기/Ext Direct 를 사용한 폼 로딩과 제출하기/애플리케이션의 전반적인 예외 처리하기

38분

책갈피 : [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도구를 사용해서 애플리케이션의 jsb3형식의 파일 만들기 / [35:06] 예제 폴더로 이동 / [35:20] 명령어 실행 / [36:00] app.jsb3파일 생성 / [36:30] 하나의 축소된 파일로 빌드

샘플확인 : 알지오 검색후 -> 강의검색란 -> ExtJS4