본문 바로가기

etc/Ext JS9

[Ext Js] 12 MVVM 아키텍처 MVC 대체하기 위한 아키텍처MVC : 각 뷰를 통제하는 controller를 제어하기 어렵고, view와 controller가 N:N구조로 만들어지다 보면 복잡Model과 Controller를 View에 종속적인 구조로 구성한 View기준 아키텍처.View가 종료되면 ViewController와 ViewModel은 같이 소멸.→ ViewModel뷰가 보여주는 화면을 대신.통신을 위한 데이터 레이아웃이 아니다!→ ViewController뷰의 이벤트나 필요한 메소드를 구현해 view와 상호 연동.전역적인 글로벌 controller와는 달리, 자신과 연결된 View에 한하며 이벤트나 참조 등의 구현이 단순Reference 이용데이터 바인딩 이용 : viewModel의 데이터를 이용기본 구성 만들기cmd창에.. 2023. 8. 31.
[Ext Js] 07 위젯(그리드 & 트리) draganddrop 그리드내부 아이템을 가지고 있는 컨테이너Ext.grid.Panel 이라는 패널의 일종Ext.grid.Panelxtype: 'gridpanel'Ext.grid.Panelxtype: '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:'999-9.. 2023. 8. 31.
[Ext Js] 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: '&.. 2023. 8. 31.
[Ext Js] 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에서는 id를 읽어올 수.. 2023. 8. 31.
[Ext Js] 02 클래스 디버깅console.log(’…’)MVVM 아키텍처 사용 시, F12-Network 탭에서 requires한 파일이 정상적으로 로딩되었는지 확인클래스 정의객체 정의 → Ext.define(’클래스명’, {…});클래스는 일반속성과 config 속성을 가질 수 있음config 속성 : 설정과 같은 속성. 클래스 생성시 속성으로 인정config:{ name:null }과 같이 config 속성으로 name을 부여할 수 있음config에 속성을 설정할 경우 → 해당 속성은 자동으로 get, set 접두어를 붙여 메소드로 사용 가능 → this.getName(), this.setName(’설정값’)생성자 함수는 처음 클래스가 생성될 때 자동으로 constructor라는 생성자가 추가됨constructor 생성자.. 2023. 8. 31.
[Ext Js] 시작해보기 Ext JS는 고성능의 변형가능한 UI 위젯을 지원.다양한 벡엔드 소스에 맞출 수 있는 데이터 패키지 포함. 최소한의 조작으로 서버의 데이터를 가져와 사용할 수 있도록 지원다양한 화면에 적합한 레이아웃 매니저와 설정을 지원. 반응형 레이아웃을 이용하여 데스크탑, 모바일 또는 화면 크기에 따른 세부적인 제어 가능진보된 차트 패키지 지원.쉽게 사용하거나 변경할 수 있는 테마 지원.내부에서 사용하는 컨트롤러, 모델, 뷰컨트롤러, 뷰모델 등은 공유하여 사용 가능이를 위해 classic과 modern이라는 toolkit을 지원→ 프로젝트를 기본으로 생성하면, 클래식과 모던 두 개의 위젯을 포함한 프로젝트가 생성됨.센차 컴맨드를 이용해 프로젝트를 만들고 컴파일.센차 컴맨드작업공간 및 패키지 관리기본적인 applic.. 2023. 8. 30.
[Ext Js] 용어 정리/ 기본 개념 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 newNormalValue= parseF.. 2023. 8. 30.
[Ext Js] 홈페이지 공부 GuidesIntro to App Architecture | Ext JS 7.3.1Intro to App ArchitectureMVC 와 MVVM application architectures 지원MVCModels, Views or ControllersThe 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.. 2023. 8. 30.
[Ext JS] sehcha CMD Ext JS Sencha CMD(툴)을 이용해 Ext JS 어플리케이션을 생성 2023. 6. 1.