DHTMLX 초 간단 요약

내가 까먹지 않기 위해서 포스팅.

 

div 영역 잡고 layout, toolbar, tabbar, button, grid, tree, menu 등 필요한 개체를 붙이면 됨. 의외로 엄청 편리하고 간단한 듯.

 

api 참고 http://docs.dhtmlx.com/doku.php

 

ex)

1. html

1) 필요한 css 추가

<link rel="stylesheet" type="text/css" href="../libs/dhtmlx/dhtmlx.css" />등

2) 필요한 js 추가

<script type="text/javascript" src="../libs/dhtmlx/dhtmlx.js"></script> 등

3) 객체가 보여질 영역 잡기

<div id="objId" style="position:absolute; width:1024px; height:600px;"></div>

2. script

1) html div 영역에 레이아웃 객체 생성.

(파라미터1 : div id, 파라미터2 : 레이아웃 형태) : 레이아웃 형태는 http://docs.dhtmlx.com/doku.php?id=dhtmlxlayout:layoutpattern 참고.

예를 들면,

var dhxLayout = new dhtmlXLayoutObject("objId", "1C");

레이아웃 객체 생성해서 화면에 뿌리는게 끝이다. 이게 전부.. 그 외 이미지나 기타 꾸미는 옵션도 api에 잘 나와있고..

2) 생성된 레이아웃 객체에 접근하기

dhxLayout.cells("a"). XXXXXX

레이아웃 형태에 따라 각 영역에 a, b, c .. 로 id가 잡힌다. 이 아이디로 각 영역에 접근 가능하다.

만약 레이아웃 a 영역에 트리를 붙이고 싶으면

var dhxTree = dhxLayout.cells("a").attachTree();

이게 끝이다. 트리를 구성하고 꾸미는건 트리 api에 잘 나와있고..

예를 들면,

dhxTree.setImagePath("../img/dhtmlxTree/");           => 트리 이미지 경로
dhxTree.attachEvent("onDblClick", function(id){       => 트리 이벤트 (onClick, onDblClick 등등)
       var id = dhxTree.getSelectedItemId();                => 선택된 트리 아이디 가져오기
      var openState = dhxTree.getOpenState(id);        => 선택된 트리의 상태(펼쳐졌는지 오므려졌는지 ㅋ)

alert(id + "의 상태가 " + openState + "입니다.");

});

dhxTree.insertNewChild(0, "root", "/");                            => 최상위 디렉토리를 /로 만들고 id는 root로 지정

dhxTree.insertNewChild("root", "child1", child1");              => id가 root인 트리의 하위에 child1이라는 이름과 아이디로 트리 노드 생성

dhxTree.insertNewChild("child1", "child1-1", "child1-1");    => id가 child1인 트리의 하위에 child1-1이라는 이름과 이이디로 트리노드 생성

이렇게 생성하면 아래와 같은 형태로 트리가 생성된다.

/

ㄴ child1

ㄴchild1-1

이렇게 해 놓으면 설정된 이미지경로의 이미지로 더블클릭이벤트를 가진 트리가 레이아웃 a에 생성된다.

 

거의 대부분의 컴포넌트들을 위와 같이 간단하게 만들고 사용할수 있다.

처음 사용해보는 거라 개념을 잡는데서 처음 몇 일간 엄청 헤맸지만 워낙 api가 자게하게 나와있고 메소드명이 직관적이라서

각 컴포넌트 api를 찾아보면 사용하는데 무리가 없을 것 같다.

각 컴포넌트 api 최초 진입 후에 API Methods (alphabetical list) 에서 제일 많이 찾은거 같다.

무언가 찾고 싶으면 get, id 이런걸로 찾고 값을 셋팅하고 싶으면 set으로 검색하고... 없는 게 거의 없었던 듯...

 

누가 만들었는지...