5. ExtJS 기본 문법

5. ExtJS 기본 문법

5.1 ExtJS로 HTML 웹페이지 작성

5.1.1 HTML 문법으로 웹페이지 작성

우리는 일반적으로 HTML을 사용해 웹페이지를 작성할 때 body태그에 다른 컴포넌트 태그들을 정의함으로써 웹페이지를 구성합니다.

이때 body태그는 일종의 도화지 역할을 하고 그 도화지 안에 다른 여러 태그들을 이용해 웹페이지를 그려나가는 것이죠.

5.1.2 ExtJS 문법으로 웹페이지 작성

HTML 문법에서 <body>라는 도화지안에 컴포넌트를 그리기 위해 태그를 정의했었죠? 마찬가지로

ExtJS 문법에서도 도화지가 필요합니다. 그리고 그 도화지안에 그리고 싶은 컴포넌트는 items라는 속성의 배열값으로 주는거죠.

이때 컴포넌트를 배열값으로 줄때 json구조로 정의해 줍니다.

5.1.2.1 도화지 생성

- Ext.create("Ext.panel.Panel",{json 구조인 KEY,VALUE 속성으로 정의})

- 첫번째 parameter : 생성할 컴포넌트 클래스명

- 두번째 parameter : 컴포넌트 클래스(도화지)의 속성들을 정의

5.1.2.2 도화지 안에 컴포넌트 생성

- 생성할 컴포넌트를 items라는 속성의 배열값으로 정의

5.2 ExtJs 문법 분석

5.2.1 Ext.create("Ext.panel.Panel",{속성 : 값, 속성 : 값})

- Ext.craete(컴포넌트 클래스, 컴포넌트 클래스의 속성 정의) => 컴포넌트를 생성하겠다.

- Ext.create("Ext.panel.Panel",{속성 : 값, 속성 : 값}) => 생성하려는 컴포넌트는 panel이다.

- renderTo는 컴포넌트 클래스의 속성이다.

- Ext.getBody()는 도화지를 body태그 영역위에 올리겠다는 의미이다.

5.2.2 panel or viewport class

- extjs상의 body태그 역할을 합니다. - panel or viewport class == body tag - 각각의 컴포넌트들은 extjs에서 이미 구현해놓은 컴포넌트들 입니다.

5.2.3 xtype

- xtype의 값으로는 클래스에 대한 별명, 명칭이 옵니다.

- Databased 쿼리의 alias와 같이 컴포넌트 클래스에 대한 별명, 명칭 지정해 놓고 간편히 쓰기 위한 용도입니다.

- textfield == Ext.form.field.Text

5.3 기본 컴포넌트들의 배치

items속성의 배열값에 json형식으로 컴포넌트들을 생성하면 한줄 한줄 컴포넌트 들이 배치됩니다.

마치 HTML로 따지면 <div>태그로 감싼 후 컴포넌트 tag를 정의한 것과 같습니다.

코딩 잡화점