sencha 기본 구조

Sencha ExtJs 프로젝트의 기본구조

project_root/
│── app/              
│   ├── model/        # 데이터 모델 (M)
│   ├── view/         # UI 컴포넌트 (V)
│   ├── store/        # 데이터 저장소
│   ├── controller/   # 이벤트 핸들링 (C, ExtJS 5 이전)
│   ├── viewmodel/    # MVVM 패턴의 ViewModel (ExtJS 5 이상)
│   ├── viewcontroller/ # MVVM 패턴의 ViewController (ExtJS 5 이상)
│   ├── Application.js # 앱 초기화 로직
│   ├── app.js         # 메인 앱 엔트리 포인트
│── build/            # Sencha Cmd 빌드된 파일 (생성됨)
│── classic/          # Classic Toolkit 관련 파일
│   ├── src/          # Classic UI 전용 소스코드
│   ├── overrides/    # Classic용 오버라이드 코드
│── modern/           # Modern Toolkit 관련 파일
│   ├── src/          # Modern UI 전용 소스코드
│   ├── overrides/    # Modern용 오버라이드 코드
│── overrides/        # 공통적으로 사용되는 커스텀 코드
│── packages/         # 사용자 정의 패키지 및 Sencha 패키지
│── resources/        # CSS, 이미지, 아이콘 등 정적 파일
│── sass/             # Sass 스타일시트 관련 파일
│── test/             # 테스트 코드
│── index.html        # 메인 HTML 파일
│── app.json          # 애플리케이션 설정 파일
│── bootstrap.js      # ExtJS 부트스트랩 파일
│── bootstrap.json    # ExtJS 부트스트랩 설정 파일
│── classic.json      # Classic Toolkit 설정 파일
│── modern.json       # Modern Toolkit 설정 파일
│── workspace.json    # 다중 애플리케이션을 관리하는 설정 파일
│── sencha.cfg        # Sencha Cmd 관련 설정
│── .sencha/          # Sencha Cmd 관련 내부 설정
│── ext/              # ExtJS 프레임워크 라이브러리 (다운로드된 경우)

Sencha 애플리케이션 실행 과정

1. index.html 실행 → bootstrap.js 실행됨

2. app.js 실행됨 → Application.js 실행됨

3. Application.js에서 Main.js 화면을 로드

4. 사용자가 URL을 입력하면 → MainController.js에서 해당 화면(CustomBoard.js)을 로드

• app.js는 애플리케이션 실행을 시작하는 역할을 하며, 실제 라우팅 처리는 Application.js 및 MainController.js에서 수행