[Ext Js] 홈페이지 공부

Guides

Intro to App Architecture | Ext JS 7.3.1

Intro to App Architecture

• MVC 와 MVVM application architectures 지원

MVC

• Models, Views or Controllers
• The user interacts with Views, which display data held in Models.
• Those interactions are monitored by a Controller, which then responds to the interactions by updating the View and Model, as necessary.
• The goal of MVC is to clearly define the responsibilities for each class in the application

MVVM

• MVVM은 ViewModel이라는 View의 추상화 기능을 제공
• "데이터 바인딩"이라는 기술을 사용하여 모델의 데이터와 해당 데이터에 대한 뷰의 프레젠테이션 간의 변경 사항을 조정

(VM) ViewModel - ViewModel은 View에 특정한 데이터를 관리하는 클래스

관심 있는 구성 요소가 바인딩되고 이 데이터가 변경될 때마다 업데이트될 수 있음

• ViewController
• ViewModel : 포함된 데이터는 일반적으로 이 데이터를 표시하거나 편집하려는 구성 요소에 바인딩 구성을 추가하여 사용
• Ext JS 6 이후 → Ext JS와 Touch를 두 가지 고유한 Toolkit을 포함하는 단일 framework로 병합
• Ext Js 6 Folder Structure
  • Global Application code
  • Classic Specific code
  • Mordern Specific code

namespace

• <AppName>.<foldername>.<ClassAndFileName>
• 일종의 주소 → 각 클래스의 첫 줄에 명시
• View : Ext.Component 의 하위 클래스인 Component

---

ViewController

• MVC 응용 프로그램을 향상시키기 위해 ViewModel 및 MVVM과 ViewController에 대한 지원을 추가

Application-level Controllers

• Controller는 Ext.app.Controller에서 파생된 클래스
• use CSS-like selectors (called “Component Queries”)
• use “refs” to select and retrieve component instances
• 응용 프로그램 시작 시 생성되며 응용 프로그램 lifetime 동안 존재

ViewControllers

• Ext.app.ViewController 도입 (Ext JS 5+)
• "listeners" 및 "reference" configs(구성)을 사용하여 보기에 대한 연결을 단순화
• 뷰의 life cycle을 활용하여 연결된 ViewController를 자동으로 관리
• 관리되는 view와의 일대일 관계를 기반으로 ViewController의 복잡성을 줄임
• 중첩 views(nesting views)를 안정적으로 만들기 위해 캡슐화를 제공
• 구성 요소를 선택하고 연결된 view 아래의 모든 수준에서 해당 이벤트를 수신할 수 있는 기능을 유지

Listeners

Reference

Encapsulation

Listeners and Event Domains

Life cycle

• A common technique with large applications is to dynamically create controllers when they are first needed.
  • 잠재적인 모든 컨트롤러를 활성화하지 않음으로써 응용 프로그램의 로드 시간을 줄이고 런타임 성능을 도움.
  • 일단 controller가 생성되면, destroy하고 자원을 release하는 것이 불가능하다는 문제점
• View Controller는 구성 요소의 life cycle 초기에 생성, 전체 수명동안 해당 보기에 binding.
  • 해당 view가 소멸되면 ViewController도 같이 소멸.
  • 이러한 일대일 관계 → 참조 추적이 단순화, 파괴된 구성요소가 누출되지 않음
    • beforeInit - 이 메서드는 initComponent 메서드가 호출되기 전에 뷰에서 작동하기 위해 재정의될 수 있음. 이 메서드는 Component 생성자에서 호출되는 initConfig 중에 발생하는 컨트롤러가 생성된 직후에 호출됨.
    • init - 보기에서 initComponent가 호출된 직후에 호출. 이것은 보기가 초기화되었으므로 컨트롤러에 대한 초기화를 수행하는 일반적인 시간
    • initViewModel - 뷰의 ViewModel이 생성될 때 호출(정의된 경우)
    • destroy - 리소스를 정리하고 반환 (반드시  callParent 를 호출해야 함)

---

View Models & Data Binding

