그리드
그리드 하나의 레코드를 여러줄rows로 표현하는 방법
머지 / 하나로 합치거나 라인만 숨기거나(child cell : display용 수정불가)
줄 추가 add body row
1-3 셀에 바인딩 된 값 구하기
getCellProperty("바디",idx,"속성명")
속성명에 예약어가 설정되어 있기 때문에 :다음부분만 사용
>
일단 컬럼명만 가져와봄
이걸 사용해서 그리드의 해드셀 (컬럼명) 클릭 시 해당 컬럼들 sort 하는 경우에 사용가능
그리드 이벤트 onheadclick에서 스크립트 작성
>
>
컬럼 정보를 얻어서 sort 데이터셋의 기능
그리드.getBindDataset.set_keystring("S:+"+컬럼명arr[1]);
한번 더 업그레이드 필요 : 누를대마다 오름차순, 내림차순 번갈아, 이미지 추가
함수로 빼서 확인
2-1
직접 하는 방법
더미값 ds 선택해서 컬럼명을 추가
ds더블클릭해서 insert(맨앞)하고 타이틀과 바디에 displaytype, edittype 셀에 checkboxcontrol, checkbox로 바꾸고 text속성에 바인딩
스크립트로 하는 방법
속성 값 얻는 것 getCellProperty 세팅 setCellProperty
>
전체 선택 이벤트 그리드 내 onheadclick에 구현
>
1-3 셀에 바인딩 된 값 구하기
getCellProperty("바디",idx,"속성명")인데
속성명에 예약어가 설정되어 있기 때문에 :다음부분만 사용
/
컬럼명 사용해서 그리드의 해드셀 (컬럼명) 클릭 시 해당 컬럼들 sort 하는 경우에 사용가능
그리드 이벤트 onheadclick에서 스크립트 작성
3 그리드 속성들
3-1 컬럼이동 사이즈변경
3-2 컬럼과 레코드 고정
3-3 고정해제
"set_"로 시작하면 속성임 (이벤트 코드script로 짤수도 있지만 실제로는 속성으로 바로 적용하지)
해당 컴포넌트에서 직접 속성을 수정
>
>
포맷 컬럼은 그리드 더블클릭했을 때 (그리드 에디터 툴)
>
setFixedRow는 속성수정으로 불가하고 script로 해야 함
고정 해제는 컬럼수구해서 다시 band속성 body로 초기화, 필드 고정도 -1로 고정해지
>
그러나 보이는 화면을 excel로 export하면 숨긴 데이터의 인덱스 정보가 나타나게 되는 문제점
so export하는 경우에는 사이즈로 조절하면 안된다. 그 용도의 그리드를 별도로 만들어서 삭제
default와 copy&add 포멧 변경은 속성에서 set_formatid
>
3-6 변경된 포맷과 원본 포맷 비교 : 용도 UX의 중요성때문에 요구 맞게 맞춤조작
>
포맷 값을 어딘가 저장해두면 다시 로그인해도 해당 사용자의 그리드포맷으로 열 수 있지(그리드 개인화기능)
ex) demo.nexacroplatform.com
설정 저장 위치 : 로컬 vs DB
- 로컬스토리지pc : 특정 자리에서만 업무하는 경우
- DB : 사용자가 자주 이동하거나 디바이스를 자주 바꾸는 업무를 하는 경우
+ 로컬스토리지는 각 브라우저별로 다르니까 크롬로컬스토리지 IE로컬스토리지. pc가 관리하는 게 아니고 브라우저별로 관리하니까 동일하게 보이게 하려면 DB에 저장해야 한다.
4. 그리드 트리만들기(윈도우 탐색기처럼)
상위레벨 하위레벨 종속관계 있어야
ds 에 LEVEL 컬럼이 있어야 함 + 레벨별로 데이터 sort가 되어있어야 함(ds만들때 정렬되어있어야)
>
최상위 레벨은 0, nexacro row만 보임
그리드 컨텐츠 에디터에서
>
>
초기값 세팅은 컨텐츠 에디트 창 아니고 속성에서
oncelldbclick 이벤트 토글로도 트리 펼치고 접기
>
5. 그루핑후 연산(부서별 법인별 소계, 하단의 전체합계, 소트순서 상단으로 위치)
소계
>
합계는 add summury row와 동일
>
통계 위쪽 표시는 속성변경으로도 가능(속성은 해당 프로퍼티에 직접 세팅 > 코딩)
>
>
>
번외 그리드 디자인 빈공간 채우기
속성 autofit
>
사용시 주의사항
여백에 맞춰지기 때문에 여백없으면 오히려 줄어든다
selecttype 줄씩 선택할지 cell을 선택할지 multirow할지
>
데이터셋선택해서 값들 한번에 복붙도가능해서 데이터 많은 경우
expression 많이쓰면 스크롤이 포인터를 못따라감
edittext 컴포넌트 타이핑하는 대로 바로 반영하려면
>
edit 컴포넌트 이벤트에서 oninput 더블클릭해서
>
edit 컴포넌트와 grid가 바로 연동된것처럼 보이지만 연관관계 없음
그리드는 ds에 연결 고리를 거쳐서 edit 컴포넌트 컬럼id를 연결(바인딩)
그리드 편집창 선택 두번 해야 편집가능한 설정(그리드 컨텐츠 에디터 edittype - normal)
>
포커스만으로 편집가능하도록 (그리드 속성 autoenter-select)
>
컨테이너 컴포넌트 (Div/ Tab/ PopupDiv)
>
다른 화면 연결 인클루드
이너 폼 추가
>
PopupDiv 특징 해당 영역 밖을 클릭하면 닫힘
문제풀이1
PopupDiv 바로 눈에 보이게 하려면 event script 작성
>인자3개 (팝업띄울 기준 컴포넌트, x좌표, y좌표)
x좌표 0 그대로
y좌표 0 대신 obj.height
클로즈 버튼 누르면 값을 parent로 반영
Div 그리는 방법2가지
직접 div 그리고 내부 컴포넌트 그리는 방법 (Contents로 구성된 PopupDiv)
vs
직접 div를 그리고 div의 url 속성에 이미 만들어진 별도폼을 연결하는 방법(Linked Form으로 구성된 PopupDiv)
직접 그린방식에서는 값도 직접 접근해서 줄 수 있다
> ds값 얻어서 각 Edit 컴포넌트에 직접 set_value, this.닫을컴포넌트.closePopup();
문제풀이2
링크로 연결한 경우 값 전달
> 인자가 3개 더 추가 +width, height, callback
통신(transaction) 서버 연결 데이터 가져오는데 콜백이 통신함수의 끝인것처럼
링크로 연결된 PopupDiv.trackPopupByComponent 함수의 끝이 콜백
값을 받으면 콜백함수를 통해 해당 값을 전달
div 연결된 url속성을 더블클릭하면 클로즈 할 때 값을 array(배열)로 넘겨야 하고/ 닫으면서 배열을 넘기고/
닫을 때도 depth가 있다는 차이(.parent 두번 해야 상위 폼까지 찾는다 - innerform때문, 거꾸로는 div.form.컴포넌트)
>
****콜백함수 인자값 정의와 사용에서 왜 다름?
문제풀이3
Calendar 컴포넌트 펼쳐지기가 기본이고 속성에서 설정도 가능한데
>
ondropdown Event로도 가능 (열리고, 기본값 세팅하고, 날짜 설정한 것을 parent로 반영)
이름을 보면 알수있음 div 직접 그리는 방식 데이터로도 직접 접근 가능
>
> 초기값 프롬투 값을 popupdiv값으로 세팅후, trackPopupByComponent 열리도록, 하고 PopupDiv값을 지정후 Form의 달력 컴포넌트에 반영하는 컨펌버튼
oncloseup 닫힐 때 from to 값 비교해서 뒤에가 작으면 뒤값을 빈칸으로 만들기
>
>
폼
>
addChild 폼에 어플리케이션 붙임
alert 메세지 뿌리고
getFocus 특정 컴포넌트에 위치
isValidObject 폼에 컴포넌트 유무 확인
setTimer 시간마다 이벤트 발생시키기
killTimer 설정 타이머 끄기
transaction 데이터 가져오기
onactivate 이벤트는 많이 쓰지 않음, 어플리케이션이 작동하다 다른 화면 보다 다시 돌아올 때
onbeforeclose 폼 끄기 직전
oninit 폼로딩 시 컴포넌트 올라오기 직전 발생 거의 쓸일 없음
onload 모든 컴포넌트가 다 올라온 시점
ontimer 타이머 연결했을 때
>
문제풀이1 오브젝트와 컴포넌트
폼에 있는 모든 오브젝트/컴포넌트 정보 구하기
수정전> 껍데기만 나옴
수정후>
obj.all; visible + invisible
obj.component; visible만
obj.objects; invisible만(ds만)
사용예 ) 공통(표준) 담당자 Form 로딩하면서 모든 컴포넌트에 초기값 세팅할 때 많이 사용
컴포넌트id String을 Object로 만들기
eval 금지 (시큐어코딩 프로그램에 개발 후 체크할 때 걸림. 해당 함수에 들어가는 모든 코드 다 뚫려서)
>대체코드 컴포넌트에 넣었다 빼면 됨
문제풀이2 타이머 - 서버에서 클라이언트로 데이터를 보내는 push 제품비싸서 유사하게
공지사항 메세지 등 Timer로 구현
>셋타이머를 호출하면 어디서 타냐 관련 스크립트는 Form 이벤트에서 ontimer에서 동작한다.
>타이머 세팅과 해제
여기서는 static 컴포넌트로 text를 그냥 뿌렸지만 실제는
transaction 태워서 데이터 받아와서 메세지 보여주는 스크립트를 작성하면 알람 비슷하게 작동함
문제풀이3 팝업창
팝업의 사용 코드성데이터 검색에 많이 사용, 해당 팝업(차일드) 입력 값을 상위폼(패런트)로 넘기는 방식
값을주고받는건 스크립트로 간단한거니까 여기서 중요한건 모달을 쓰자는 것
팝업의 2유형
모달 vs 모달리스
부모폼 영역 벗어날 수 없음(parent에 종속) 창을 닫기 전까지 해당 팝업만 조작 가능(parent 접근 불가)
parent 종속 없이(parent영역 밖으로 벗어날 수 있음) parent 영역 접근 클릭 가능
IE 브라우저 제약사항, 뜨는 시간 차이
모달은 종속되어 팝업 뜰 때 메인에서 호출한 parent엔진을 공유해서 씀
모달리스는 별도 창이라 엔진 공유 안해. 공유해서 쓰더라도 IE브라우저 속도 더 늦어져서 넥사크로플랫폼은 모달리스에서 별도 엔진을 더 올리는 방법을 사용함
모달리스에서 한참 걸리고 흰화면이 나오는 이유는 내부 넥사크로 엔진 올리는 시간
모달리스는 용도 demo.neacroplatform.com
화면 여러개 MDI방식으로 띄우는데 두 화면 비교할 때 창 배열 (윈도우방식처럼 분할)보다
아예 공중에 따로 윈도우방법으로 띄우는 게 더 편리할 때 사용
스크립트 호출 (스크립트보다 어떤 메소드 쓰는지가 중요..)
모달
> 폼 만들어서, init하고, 내가 띄워줄 Form정보 기술 후 / showModal메소드로 띄움
모달리스
>showModal
>
모달리스 nexacro.open 메소드
>
3-5 모달리에서도 값 주고받기 가능 뭔말
다이나믹 크리에이션, 바인딩
>
>
>
문제풀이1
>
좌측간격고정 우측 여백 픽셀 +넓이만 늘어남
>
우측 여백만 고정 + 넓이 고정
>
사이간격고정 우측 여백 폭은퍼센트 + 넓이 늘어남
>어레인지먼트
문제풀이2
스크립트를 이용해서 컴포넌트 생성하는 방법(Dynamic Creation)
생성 삭제 이벤트걸고 이벤트 삭제 데이터바인딩 폼에서는 잘 되는데 div/tab에서는 ?
생성4개가 한세트
> new 컴포넌트(); 사이즈; id, this.addChild("폼이름", 컴포넌트); 폼에 붙이기, show로 화면에뿌리기
삭제3개가 한세트
>
실행하는 방법이 전용브라우저가 아니라 메모리 개별 개발자가 관리하지 않고
html5에서는 브라우저가 관리함
js destroy();null; 컴포넌트 삭제 코드 세트
디브나 탭은 이 방법으로 안됨 - inner Form depth가 있는데 안써줬으니까
>
삭제도 depth추가
>
이벤트 추가
댓글