본문 바로가기

Ext JS8

12 MVVM 아키텍처 MVC 대체하기 위한 아키텍처 MVC : 각 뷰를 통제하는 controller를 제어하기 어렵고, view와 controller가 N:N구조로 만들어지다 보면 복잡 Model과 Controller를 View에 종속적인 구조로 구성한 View기준 아키텍처. View가 종료되면 ViewController와 ViewModel은 같이 소멸. → ViewModel 뷰가 보여주는 화면을 대신. 통신을 위한 데이터 레이아웃이 아니다! → ViewController 뷰의 이벤트나 필요한 메소드를 구현해 view와 상호 연동. 전역적인 글로벌 controller와는 달리, 자신과 연결된 View에 한하며 이벤트나 참조 등의 구현이 단순 Reference 이용 데이터 바인딩 이용 : viewModel의 데이터를 이용 기본.. 2023. 8. 31.
07 위젯(그리드 & 트리) draganddrop 그리드 내부 아이템을 가지고 있는 컨테이너 Ext.grid.Panel 이라는 패널의 일종 Ext.grid.Panel xtype: 'gridpanel' Ext.grid.Panel xtype: 'grid' 그리드는 Store를 필요로 함 스토어 : 데이터를 가지고 있는 저장소. 서버나 로컬의 데이터를 가져와 보관. 데이터의 레이아웃은 Model로 정의. 그리드 출력해보기 Ext.onReady(function() { var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], groupField: 'nation', data: [ { nation:'대한민국', name:'김하나', email:'hong@test.com', phone.. 2023. 8. 31.
04 레이아웃 초기 ExtJS에서 태그 안에는 아무것도 없지만, app.js에 코드를 작성하면 미리 정의되어 있는 컴포넌트들이 자동으로 삽입되어 index.html에 보임 ExtJS 컴포넌트들은 기본적으로 block 속성 (위-아래로 정렬) 1. panel 레이아웃을 구성할 때 쓰이는 Container. 하위 구성요소를 포함할 수 있음 renderTo:Ext.getBody() →어디에 보여지는지 : body안에 Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ region: 'center', width: 500, height: 400, border: true, title: 'Hello', html: ' Hahee!', renderTo:Ext.getBody() }); }).. 2023. 8. 31.
03 Ext JS 동작의 기본 위젯 화면을 구성하는 집합으로 목적에 맞는 다양한 기능과 외형을 갖음 각 컴포넌트는 xtype을 이용하여 정의 xtype사용하는 이유 : Ext.create문을 이용하는 것 보다 짧고 간결하기 때문에 위젯의 실시간 추가 child widget을 실시간으로 추가하려면 add메소드를 사용 add메소드는 일반적으로 Ext.create문을 이용하여 생성하고 사용 쿼리 Ext.ComponentQuery.query 여러 건인 경우 : 배열 형태의 인덱스 값을 추가하여 처리 ex) Ext.ComponentQuery.query('datafield')[0]; ex) name속성이 추가되었을 경우 Ext.ComponentQuery.query('datafield[name=myDateField1]')[0]; Ext JS 6에.. 2023. 8. 31.
02 클래스 디버깅 console.log(’…’) MVVM 아키텍처 사용 시, F12-Network 탭에서 requires한 파일이 정상적으로 로딩되었는지 확인 클래스 정의 객체 정의 → Ext.define(’클래스명’, {…}); 클래스는 일반속성과 config 속성을 가질 수 있음 config 속성 : 설정과 같은 속성. 클래스 생성시 속성으로 인정 config:{ name:null }과 같이 config 속성으로 name을 부여할 수 있음 config에 속성을 설정할 경우 → 해당 속성은 자동으로 get, set 접두어를 붙여 메소드로 사용 가능 → this.getName(), this.setName(’설정값’) 생성자 함수는 처음 클래스가 생성될 때 자동으로 constructor라는 생성자가 추가됨 const.. 2023. 8. 31.
Ext JS 시작해보기 Ext JS는 고성능의 변형가능한 UI 위젯을 지원. 다양한 벡엔드 소스에 맞출 수 있는 데이터 패키지 포함. 최소한의 조작으로 서버의 데이터를 가져와 사용할 수 있도록 지원 다양한 화면에 적합한 레이아웃 매니저와 설정을 지원. 반응형 레이아웃을 이용하여 데스크탑, 모바일 또는 화면 크기에 따른 세부적인 제어 가능 진보된 차트 패키지 지원. 쉽게 사용하거나 변경할 수 있는 테마 지원. 내부에서 사용하는 컨트롤러, 모델, 뷰컨트롤러, 뷰모델 등은 공유하여 사용 가능 이를 위해 classic과 modern이라는 toolkit을 지원 → 프로젝트를 기본으로 생성하면, 클래식과 모던 두 개의 위젯을 포함한 프로젝트가 생성됨. 센차 컴맨드를 이용해 프로젝트를 만들고 컴파일. 센차 컴맨드 작업공간 및 패키지 관리 .. 2023. 8. 30.
용어 정리/ 기본 개념 foo 프로그래밍 상에서 임시로 변수이름을 지정해줘야할 때, 주로 쓰이는 변수 이름 외에 bar, baz, Fie, Foe, Fee등도 함께 사용됨 Ext.application 한 프로젝트에 하나만 있어야 한다. 리로드시 실행되는 것. app.js에 있음 천단위기호 가격과 같은 천단위로 (,)콤마를 사용하여 구분자 설정 // 천단위기호 추가 var newDecimalPointValue= Ext.util.Format.number(추가할대상, '0,000'); // var newDecimalPointValue = 추가할대상.toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',').split('.')[0]; // 천단위기호 제거, 소수점 제거 var newNormalValu.. 2023. 8. 30.
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 responsi.. 2023. 8. 30.