Extjs4 GridPanel_extjs의 주요 구성 매개변수에 대한 자세한 소개

1. Ext.grid.GridPanel
주요 구성 항목:
store: 테이블 데이터 세트
columns: ColumnModel 컬럼 모드를 자동으로 생성할 수 있는 테이블 컬럼 모드 구성 배열
autoExpandColumn: 테이블의 사용되지 않은 공간을 자동으로 채우는 열입니다. 매개변수는 열 ID이며 0일 수 없습니다.
stripeRows: 테이블이 행마다 색상을 변경하는지 여부입니다.
cm, colModel: 테이블 렌더링 시 테이블의 컬럼 모드 이 구성 항목을 설정해야 합니다.
sm, selModel: 테이블의 선택 모드, 기본값은 Ext.grid.RowSelectionModel
enableHdMenu: 컨텍스트 메뉴 표시 여부 테이블 헤더의 기본값은 true입니다.
enableColumnHide: 제목 전달 허용 여부 컨텍스트 메뉴에서 열을 숨깁니다. 기본값은 true입니다.
loadMask: 데이터 로드 시 마스크 효과를 표시할지 여부, 기본값은 false입니다.
view: 테이블 뷰, 기본값은 Ext.grid.GridView
viewConfig: 테이블 뷰 구성 객체
autoExpandMax: 자동 확장 열의 최대 너비, 기본값은 1000
autoExpandMin: 최소 너비 자동 확장 열의 기본값은 50개입니다.
columnLines: 열 구분선을 표시할지 여부, 기본값은 false입니다.
disableSelection: 행 선택을 비활성화할지 여부, 기본값은 false입니다.
enableColumnMove: 드래그 및 이동을 허용할지 여부 열 삭제 시 기본값은 true
enableColumnResize: 열 너비 변경 허용 여부, 기본값은 true
hideHeaders: 테이블 헤더 숨기기 여부, 기본값은 false
maxHeight: 최대 높이
minColumnWidth: 최소 열 너비, 기본값은 25
trackMouseOver: 마우스가 있는 행을 강조 표시할지 여부, 기본값은 true
주요 메서드:
getColumnModel(): 열 모드 가져오기
getSelectionModel(): 선택 모드 가져오기
getStore(): 데이터 세트 가져오기
getView(): 뷰 객체 가져오기
reconfigure( Ext.data.Store store, Ext.grid.ColumnModel colModel ): 테이블 구성 요소 재구성 새로운 데이터셋과 컬럼 모드 사용

2, Ext.grid.Column
주요 구성 항목:
id: 컬럼 id
Header: 헤더 텍스트
dataIndex: 데이터 세트의 열과 데이터 레코드 사이의 대응을 설정합니다. 값은 데이터 레코드의 필드 이름입니다.이 항목을 설정하지 않으면 열 인덱스는 데이터 레코드의 필드 인덱스에 해당하는 데 사용됩니다.
width: 열 너비
align: 열 데이터 정렬
hidden: 숨길지 여부 열, 기본값은 false
고정: 열 너비 수정 여부, 기본값은 false
menuDisabled: 열 상황에 맞는 메뉴 비활성화 여부, 기본값은 false
크기 조정 가능: 열 변경 허용 여부 width, 기본값은 true
sortable: 정렬 허용 여부, 기본값은 false true
renderer: 열의 사용자 정의 셀 렌더링 함수 설정
함수에 전달되는 매개변수는 다음과 같습니다.
value : 데이터의 원래 값
metadata: 셀 및 속성의 스타일을 설정하는 데 사용되는 메타데이터 개체입니다. 이 개체에 포함된 속성은 다음과 같습니다.
css: 셀 TD 요소에 적용되는 스타일 이름
attr: 'style="color:blue"'와 같은 HTML 속성 정의 문자열
레코드: 현재 데이터 레코드 객체
rowIndex: 셀의 행 인덱스
colIndex: 셀의 열 인덱스
store: 데이터 세트 객체
xtype: 열 렌더러 유형, 기본값은 Gridcolumn, 기타 옵션에는 booleancolumn, numbercolumn, datecolumn, templatecolumn 등이 포함됩니다.
editable: 편집 가능한지 여부, 기본값은 true입니다.
editor: editor
groupName:
emptyGroupText:
groupable:

3. Ext.grid.ColumnModel
주요 구성 항목:
columns: 필드 배열
defaultSortable: 기본 정렬 수행 여부, 기본값은 false
defaultWidth: 기본 너비
Main 메소드:
findColumnIndex(String col): 주어진 dataIndex를 기준으로 열 인덱스를 찾습니다.
getColumnById(String id): 지정된 id에 해당하는 열을 가져옵니다.
getColumnCount(Boolean visibleOnly): 열의 전체 개수를 가져옵니다.
getColumnHeader(Number col): 열의 헤더를 가져옵니다
getColumnId(Number index): 열 ID 가져오기
getDataIndex(Number col): 열에 해당하는 데이터 필드 이름 가져오기
getIndexById(String id): 열 인덱스 가져오기
getTotalWidth( Boolean includeHidden )
isCellEditable( 숫자 colIndex, 숫자 rowIndex )
isFixed()
isHidden( 숫자 colIndex )
setColumnHeader( 숫자 col, 문자열 헤더 )
setColumnWidth ( 숫자 열, 숫자 너비, 부울 억제 이벤트 )
setDataIndex( Number col, String dataIndex )
setEditable( Number col, Boolean editable )
setEditor( Number col, Object editor )
setHidden( Number colIndex , Boolean hide )
setRenderer( Number col, 함수 fn )

4. Ext.grid.AbstractSelectionModel
메인 메소드:
lock(): 선택 영역 잠금
unlock(): 선택 영역 잠금 해제
isLocked(): 현재 선택 영역이 잠겨 있는지 여부