• ViewModel은 data object(데이터객체)를 관리하는 클래스
  • 뷰모델 : 데이터 바인딩과 데이터 변경을 알려주는 역할을 담당
• View Model은 ViewController와 같이 본인을 참조하는 view를 소유함
  • ViewModel은 뷰와 연결되어 있기 때문에 구성 요소 계층 구조의 상위 구성 요소가 소유한 상위 ViewModel에 연결 가능 ⇒ 상속 가능
• Components bind config 를 갖는다. that allows them to associate many of their configs to data from the ViewModel. → no custom event handlers needed.

Component Binding

• ViewModel

Binding and Configs

View Models Internals

Using the Router

---

Core Concepts

The Class System

OOP

• 클래스 기반 프로그래밍 (Class-based Programming)은 OOP(Object Oriented Programming, 객체 지향 프로그래밍) 방법
  • 클래스 기반의 코드는 시간이 지나도 쉽게 예측 가능
  • 기능 및 구조의 확장 가능

Ext JS를 활용한 객체지향/클래스 기반 프로그램

• 클래스와 인스턴스
• 상속(다형성)
• 추상화

---

클래스와 인스턴스

• 클래스
  • 컨셉의 설계도
• 인스턴스
  • 설계의 실제적인 구현
• 클래스를 정의할 때는 기반구조(structure)와 프로퍼티(property), 인스턴스가 갖는 행동(behavior)를 포함해야 함
• 생성자(constructor)
  • 클래스가 인스턴스로 만들어질 때, 호출되는 특수한 함수
• 상속
  • 코드가 중복되면 유지보수가 어렵고 에러 발생 확률이 높아짐
  • 반복적인 코드를 없애고 이해와 관리가 쉽도록 하는 것
  • 부모 클래스의 property들을 자식 클래스에게 물려줘 반복되는 코드를 없애고 간략화
  • 자식 클래스의 프로퍼티가 물려받은 부모 클래스의 프로퍼티 값을 오버라이드.
• 추상화
  • 주요 목적 : 객체를 원하지 않거나 유효하지 않은 프로퍼티 변경으로부터 보호하는 것
• Config 블록 (Ext JS)
  • 객체 속성(property)에 대한 직접 읽기/쓰기를 예방하기 위해 사용
  • config 블럭은 자동으로 객체 속성에 대한 직접 접근을 막아줌 → 접근자 메서드를 통해서만 설정하고 값을 얻어낼 수 있음
  • 접근자 메서드는 클래스의 config 블럭의 모든 것에 대해 자동으로 생성된 getter, setter 메서드
  • !! config 블럭은 클래스에서 자체적으로 새롭고 유일한 설정만 포함해야 함.
    • 부모 클래스의 config 블럭에 이미 선언된어 있는 프로퍼티는 포함하지 말아야함
• Ext.Base 클래스
  • 공통 기반 클래스를 상속
  • 기반 클래스가 바로 Ext.Base 클래스
  • initConfig()는 Ext.Base 클래스의 메서드로서 상속받은 것
  • initConfig()는 클래스의 config 블럭을 초기화 하고, 접근자 메서드를 자동으로 생성
• 실제 프로퍼티 추상화
  • apply 메서드는 템플릿 메서드로 변경 이전에 제안된 값을 시험해 볼 수 있도록 함
  • 이 메서드는 config의 모든 프로퍼티들을 지정된 객체로 복사

2.12 OOP 기초 ★

https://wikidocs.net/2780

선언 declaration

• Ext.define

Ext.define(className, members, onClassCreated);

• className : 클래스 이름
• members : 키-값 쌍의 클래스 멤버 모음을 나타내는 개체
• onClassCreated : 정의된 클래스의 모든 종속성이 준비되고 클래스 자체가 완전히 생성될 때 호출되는 선택적 함수 콜백

Ext.define('My.sample.Person', {
    name: 'Unknown',

    constructor: function(name) {
        if (name) {
            this.name = name;
        }
    },

    eat: function(foodType) {
        alert(this.name + " is eating: " + foodType);
    }
});

var bob = Ext.create('My.sample.Person', 'Bob');

bob.eat("Salad"); // alert("Bob is eating: Salad");