ExtJS 에서 grid 의 속성 설명

1.인터페이스 수정(css style):Extjs 에서 인터페이스 스타일 은 우리 제품 자체 의 스타일 과 많이 다 릅 니 다.테두리,선택 한 줄 의 색상 부터 마우스 로 이동 하 는 줄 의 색상,메뉴 등 은 거의 다 릅 니 다.Extjs 의 이 스타일 에 대한 설정 은 모두 css 에서 이 루어 졌 다.예 를 들 어 선택 한 줄 의 색상 은 다음 과 같이 설정 할 수 있 습 니 다.x-grid 3-row-selected{background:\#c6e2ff!important;} 다른 것 은 모두 유사 합 니 다.대응 하 는 class 를 찾 은 다음 수정 할 부분 을 설정 하면 됩 니 다.2.속성의 역할(About Ext.grid.GroupingView,Editor GridPanel):Extjs 의 grid 기능 이 강하 다.예 를 들 어 정렬,열 숨 기기,이동 열 등 은 모두 일부 속성 과 대응 되 므 로 원 하 는 지 원 하지 않 는 지 선택 할 수 있다.그 중 일부 속성 과 그 역할 은 다음 과 같 습 니 다.*.Editor Grid Panel:border:false,/grid 의 경계 autoHeight:true,/grid 의 높이 는 지정 한 높이 enableColumnMove:false,/grid 의 열 로 enableHd Menu:false,/열 에 있 는 header 를 이동 할 수 있 습 니까?드 롭 다운 메뉴 trackMouse Over:true,/마우스 가 줄 을 옮 겼 을 때,줄 에 하 이 라이트 stripeRows:true,/grid 가 인접 한 두 줄 의 배경 색 을 다 르 게 할 지 여부*.GroupingView:표시 할 데이터 에서 특정한 데이터 점 에 따라 그룹 을 나 누 어 그룹 으로 나 누 어 표시 합 니 다.이 데이터 포 인 트 는*.Grouping Store 의 group Field 에서 결정 합 니 다.*.GroupingView 는 이 그룹 에 표 시 된 grid 의 그룹 표시 속성 을 설정 합 니 다.예 를 들 어 forceFit:true,//grid 의 너비 에 따라 열의 폭 을 조정 할 지 여부 입 니 다.수평 scrollbar 의 enableGroupingMenu:false,/header 의 드 롭 다운 메뉴 에 group 옵션 이 있 는 지 여부(Group By This Field,Show in Groups(checkbox)show Group Name:true,//그룹 을 나 눌 데이터 점 이 열 에 있 는 header 가 group name 과 함께 hideGroupedColumn:true,/그룹 을 나 눌 데이터 점 을 표시 할 지 여부 입 니 다.이 열 은 startCollapsed:false,//처음에 grid 페이지 에 들 어 갔 을 때 group 이 합 쳐 질 지,아니면 scrollOffset 을 펼 칠 지 여부 입 니 다.-1,//수직 스크롤 바 에 남 겨 진 space(기본 값 은 19px)3.셀 에 그림 추가:Ext.grid.ColumnModel 에 그림 을 추가 하 는 열 에 대응 하여 render 로 함수 에 연결 하여 추가 합 니 다.예 를 들 어 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="Add to playlist" style="background-image:url(/imgs/icn_view.gif) !important; background-position: center 2px; background-repeat: no-repeat;cursor: pointer;"'; } } 함수 에 있 는 record.data 는 grid 의 데이터 이 고 착색 은 추가 할 그림 의 경로 와 그림 이름 입 니 다.4.표 시 된 내용 의 글자 수가 셀 이 표시 할 수 있 는 글자 수 를 초과 할 때 자동 으로 줄 을 바 꾸 는 방법(how to wrap text when the length of characters is more than the width of the column):이 셀 들 이 사용 하 는 클래스 의 css 를 설정 하면 됩 니 다.예 를 들 어.x-grid3-cell-inner{white-space:normal;overflow:visible; } 주의해 야 할 것 은:overflow 의 기본 값 은 hidden 입 니 다.white-space 를 추가 하면 원래 wrap 이면 되 지만 셀 의 높이 는 한 줄 의 높이 이기 때문에 데 이 터 는 첫 줄 을 제외 하고 보이 지 않 습 니 다.overflow 의 값 을 visible 로 바 꾼 후에 만 셀 이 줄 에 있 는 높이 는 데이터 의 줄 수 에 따라 조 정 됩 니 다.5.페이지 에 들 어 갈 때 모든 group 이 첫 번 째 group 전개(collapsed)를 제외 하고 다른 group 을 닫 습 니 다(folded):우선 속성 startCollapsed 설정 을 통 해 모든 group 을 닫 습 니 다:startCollapsed:true;그리고 store.load({callback:function(records,o,s){Toggle First Group();})호출 함수 에서 첫 번 째 group 을 펼 칩 니 다:/gridView 는 이 grid 가 사용 하 는 view 입 니 다.예 를 들 어(var gv=new Ext.grid.GroupingView({});).6.date format:데 이 터 는 9/24/2008 1)입 니 다.이러한 format 의 결 과 는 웹 Sep 24 00:00:00 UTC+0800 2008{header:dHeader,width:90,sortable:true,dateFormat:Y-m-d,/dateFormat 이'm/d/Y'라면 얻 은 결 과 는 똑 같 습 니 다 dataIndex:'date'},2).이러한 format 의 결 과 는 2008-09-24{header:dHeader,width:90,sortable:true,2)입 니 다.render:Ext.util.Format.dateRenderer('Y-m-d'),/format 는'm/d/Y',결 과 는'09/24/2008'dataIndex:'date'},Class Date 의 format 및 출력 에 대한 설명 을 찾 았 습 니 다(http://extjs.com/deploy/ext/docs/output/Date.html): **************************** Format Output Description ------ ---------- -------------------------------------------------------------- d 10 Day of the month, 2 digits with leading zeros D Wed A textual representation of a day, three letters j 10 Day of the month without leading zeros l Wednesday A full textual representation of the day of the week S th English ordinal day of month suffix, 2 chars (use with j) w 3 Numeric representation of the day of the week z 9 The julian date, or day of the year (0-365) W 01 ISO-8601 2-digit week number of year, weeks starting on Monday (00-52) F January A full textual representation of the month m 01 Numeric representation of a month, with leading zeros M Jan Month name abbreviation, three letters n 1 Numeric representation of a month, without leading zeros t 31 Number of days in the given month L 0 Whether it's a leap year (1 if it is a leap year, else 0) Y 2007 A full numeric representation of a year, 4 digits y 07 A two digit representation of a year a pm Lowercase Ante meridiem and Post meridiem A PM Uppercase Ante meridiem and Post meridiem g 3 12-hour format of an hour without leading zeros G 15 24-hour format of an hour without leading zeros h 03 12-hour format of an hour with leading zeros H 15 24-hour format of an hour with leading zeros i 05 Minutes with leading zeros s 01 Seconds, with leading zeros O -0600 Difference to Greenwich time (GMT) in hours T CST Timezone setting of the machine running the code Z -21600 Timezone offset in seconds (negative if west of UTC,positive if east)**********************************