ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼


    https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ




    ExtJS 는 어떻게 UI 컴포넌트를 그리는 것인가?


    ExtJS는 기존 HTML 구조와 다르게 요즘 NodeJS의 모듈을 dependencies 추가하는 문법구조와 동일


    즉, ExtJS에서 정의한 속성값들을 JSON 구조에 맞춰서 정의만 해주면 화면에 출력됨



    아래는 NodeJS에서 연동하고자 하는 NPM 관련 dependencies 예를 들자면, 


    "dependencies": { 

            "express": "2.X.X", 

            "redis": "0.X.X" 

    }



    ExtJS 의 기본 문법을 예로 들자면,


    Ext.create('Ext.panel.Panel",{

         width : 300,

         height : 300,

         border : true

    });



    위의 코드를 비교해보았을때 별차이가 없음


    renderTo 속성은 value값으로 지정한 HTML 엘리먼트 영역에 렌더링을 함


    대신, Viewport의 경우는 별도로 renderTo를 해주지 않아도 무관



    HTML 화면 그리기 VS ExtJS 컴포넌트 그리기


    HTML 태그의 경우, body 태그 내에 INPUT 태그 등의 HTML 태그를 입력하면 화면에 출력

    ExtJS의 경우는 Panel 또는 Viewport와 같은 도화지 위에 ExtJS에서 만들어 놓은 컴포넌트들을 

    items 라는 속성에 정의를 해주면 화면에 출력이 가능


    xtype 속성이란 ?


    쉽게말해, SQL 쿼리 작성 시 


    SELECT user_id AS userid, user_name AS name

    FROM user


    위와같이 alias 를 이용하여 정의해준 별칭이랑 유사한 성격이라 보면 됩니다.


    예를들어, xtype 이 "textfield" 라고 가정한다면 실제 "Ext.form.field.Text" 클래스를 사용합니다.


    도화지를 브라우저영역에 채우기 위해서는 ? layout : 'fit'


    Viewport의 layout 속성의 값을 fit으로 정의해주고 items에 panel을 선언하면 도화지가 브라우저 영역에 가득 채워지게 됩니다.


    별도의 퍼블리싱없이 레이아웃을 나누고 싶다면? layout : 'border'


    Viewport의 layout 속성의 값을 border로 정의해주고 items내에 panel들을 나누어 준 후, 각 패널에 region 속성을 정의해서 레이아웃 분기를 해줍니다


    region 속성값 : north / center / south / west / east


    레이아웃 구조를 잡기 위하여 layout : 'border' 를 이용할 경우,

    자식 직속 컴포넌트에 region 속성을 꼭 정의해주어야 원하는대로 영역을 나눌 수 있습니다.


    고정높이를 지정할 경우는 height 속성을 주면 되며, 별도로 동적으로 특정 비율로 각 region을 나누고 싶다면, flex라는 속성을 정의해주면 됩니다.

    Posted by 몽고