ExtJS4
자바스크립트 UI 프레임워크로 프론트개발을 원하는 웹개발자가 이용하면 좋습니다. javascript를 활용하기 때문에 상호활용적인 내용이 많아 기본개념을 학습한뒤 이용할것을 권장합니다. 크로스플랫폼 웹 애플리케이션 개발이 가능하기 때문에 웹표준을 활용한 애플리케이션개발을 원할때 활용하기 좋습니다.
-
01.32분 클래스 part1
클래스 선언, 클래스 객체화, 클래스 내부 생성자, 클래스 상속, 전역 변수, 지역 변수, 이벤트 핸들러
책갈피 : [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분 클래스 part2
클래스의 동적로딩, 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분 DOM
DOM 엘리먼트 선택, DOM 트리 순회, DOM 스타일 변경, DOM 엘리먼트 생성, DOM 이벤트 핸들링
책갈피 : [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.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분 레이아웃 시스템과 컴포넌트 배치 part1
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분 레이아웃 시스템과 컴포넌트 배치 part2
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분 폼 필드 사용과 설정 part1
라디오 버튼 나열, 체크박스 그룹 덧붙이기, 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분 폼 필드 사용과 설정 part2
슬라이드 필드 값 조정하기, 콤보박스에 서버 데이터 로드하기, 콤보박스 자동완성하기, 콤보박스 아이템 렌더링하기, 리치 에디터 생성하기, 반복되는 폼 필드와 필드셋 생성하기, 폼 필드 결합하기
책갈피 : [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분 데이터 패키지 part1
데이터 객체 모델링하기, 프록시를 이용한 모델 로딩과 저장하기, 스토어로 크로스 도메인 데이터 로드하기, 모델 관계 설정과 중첩 데이터 로딩하기
책갈피 : [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분 데이터 패키지 part2
모델 필드의 유효성 검사하기, 스토어 데이터 그룹핑하기, 스토어 예외 처리하기, HTML5 로컬 저장소의 데이터 저장과 로딩하기
책갈피 : [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.50분 표 데이터 다루기 part1
간단한 표 데이터 나타내기, 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분 표 데이터 다루기 part2
그리드 셀의 사용자 지정 렌더링하기, 그리드 데이터의 합계 행 만들기, 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분 그리기와 차트 다루기 part1
기본 도형 그리기, 그라데이션 적용하기, 패스 그리기, 스프라이트 전환과 상호작용하기, 외부 데이터로 막대 차트 만들기
책갈피 : [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분 그리기와 차트 다루기 part2
로컬 데이터로 파이 차트 만들기, 연속으로 갱신되는 데이터로 선형 차트 만들기, 레이블, 색상, 축 서식 사용자 정의하기, 차트 컴포넌트의 이벤트 사용하기, 그리드 편집으로 차트 갱신하기
책갈피 : [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, 고급 애플리케이션 설계 part1
컴퍼스로 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] 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.38분 고급 애플리케이션 설계 part2
사용자 동작을 제어하는 컨트롤러 액션 추가하기, 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도구를 사용해서 애플리케이션의 jsb3형식의 파일 만들기/[35:06] 예제 폴더로 이동/[35:20] 명령어 실행/[36:00] app.jsb3파일 생성/[36:30] 하나의 축소된 파일로 빌드
