TechTip (32) 썸네일형 리스트형 단일 다중 정렬 적용하기 샘플개요 Grid 컴포넌트의 헤더를 클릭하면 해당 컬럼이 정렬됩니다. 이미 정렬된 컬럼을 다시 클릭하면 반대의 상태로 정렬됩니다. 사용자가 shift나 ctrl 키를 누른채 헤더를 클릭하면 다중정렬이 실행됩니다. 사용방법 1. 제공된 파일 gridsort.xfdl - 사용될 컴포넌트가 배치되며 사용할 옵션을 설정하여 결과를 확인하는 화면 예제 폼 파일 gridsort.xjs - Grid 정렬에 사용될 로직이 작성된 스크립트 파일 2. 화면 동작 가이드 #1. Grid 헤더를 클릭하면 컬럼 단위로 단일 정렬이 실행됩니다. #2. 화면에서 설정된 정보에 따라 shift, ctrl 키가 눌려졌을때 헤더가 클릭되면 다중 정렬이 실행됩니다. #3. 다중 정렬은 클릭되는 순서대로 적용됩니다. 테스트 버전 정보 Pr.. Modal Modeless (Window 창 띄우기) 샘플개요 넥사크로플랫폼에서 제공하는 메소드를 사용하여 Modal popup과 Modeless Window popup을 사용합니다. 이때 부모 폼과 오픈된 팝업 화면은 서로 값을 전달받을 수 있습니다. 사용방법 1. 제공된 파일 popupsample.xfdl - 샘플 확인을 위한 텍스트박스와 버튼 컴포넌트가 배치되며 사용할 옵션을 설정하여 결과를 확인하는 화면 예제 폼 파일 popup_modal.xfdl - showModal 메소드 호출 시 url로 호출될 폼 화면 popup_open.xfdl - open 메소드 호출 시 url로 호출될 폼 화면 popup.xjs - 팝업의 기본 정보를 설정하고 modal과 open 정보를 사용하여 실제 메소드를 호출하는 로직이 작성된 스크립트 파일 2. 화면 동작 가이드.. Button Tab (Button Div를 이용한 탭화면 구성하는 함수) 샘플개요 Button과 Div를 이용하여 Tab과 같은 화면을 동적으로 구성하는 예제입니다. 탭버튼 클릭 시 해당 Div가 활성화 되도록 구성되어있습니다. 닫기 버튼 클릭 시 해당 탭버튼과 Div가 삭제되도록 구성되어 있습니다. 탭버튼을 한페이지에 보여주기 힘들 경우 이전/다음버튼으로 이동 할 수 있도록 구성되어 있습니다. 사용방법 1. 제공된 파일 buttontab.xfdl - Button Tab을 만들기 위한 컴포넌트 배치와 스크립트가 포함되어 있습니다. buttontab_inner01.xfdl - Button Tab에 연결될 첫번째 Form 파일입니다. buttontab_inner02.xfdl - Button Tab에 연결될 두번째 Form 파일입니다. buttontab_inner03.xfdl - .. 입력된 값 실시간 필터링 적용하기 샘플개요 Edit 컴포넌트에 입력된 값이 실시간으로 필터링 됩니다. 이때 컬럼의 정보는 Combo 컴포넌트에서 선택 값으로 필터링됩니다. 사용방법 1. 제공된 파일 autofilter.xfdl - 사용될 컴포넌트가 배치되며 사용할 옵션을 설정하여 결과를 확인하는 화면 예제 폼 파일 autofilter.xjs - Grid의 컬럼정보를 Combo 컴포넌트의 innerdataset으로 연결하고, 필터가 실시간으로 반영되는 로직이 작성된 스크립트 파일 2. 화면 동작 가이드 #1. 화면에서 Combo박스로 필터를 실행할 컬럼을 선택합니다. #2. Edit 컴포넌트에서 글자를 입력하면 해당 결과가 Dataset에 filter되어 Grid에서 실시간으로 보여집니다. #3. 입력된 값이 없을 경우 filter는 초기.. Grid All Check (그리드 헤더의 checkbox를 체크하여 전체체크/체크해제하는 함수) 샘플개요 그리드의 헤더의 체크박스 체크여부에 따라 모든데이터의 체크박스를 체크/체크해제하는 예제입니다. 헤더의 클릭이벤트 발생 시 헤더의 정보에 따라 데이터셋의 데이터를 변경하도록 구성되어있습니다. 사용방법 1. 제공된 파일 gridallcheck.xfdl - 그리드 헤더 체크 기능을 만들기 위한 컴포넌트 배치와 전체 체크/체크해제 함수가 포함되어있습니다. 2. 화면 동작 가이드 #1. 그리드 헤더를 클릭되면 헤더클릭 이벤트가 발생합니다. #2. 0번째 헤더를 클릭 시 전체 체크/체크해제함수가 실행됩니다. #3. 헤더의 값에 따라 데이터셋의 데이터가 체크/체크해제상태로 설정됩니다. 테스트 버전 정보 Product Version : 17.0.0.2001 (2019.5.30.1) 파일다운로드 경로 https.. Slide Image (애니메이션을 이용한 이미지 슬라이드 기능) 샘플개요 데이터셋을 이용해 동적으로 생성된 이미지 리스트를 슬라이드 되도록 구성한 샘플입니다. 슬라이드 이미지 초기화 함수 호출 시 데이터셋의 정보를 기준으로 재구성 됩니다. 슬라이드 애니메이션 생성 함수를 변경하여 애니메이션 설정정보를 변경할 수 있습니다. 사용방법 1. 제공된 파일 Base::slideimage.xfdl - 슬라이드 이미지 기능을 구현하기 위한 컴포넌트 배치와 함수가 포함되어있습니다. imagerc::Chrysanthemum.jpg - 슬라이드 이미지 1 imagerc::Desert.jpg - 슬라이드 이미지 2 imagerc::Hydrangeas.jpg - 슬라이드 이미지 3 imagerc::Jellyfish.jpg - 슬라이드 이미지 4 imagerc::Koala.jpg - 슬라이.. Animation Menu (애니메이션을 적용한 원형 메뉴) 샘플개요 애니메이션기능을 활용한 원형 메뉴를 구성한 예시 입니다. 중앙 이미지 클릭 시 사이드에 메뉴리스트가 출력되도록 구성되어있습니다. 애니메이션 기능에 대한 활용과 메뉴 구성에 대한 아이디어를 확인 할 수 있습니다. 사용방법 1. 제공된 파일 Base::aniMenu.xfdl - 메뉴를 만들기 위한 컴포넌트 배치와 초기화/메뉴열기/메뉴닫기 함수가 포함되어있습니다. imagerc::img_mainmn.png - 중앙에 표시된 이미지 파일입니다. 2. 화면 동작 가이드 #1. 화면 온로드 이벤트에서 애니메이션 처리를 위한 초기화 함수가 실행됩니다. #2. 중앙의 이미지 클릭 시 사이드에 메뉴들이 애니메이션 효과와 함께 나타납니다. #3. 다시한번 중앙의 이미지 클릭 시 사이드에 메뉴들이 애니메이션 효과와.. Dataset Row Type을 활용한 Grid 데이터 상태표시 샘플개요 Dataset 의 RowType 을 활용한 Grid 데이터 상태표시 예시 입니다. 변경/추가/삭제/초기화 시 상태가 변경되도록 구성되어있습니다. 셋팅된 Status 컬럼을 활용하여 다양하게 표현할 수 있을 것 입니다. 사용방법 1. 제공된 파일 Base::gridStatus.xfdl - 그리드 데이터의 상태표시를 위한 셋팅/추가/삭제/초기화 등의 함수가 포함되어있습니다. 2. 화면 동작 가이드 #1. 화면 온로드 이벤트에서 상태표시를 위한 Grid 셋팅 함수가 실행됩니다. #2. 데이터 변경시 데이터 상태컬럼값이 "U"로 Dataset 의 RowType 이 "4" 로 변경됩니다. #3. 추가 버튼 클릭시 한개의 Row 가 추가 되며 데이터 상태컬럼값이 "I"로 Dataset 의 RowType 이.. 이전 1 2 3 4 다음
