ExtJS_extjs 아래 그리드의 일부 속성에 대한 설명

1. 인터페이스 수정(css 스타일):
Extjs의 인터페이스 스타일은 테두리 색상과 선택된 행 색상부터 제품 자체의 스타일과 많이 다릅니다. 마우스가 움직이고, 메뉴 등이 거의 다 다릅니다. Extjs의 이러한 스타일 설정은 CSS로 완료됩니다. 예:
선택한 행의 색상은 다음과 같이 설정할 수 있습니다.
.x-grid3-row-selected{배경:#c6e2ff!important;}
다른 것들도 비슷합니다. 해당 클래스를 찾으세요. 를 누른 다음 수정하려는 부분을 설정하면 됩니다.

2. 속성의 역할(Ext.grid.GroupingView, EditorGridPanel 정보):
Extjs의 그리드에는 정렬, 열 숨기기, 이동 등의 강력한 기능이 있습니다. 일부 속성은 이에 해당하며 원하는지 여부를 선택할 수 있습니다. 일부 속성과 기능은 다음과 같습니다:
*. EditorGridPanel:
border: false, //Grid border
autoHeight: true, //그리드 높이가 지정된 높이를 사용해야 하는지 여부
활성화ColumnMove : false, //그리드 열 이동 가능 여부
enableHdMenu: false, //열 헤더에 드롭다운 메뉴 포함 여부
trackMouseOver: true, //마우스가 움직일 때 행 위에 행을 강조 표시할지 여부
stripeRows: true, //그리드의 인접한 두 행의 배경색을 다르게 만듭니다.
* GroupingView:
표시할 데이터에서 그룹화합니다. 데이터 포인트 중 하나에 따라 그룹으로 표시합니다. 이 데이터 포인트는 *.GroupingStore의 groupField에 의해 결정됩니다. *.GroupingView는 그리드에 표시되는 그룹의 일부 표시 속성을 설정합니다. 예:
forceFit:true, //가로 스크롤바가 나타나는 것을 방지하기 위해 그리드 너비에 따라 열 너비를 조정할지 여부
enableGroupingMenu: false, //그룹 존재 여부 제어 헤더 드롭다운 메뉴의 옵션(이 필드로 그룹화, 그룹으로 표시(체크박스))
showGroupName: true,
//그룹화에 사용되는 데이터 포인트 열의 헤더를 다음과 함께 표시할지 여부 그룹 이름
hideGroupedColumn: true, //그룹화에 사용됩니다. 데이터 포인트의 열을 표시할지 여부
startCollapsed: false, //처음 그리드 페이지에 들어갈 때 해당 그룹이 닫힐지 확장될지 여부
scrollOffset: -1, //왼쪽 스크롤 막대 공간(기본값은 19px)

3. 셀에 그림 추가:
Ext.grid.ColumnModel , 그림이 추가된 열에 해당하고 렌더링 링크를 사용하여 기능이 추가됩니다. 예:
var colModel = new Ext.grid.ColumnModel([
{header:”com”, render: AddImgs.createDelegate(this)},
{header:”test”, width:200 , sortable:false}
]);
응답 함수는 다음과 같습니다.
AddImgs = function(value,p,record){
if(record.data.descrip != "")
{
p.attr='ext:qtip="재생 목록에 추가" style="Background-image:url(/imgs/icn_view.gif) !important; background-position: center 2px; background-repeat : no-repeat ;cursor: 포인터;"';
}
}
함수에 들어있는 Record.data는 그리드의 데이터이고, 색상은 생성할 이미지의 경로와 이름입니다. 추가되었습니다.

4. 문자 길이가 열 너비보다 클 때 텍스트를 줄바꿈하는 방법:
이 셀에 사용되는 클래스의 CSS를 설정하면 됩니다. 예:
.x-grid3-cell-inner{
white-space:normal;
overflow:visible;
}
overflow의 기본값은 숨겨져 있습니다. . 공백을 추가한 후 줄 바꿈을 사용할 수 있지만 셀 높이가 여전히 한 행의 높이이므로 첫 번째 행 외에는 데이터를 볼 수 없습니다. 오버플로 값을 표시로 변경한 후에만 데이터 행 수에 따라 셀이 있는 행의 높이가 조정됩니다.

5. 처음에 페이지 진입 시 첫 번째 그룹을 제외한 모든 그룹은 펼치고(접고) 나머지 그룹은 닫히게(접기) :
먼저 패스 속성을 설정하세요. startCollapsed를 사용하여 모든 그룹 닫기: startCollapsed:true;
그런 다음 store.load({callback: function(records,o,s) {ToggleFirstGroup();} })에서 함수를 호출하여 첫 ​​번째 그룹 확장:
//gridView는 (var gv = new Ext.grid.GroupingView({});)와 같이 그리드에서 사용하는 뷰입니다.