IT전문교육 의 리더!

HOME>IT전문가>웹 프로그래밍 class1>ExtJS4

ExtJS4

20회차 속성과정|전체 : 12시간 48분|회차당 평균 : 38분23초
270,000165,000
  • 이용기간 2개월|전문강사 : 홍철우
Study Guides
자바스크립트 UI 프레임워크로 프론트개발을 원하는 웹개발자가 이용하면 좋습니다. javascript를 활용하기 때문에 상호활용적인 내용이 많아 기본개념을 학습한뒤 이용할것을 권장합니다. 크로스플랫폼 웹 애플리케이션 개발이 가능하기 때문에 웹표준을 활용한 애플리케이션개발을 원할때 활용하기 좋습니다.
 
  • 0132분 클래스 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] 결과 확인

  • 0236분 클래스 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] 결과 확인

  • 0331분 DOMDOM 엘리먼트 선택/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] 여러 옵션 추가

  • 0452분 애니메이션간단한 엘리먼트 애니메이션/사용자 정의 애니메이션/날짜데이터 분석, 형식화, 조작/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] 결과 확인

  • 0536분 레이아웃 시스템과 컴포넌트 배치 part1FitLayout으로 컴포넌트 확장/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] 확인

  • 0631분 레이아웃 시스템과 컴포넌트 배치 part2CardLayout 으로 스택 컴포넌트 나타내기/부모 크기에 비례하는 앵커 컴포넌트 만들기/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] 결과 확인

  • 0736분 트리와 패널서버에서 트리 노드 가져오기/트리 노드 정렬/드래그 앤 드롭으로 노드 이동/다른 패널로 콘텐츠 가져오기/패널 가장자리로 아이템 고정/윈도우로 간단한 폼 나타내기

    책갈피 : [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] 결과 확인

  • 0852분 패널과 데이터뷰탭에 툴팁 나타내기/탭 패널의 탭바 조작/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] 결과 확인

  • 0936분 폼 로딩과 제출과 유효성 검사복잡한 폼 레이아웃 구성/폼 데이터 채우기/폼 데이터 제출/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] 결과 확인

  • 1045분 폼 필드 사용과 설정 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] 두 기능 제거한 결과 확인

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

    책갈피 : [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] 결과 확인

  • 1238분 데이터 패키지 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] 결과 확인

  • 1336분 데이터 패키지 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] 결과 확인

  • 1450분 표 데이터 다루기 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] 결과 확인

  • 1543분 표 데이터 다루기 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] 컬럼을 감추는 기능

  • 1631분 버튼과 메뉴 다루기스플릿 버튼 생성하기/컨텍스트 메뉴 사용하기/콤보박스를 툴바에 추가해 그리드 필터링하기/메뉴에서 색상 선택기 사용하기

    책갈피 : [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] 결과 확인

  • 1734분 그리기와 차트 다루기 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] 결과 확인

  • 1840분 그리기와 차트 다루기 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] 변경한 값이 차트에 반영되는 것 확인

  • 1936분 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] 생성된 파일 확인

  • 2038분 고급 애플리케이션 설계 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] 하나의 축소된 파일로 빌드






본 강의 수강생들의 추가구매가 가장 많은 학과.