5. Ext.grid.CellSelectionModel
메인 메소드:
clearSelections(Boolean PreventNotify): Clear 선택 영역
getSelectedCell(): 현재 선택된 셀을 가져오고 배열을 반환합니다. 형식: [rowIndex, colIndex]
hasSelection(): 현재 선택 영역이 있는지 여부
select(Number rowIndex, Number colIndex, [Boolean PreventViewNotify], [Boolean PreventFocus], [Ext.data.Record r] ) : 지정된 셀 선택

6, Ext.grid.RowSelectionModel
기본 구성 items:
singleSelect: 단일 선택 모드를 선택할지 여부, 기본값은 false입니다. 즉, 여러 데이터를 선택할 수 있습니다.
주요 메소드:
clearSelections([Boolean fast]): 모든 선택 영역 지우기
deselectRange(Number startRow, Number endRow): 범위 내 행 선택 취소
deselectRow(Number row, [Boolean PreventViewNotify]): 지정된 행의 선택 상태 취소
each( Function fn, [Object 범위] ): 선택한 모든 행을 탐색하고 지정된 함수를 호출합니다.현재 선택한 행이 이 함수에 전달됩니다.
getCount(): 선택한 행의 총 개수 가져오기
getSelected(): 첫 번째로 선택한 레코드 가져오기
getSelections(): 선택한 모든 레코드의 배열 가져오기
hasNext(): 현재 선택한 행 뒤에 선택할 수 있는 레코드가 있는지 확인
hasPrevious(): 현재 선택한 행 앞에 선택할 수 있는 레코드가 있는지 확인
hasSelection(): 여부 데이터가 선택되었습니다
isIdSelected(String id): 지정된 id를 가진 레코드가 선택되었는지 확인
isSelected(번호/레코드 인덱스): 지정된 레코드 또는 레코드 인덱스의 데이터가 선택되었는지 확인
selectAll(): 모든 행 선택
selectFirstRow(): 첫 번째 행 선택
selectLastRow([Boolean keepExisting]): 마지막 행 선택
keepExisting: 기존 선택을 유지할지 여부
selectNext( [Boolean keepExisting]): 현재 선택된 행 선택 다음 행
selectPrevious([Boolean keepExisting]): 현재 선택된 행의 이전 행 선택
selectRange(Number startRow, Number endRow, [Boolean keepExisting]): 범위의 모든 행 선택
selectRecords(Array records , [Boolean keepExisting] ): 지정된 레코드 세트 선택
selectRow( Number row, [Boolean keepExisting], [Boolean PreventViewNotify] ): 행 선택
row: 행 인덱스
selectRows( 배열 행, [Boolean keepExisting] ): 여러 행 선택
rows: 행 인덱스 배열

7. Ext.grid.CheckboxSelectionModel
주요 구성 항목:
singleSelect: 단일 선택 모드 선택 여부, 기본값은 false, 즉 여러 데이터를 선택할 수 있음
checkOnly: 체크박스 열만 클릭하여 선택할지 여부, 기본값은 false
sortable: 체크박스 열 정렬 허용 여부, 기본값은 false
width: 체크박스 열 너비, 기본값은 20

8, Ext.grid. RowNumberer
주요 구성 항목:
header: 행 번호 목록 헤더에 표시되는 내용
width: 열 너비, 기본값은 23

9. GridView
주요 구성 항목:
enableRowBody: 행 본문 포함 여부
sortAscText: 테이블 제목 메뉴의 오름차순 텍스트 설명
sortDescText: 테이블 제목 메뉴의 내림차순 텍스트 설명
columnsText: 표 제목 메뉴의 열에 해당하는 텍스트 설명
autoFill: 표 전체를 채우도록 열을 자동으로 확장할지 여부, 기본값은 false
forceFit: 표 열 너비를 강제로 조정할지 여부 가로 스크롤 막대가 표시되지 않도록 테이블의 전체 너비에 맞춥니다. 기본값은 false입니다.
주 메소드:
focusCell(Number row, Number col): 포커스를 지정된 셀로 이동
focusRow(Number row) ): 지정된 행으로 포커스 이동
getCell(Number row, Number col): 지정된 셀에 해당하는 td 요소 가져오기
getHeaderCell(Number index): 지정된 헤더에 해당하는 td 요소 가져오기
getRow(Number index): 지정된 행에 해당하는 tr 요소 가져오기
getRowClass(Record Record, Number index, Object rowParams, Store store): 테이블 행에 붙은 스타일 이름 가져오기
record: 현재 행 데이터 레코드 객체
index: 현재 행의 인덱스
rowParams: 렌더링 시 행 템플릿에 전달되는 구성 객체. 이를 통해 행 본문에 대해 스타일을 사용자 정의할 수 있습니다. 이 객체는 활성화할 때만 적용됩니다. 가능한 속성은 다음과 같습니다.
body: 줄 본문에 렌더링된 HTML 코드 조각
bodyStyle: 줄 본문 tr 요소의 스타일 속성에 적용되는 문자열
cols: colspan 속성에 적용되는 값 줄 본문 td 요소의 기본값은 총 열 수입니다.
store: 테이블 데이터 세트
refresh( [Boolean headersToo] ): 테이블 구성 요소 새로 고침
scrollToTop(): 테이블을 스크롤하여 top

실제 전투 1:
그리드 패널의 스크롤 막대가 자동으로 마지막 레코드로 스크롤되도록 합니다(동적으로 데이터 삽입):
grid.getView().focusRow(vehiclePassInfoGrid.getStore().getCount( )-1);

2: 그리드 패널에서 선택한 행의 상태를 지웁니다.
grid.getSelectionModel().clearSelections();