extjs grid 예제

위의 예에서 우리는 저장소에 더미 json 데이터를 사용했습니다. json 데이터를 반환하는 URL/서비스를 이용하고자 하는 경우를 대비하여 데이터를 프록시로 바꿀 수 있습니다. 기본적으로 정렬은 속성 분류기로 적용할 수 있습니다: {property: `id`, 방향 : 저장소의 `ASC`} 데이터를 그리드에 렌더링하기 전에 선별기에서 제공된 속성과 주어진 방향을 기반으로 그리드 데이터를 정렬합니다. 열 크기를 조정 – 열은 그리드 속성 “enableColumnResize : true”를 사용하여 크기를 조정할 수 있습니다 (그 폭을 증가 또는 감소 시킬 수있다). Java 컨트롤러를 사용하여 그리드 레이아웃과 관련된 다른 게시물에 대해 계속 지켜봐 주시기 바랍니다. 웹 개발에서는 그리드 형식으로 데이터를 표시하는 것이 일반적입니다. Extjs에는 자체 그리드 레이아웃을 만들려는 경우에 대비하여 확장해야 하는 패널 패키지에서 사용할 수 있는 Grid 클래스가 있습니다. 이 클래스를 사용하여 웹 페이지에서 그리드를 만드는 것은 매우 쉽습니다. 정렬 – 이 속성은 그리드에 정렬 기능을 추가하는 것입니다. 열 속성 “정렬 가능 : true”를 그리드에 추가하여 정렬 ASC/DESC를 적용합니다. 기본적으로 는 사실입니다.

이 기능을 표시하지 않으려면 false가 될 수 있습니다. Renderer – 이것은 우리가 상점에서 얻은 데이터를 기반으로 그리드 데이터의 보기를 사용자 정의 할 수있는 속성입니다. 참고 :이 예에서 Extjs 라이브러리는 grid.html 파일의 동일한 수준에서 내 프로젝트에서 사용할 수 있습니다. 웹 이나 Sencha에서 라이브러리를 추가 하려는 경우 다른 URL을 사용 해야 하거나 Sencha에서 다운로드 하 고 Extjs로 시작에서 설명 하는 프로젝트 구조와 함께 유지할 수 있습니다. 참고 – 모든 속성은 위의 그리드 예에 추가됩니다. 그것을 편집기 시도에서 그들을 보십시오. 드래그 할 수있는 열 – 열 속성 “enableColumnMove : true”를 추가하면 그리드에서 열을 이동할 수 있습니다. 접을 수 – 이 속성은 그리드에 축소 기능을 추가하는 것입니다.

그리드 속성에 “접을 수 있는 : true” 기능을 추가하여 이 기능을 추가합니다. 이것은 데이터를 표시하는 간단한 구성 요소입니다. . 우리는 json 형식으로 Emp 세부 사항을 포함하는 jsondata 폴더에서 사용할 수있는 json 파일이 있습니다. 더미 데이터를 json 파일을 가리키는 실제 URL로 대체했습니다. 우리는 여기에 자바 또는 다른 프로그래밍 언어로 작성할 수있는 컨트롤러 클래스의 실제 URL을 전달할 수 있습니다.