ExtJS4
자바스크립트 UI 프레임워크로 프론트개발을 원하는 웹개발자가 이용하면 좋습니다. javascript를 활용하기 때문에 상호활용적인 내용이 많아 기본개념을 학습한뒤 이용할것을 권장합니다. 크로스플랫폼 웹 애플리케이션 개발이 가능하기 때문에 웹표준을 활용한 애플리케이션개발을 원할때 활용하기 좋습니다.
-
01.32분 클래스 part1
클래스 선언, 클래스 객체화, 클래스 내부 생성자, 클래스 상속, 전역 변수, 지역 변수, 이벤트 핸들러
책갈피[00:07] 기본 클래스 선언 방법/[00:24] 클래스 생성/[05:27] config 선언/[13:16] name 과 age 값 확인/[17:55] onoff 메소드 추가/[23:41] 콘솔 값 확인/[30:03] listener 선언 -
02.36분 클래스 part2
클래스의 동적로딩, Alias 선언하여 배치, 컴포넌트 쿼리, Panel 확장, 텍스트엘리먼트 삽입, 오버라이딩, 오버라이딩 텍스트필드
책갈피[00:04] 클래스의 동적 로딩/[00:21] 미리 선언한 클래스 살펴보기/[06:15] 컴포넌트 쿼리/[11:58] 결과 확인/[19:37] 결과 확인//[25:41] last 메소드 사용/[32:00] 오버라이딩/[35:44] 결과 확인 -
03.31분 DOM
DOM 엘리먼트 선택, DOM 트리 순회, DOM 스타일 변경, DOM 엘리먼트 생성, DOM 이벤트 핸들링
책갈피[00:10] DOM 엘리먼트 선택/[00:44] DOM 엘리먼트 추가/[04:57] 쿼리 살펴보기/[10:48] 부모 객체 조회 방법/[17:26] css 적용/[26:37] get은 부모객체로부터 얻고 이벤트는 자식 엘리먼트에 일괄적용하기/[30:06] 여러 옵션 추가 -
04.52분 애니메이션
간단한 엘리먼트 애니메이션, 사용자 정의 애니메이션, 날짜데이터 분석, 형식화, 조작, Ajax를 이용한 데이터 로딩, Json 데이터 인코딩과 디코딩
책갈피[00:13] 애니메이션 효과 알아보기/[00:27] 애니메이션 구현될 모양 정의/[06:15] 애니메이션 효과 확인/[11:58] 애니메이션 효과 확인/[17:07] backIn/backOut/[25:33] 직접 파라미터 내에서 구현해 날짜 출력하기/[32:52] 데이터에 디폴트 포맷 적용/[38:45] 파일 이름 변경 후 결과 확인/[46:45] json 데이터 인코딩과 디코딩/[50:43] encodeDate -
05.36분 레이아웃 시스템과 컴포넌트 배치 part1
FitLayout으로 컴포넌트 확장, VBoxLayout으로 수직 레이아웃 생성, HBoxLayout으로 수평 레이아웃 생성, ColumnLayout으로 콘텐츠 나타내기, AccordionLayout으로 축소 가능한 레이아웃 생성
책갈피[00:51] fitLayout으로 컴포넌트 확장/[05:39] flex 옵션/[13:43] 레이아웃 구성/[21:41] columnLayout 으로 콘텐츠 나타내기/[28:40] AccordionLayout으로 축소 가능한 레이아웃 만들기/[34:35] titleCollapse -
06.31분 레이아웃 시스템과 컴포넌트 배치 part2
CardLayout으로 스택 컴포넌트 나타내기, 부모 크기에 비례하는 앵커 컴포넌트 만들기, BorderLatout으로 전체화면 어플리케이션 만들기, 다양한 레이아웃 조합
책갈피[00:51] fitLayout으로 컴포넌트 확장/[01:11] 기본 패널 구성/[05:39] flex 옵션/[13:43] 레이아웃 구성/[21:06] center 값 지정/[25:30] 패널에 프레임 적용/[30:00] 레이아웃 생성/[34:35] titleCollapse -
07.36분 트리와 패널
서버에서 트리 노드 가져오기, 트리 노드 정렬, 드래그 앤 드롭으로 노드 이동, 다른 패널로 콘텐츠 가져오기, 패널 가장자리로 아이템 고정, 윈도우로 간단한 폼 나타내기
책갈피[00:14] 서버에서 트리노드 가져오기/[05:29] 트리 노드 정렬/[12:35] 첫번째 트리 구성/[23:18] 탭 속성 지정/[28:11] 결과 확인/[33:29] 윈도우 구성 -
08.52분 패널과 데이터뷰
탭에 툴팁 나타내기, 탭 패널의 탭바 조작, XTEMPLATE에서 인라인 자바스크립트 실행, EXT.XTEMPLATE 멤버 함수 만들기, EXT.XTEMPLATE에 로직 추가, EXT.XTEMPLATE의 날짜 형식화, 데이터 스토어와 연결된 데이터뷰의 생성, 데이터뷰 클릭으로 상세 정보 표시
책갈피[00:11] 탭에 툴팁 나타내기/[03:00] tool tip 사용자 정의/[09:09] 동적으로 아이콘 변경//[21:03] 내용 살펴보기/[27:45] 파라미터 구성해서 템플릿 적용/[32:22] XTemplate의 날짜 형식화/[36:22] 데이터 스토어 구성/[43:15] 상세 정보의 폼 생성/[50:49] selectionchange -
09.36분 폼 로딩과 제출과 유효성 검사
복잡한 폼 레이아웃 구성, 폼 데이터 채우기, 폼 데이터 제출, VTYPE으로 폼 필드 유효성 검사, 사용자 정의 VTYPE 만들기, 서버에 파일 업로드, 예외 처리와 콜백 함수 다루기
책갈피[00:02] 복잡한 폼 레이아웃 구성/[05:00] 전체 폼 채우기/[09:11] 서브밋 버튼 추가/[17:14] vtype으로 폼 필드 유효성 검사, 사용자 정의 vtype/[26:03] 패스워드 필드 추가/[32:34] 예외처리와 콜백 함수/[35:43] 결과 확인 -
10.45분 폼 필드 사용과 설정 part1
라디오 버튼 나열, 체크박스 그룹 덧붙이기, JSON으로부터 체크박스 그룹을 동적으로 만들기, 날짜 필드에서 선택 가능한 범위 설정, 날짜 필드 로딩과 구문 분석, 스피너 필드를 사용한 숫자 입력
책갈피[00:08] 폼 필드 사용/[01:11] 라디오 버튼 나열/[06:41] 세로방향 정렬/[11:54] 체크박스 아이템 배치/[17:33] 불리언 값 사용하기/[25:41] 체크박스 그룹 생성/[35:45] 특정 요일 비활성화/[39:22] 스피너필드를 사용한 숫자 입력/[44:37] 두 기능 제거한 결과 확인 -
11.35분 폼 필드 사용과 설정 part2
슬라이드 필드 값 조정하기, 콤보박스에 서버 데이터 로드하기, 콤보박스 자동완성하기, 콤보박스 아이템 렌더링하기, 리치 에디터 생성하기, 반복되는 폼 필드와 필드셋 생성하기, 폼 필드 결합하기
책갈피[00:10] 슬라이더 필드값 조정/[00:58] slider.single/[01:48] 결과 확인/[05:30] 업데이트 부분 추가/[11:16] 콤보박스 자동 완성/[16:22] 데이터 모델 정의/[24:22] 반복되는 폼 필드와 필드셋 생성/[30:48] v 타입 코드 정의 -
12.38분 데이터 패키지 part1
데이터 객체 모델링하기, 프록시를 이용한 모델 로딩과 저장하기, 스토어로 크로스 도메인 데이터 로드하기, 모델 관계 설정과 중첩 데이터 로딩하기
책갈피[00:05] 데이터 객체 모델링/[05:24] 객체 필드 출력/[10:43] php 파일 이용하기//[17:17] book id 없이 book 모델 인스턴스를 생성하고 세이브 메소드 호출하기/[24:25] 모델 관계 설정과 중첩 데이터 로딩/[33:29] 모델 인스턴스 생성/[37:12] 결과 확인 -
13.36분 데이터 패키지 part2
모델 필드의 유효성 검사하기, 스토어 데이터 그룹핑하기, 스토어 예외 처리하기, HTML5 로컬 저장소의 데이터 저장과 로딩하기
책갈피[00:06] 모델 필드 유효성 검사/[01:00] 필드 채워넣기/[06:44] 이메일 체크용 데이터 생성/[13:50] xml 살펴보/[18:37] 결과 확인/[27:56] ajax 프록시에 공통 응답 핸들러 추가하기/[29:36] 결과 확인/[33:52] userinfo.load 사용/[34:07] 결과 확인 -
14.50분 표 데이터 다루기 part1
간단한 표 데이터 나타내기, RowEditor 로 그리드 데이터 편집하기, 페이징 툴바 추가하기, 스크롤 기능이 제공된 그리드에서 데이터 다루기, 드래그 앤 드롭으로 그리드 간 레코드 이동하기, 그리드 그룹 생성하기
책갈피[00:06] 간단한 표 데이터 나타내기/[01:15] 스크립트 문 추가/[05:53] roweditor로 그리드 데이터 편집/[12:35] 스크립트 지정/[19:26] 스토어 생성/[25:26] trailingBufferZone 옵션//[30:07] 그리드 패널 생성/[36:45] 행 데이터 갱신하기/[43:00] 기본 그리드 생성/[47:07] 그룹 클릭 이벤트 구현 -
15.43분 표 데이터 다루기 part2
그리드 셀의 사용자 지정 렌더링하기, 그리드 데이터의 합계 행 만들기, RowBody 기능 사용하기, 컨텍스트 메뉴 추가하기, 선택한 행으로 폼 채우기, 그리드 액션 컬럼에 버튼 추가하기
책갈피[00:08] 템플릿 컬럼을 사용한 그리드 셀의 사용자 지정 렌더링 방법/[05:15] tpl 명시/[10:22] css스타일 적용/[16:15] ftype옵션에 rowwrap 추가/[21:11] defaults 옵션/[25:14] viewButton 구현/[32:52] 그리드 액션 컬럼에 버튼 추가/[35:15] 두번째 icon 추가/[42:00] 컬럼을 감추는 기능 -
16.31분 버튼과 메뉴 다루기
스플릿 버튼 생성하기, 컨텍스트 메뉴 사용하기, 콤보박스를 툴바에 추가해 그리드 필터링하기, 메뉴에서 색상 선택기 사용하기
책갈피[00:07] 스플릿 버튼 생성 실습/[05:39] 스플릿 버튼-하위메뉴 나타내기/[09:03] 이벤트 핸들러 추가/[13:56] status필드/[21:21] 컬럼 배치/[28:26] 해시코드 추가/[29:45] 컬러 값 배치 -
17.34분 그리기와 차트 다루기 part1
기본 도형 그리기, 그라데이션 적용하기, 패스 그리기, 스프라이트 전환과 상호작용하기, 외부 데이터로 막대 차트 만들기
책갈피[00:08] 기본 도형 그리기 실습/[05:00] 스프라이트의 type옵션/[09:28] 그라디언트 집합체 구성/[15:09] 직사각형/[21:30] 스프라이트의 전환과 상호작용/[25:22] 애니메이션 옵션/[31:56] panel에 아이템 집합체로 차트 추가 -
18.40분 그리기와 차트 다루기 part2
로컬 데이터로 파이 차트 만들기, 연속으로 갱신되는 데이터로 선형 차트 만들기, 레이블, 색상, 축 서식 사용자 정의하기, 차트 컴포넌트의 이벤트 사용하기, 그리드 편집으로 차트 갱신하기
책갈피[00:08] 로컬 데이터로 파이 차트 만들기/[00:50] 모델 생성/[06:15] 마우스가 가리키는 슬라이스를 강조하는 효과/[10:26] 필드를 두가지로 지정/[15:52] setInterval 함수/[20:02] 스토어 생성/[25:07] theme 제거/[32:28] itemmouseup동작 제거 후 세부적인 동작 추가/[37:45] 플러그인 추가 -
19.36분 SASS, 고급 애플리케이션 설계 part1
컴퍼스로 SASS 컴파일하기, SASS 소개, 플러그인의 고급기능 사용하기, MVC 패턴으로 애플리케이션 설계하기
책갈피[00:06] ssas와 컴퍼스 설치/[01:19] 컴퍼스/[05:11] 예제파일 만들기/[05:28] config.rb 파일 만들기/[11:20] html파일 스타일 지정/[16:21] initEventHandlers/[20:56] 필드의 현재 값 저장/[27:10] controller파일 작성/[32:35] LegacyBrowsers를 지원하는 이미지 만들기/[35:07] 명령어 알아보기 -
20.38분 고급 애플리케이션 설계 part2
사용자 동작을 제어하는 컨트롤러 액션 추가하기, MVC 패턴으로 실전 애플리케이션 만들기, 센차 SDK 도구로 애플리케이션 만들기, Ext Direct 시작하기, Ext Direct 를 사용한 폼 로딩과 제출하기, 애플리케이션의 전반적인 예외 처리하기
책갈피[00:05] 사용자 동작을 제어하는 컨트롤러 액션 추가/[05:46] 로그인 과정 구현/[09:39] refs필드/[15:50] 애플리케이션에서 로드하는 동작 구현/[25:06] 액션 이벤트 구현/[32:22] 예제/[36:30] 하나의 축소된 파일로 빌드
