extjs 학습 노트(3)가장 기본 적 인 grid

jquery 는 이 방면 에서 정반 대 입 니 다.UI 는 모두 플러그 인 형식 으로 제공 되 고 필요 한 것 을 인용 할 수 있 기 때문에 매우 작고 유연 합 니 다.그러나 플러그 인 은 서로 다른 사람 이나 팀 에 의 해 제공 되 기 때문에 인터페이스 와 인 터 페 이 스 는 일치 하지 않 습 니 다.어차피 각자 의 장점 이 있 겠 지.오늘 은 extjs 중의 grid 를 배 웁 니 다.기능 이 강하 고 오른쪽 밖 에 없다 고 할 수 있 습 니 다.생각 지도 못 한 것 만 있 습 니 다.할 수 없 는 것 이 없습니다.하하,좀 과장 한 것 같 습 니 다.자,쓸데없는 소리 하지 말고 가장 간단 한 grid 부터 시작 해서 extjs 가 우리 에 게 제공 하 는 grid 가 도대체 우리 에 게 어떤 기능 을 제공 하 는 지 한 걸음 한 걸음 살 펴 보 겠 습 니 다.하나의 grid 는 줄 과 열 을 포함 합 니 다.extjs 에서 열 은 Ext.grid.ColumnModel 로 관리 합 니 다.ColumnModel 대상 을 만 드 는 방법 을 알 아 보 겠 습 니 다.

 
var cm = new Ext.grid.ColumnModel([ 
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'}, 
{header: "Price", width: 75, sortable: true, dataIndex: 'price'}, 
{header: "Change", width: 75, sortable: true, dataIndex: 'change'}, 
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'}, 
{header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange'} 
]); 

여기 서 다섯 개의 열 을 정 의 했 습 니 다.열 은 매개 변 수 를 통 해 설정 할 수 있 습 니 다.id 는 열 을 표시 하고 css 에서 이 id 를 사용 하면 모든 셀 을 설정 할 수 있 습 니 다.자동 으로 확장 할 수 있 는 열 도 이 id 에 따라 표 시 됩 니 다.header 는 열 이름 입 니 다.width 는 열의 너비 입 니 다.sortable 은 열 을 정렬 할 수 있 는 지,dataIndex 를 가리 키 는 데 사 용 됩 니 다.자주 사용 하 는 매개 변 수 는 다음 과 같 습 니 다.editable,지시 열 을 편집 할 수 있 는 지 여부 입 니 다.render,지시 열 을 어떻게 보 여 주 는 지 뒤에 자세히 소개 합 니 다.열 이 있 으 면 우 리 는 줄 을 채 울 데이터 가 필요 합 니 다.하나의 배열 을 구성 하 세 요.

 
var myData = [ 
['3m Co',71.72,0.02,0.03,'9/1 12:00am'], 
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], 
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'], 
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], 
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], 
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], 
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], 
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'], 
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'], 
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'], 
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'], 
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'], 
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'], 
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], 
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'], 
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'], 
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'], 
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'], 
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'], 
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'], 
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'], 
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'], 
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'], 
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'], 
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'], 
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'], 
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'], 
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'], 
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] 
]; 

지금 은 모든 것 이 준비 되 어 동풍 만 부족 합 니 다.열 이 정의 되 었 고 데이터 도 있 습 니 다.그 다음은 grid 로 조립 하 는 것 입 니 다.전체 코드 를 보십시오.

 
///<reference path="vswd-ext_2.0.2.js" /> 
/**//* 
*  ：   
*  ：2009-10-13 
*  ：1.0 
*/ 
Ext.onReady(function() { 
//    
var cm = new Ext.grid.ColumnModel([ 
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' }, 
{ header: "Price", width: 75, sortable: true, dataIndex: 'price' }, 
{ header: "Change", width: 75, sortable: true, dataIndex: 'change' }, 
{ header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange' }, 
{ header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange' } 
]); 
//     
var myData = [ 
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], 
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], 
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'], 
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'], 
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'], 
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'], 
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'], 
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'], 
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'], 
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'], 
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'], 
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'], 
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'], 
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'], 
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'], 
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'], 
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'], 
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'], 
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'], 
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'], 
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'], 
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'], 
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'], 
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'], 
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'], 
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'], 
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'], 
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'] 
]; 
//  grid 
var grid = new Ext.grid.GridPanel({ 
renderTo: "grid", 
store: new Ext.data.ArrayStore({ 
fields: [ 
{ name: 'company' }, 
{ name: 'price', type: 'float' }, 
{ name: 'change', type: 'float' }, 
{ name: 'pctChange', type: 'float' }, 
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' } 
], 
data:myData 
}), 
cm: cm, 
stripeRows: true, 
autoExpandColumn: 'company', 
height: 350, 
width: 600, 
title: 'Array Grid' 
}); 
}) 

extjs 에서 Ext.grid.GridPanel 은 grid 를 표시 합 니 다.이것 은 json 대상 을 매개 변수 로 설정 해 야 합 니 다.사용 하 는 설정 을 보십시오.renderTo:grid 구조 가 나 온 후에 어디에서 보 여야 하 는 지,원소 의 id,Dom 결점 또는 Element 대상 이 될 수 있 습 니 다.이 매개 변수 가 없 으 면,Ext.grid.GridPanel 의 render 방법 으로 grid 를 보 여 줘 야 합 니 다.stroe:ds 로 간략하게 쓸 수 있 고 통 일 된 인터페이스 로 grid 에 데 이 터 를 제공 할 수 있 습 니 다.우 리 는 데이터 가 여러 가지 형식 이 있 을 수 있다 는 것 을 알 고 있 습 니 다.우리 가 사용 하 는 배열 을 제외 하고 json,xml 등 도 있 습 니 다.만약 에 grid 에 게 모든 데이터 형식 을 식별 하 라 고 하면 좋 은 디자인 사상 이 아 닙 니 다.그래서 extjs 에서 전문 적 인 ext.data.store 가 데이터 의 형식 전환 을 책임 집 니 다.여기 서 우 리 는 그의 하위 클래스 인 Array Store 를 사용 합 니 다.말 그대로 배열 을 대상 으로 전환 합 니 다.우 리 는 Ext.data 네 임 스페이스 아래 의 일부 유형 을 토론 할 것 이다.그 때 는 Store 류 에 대해 깊이 있 게 이해 할 것 이다.현재 우 리 는 우리 가 사용 하 는 fields 필드 만 볼 수 있 습 니 다.이것 은 Ext.data.Field 류 의 집합 입 니 다.이 종 류 는 name 속성 이 있 습 니 다.우리 가 앞에서 ColumnModel 에서 무시 한 dataIndex 는 이 속성의 값 을 인용 하여 열 과 Field 간 의 관 계 를 말 합 니 다.type 은 형식 을 말 합 니 다.기본 값 은 문자열 형식 이 고 dateFormat 은 날짜 의 형식 을 말 합 니 다.cm:colModel 의 약자 입 니 다.여기 앞 에 구 조 된 ColumnModel 대상 을 올 리 면 됩 니 다.stripeRows:스 트 라 이 프 를 표시 할 지 여부 입 니 다.autoExpandColumn:자동 으로 확 장 된 열 입 니 다.이 열 은 grid 의 빈 공간 을 자동 으로 채 웁 니 다.height 와 width:grid 의 높이 와 너비.title:grid 의 제목.이제 효 과 를 실행 해 보 겠 습 니 다.이 grid 는 예 쁜 편 입 니 다.열 이름 에서 클릭 하면 정렬 도 할 수 있 습 니 다.열의 폭 은 자 유 롭 게 드래그 할 수 있 고 위치 도 바 꿀 수 있 습 니 다.ctrl 키 를 누 르 면 여러 줄 을 선택 할 수 있 습 니 다.열 이름 으로 마 우 스 를 이동 하면 거꾸로 서 있 는 작은 삼각형 이 나타 나 고 메뉴 가 나타 나 면 안에 열 을 정렬 할 수 있 고 열 을 숨 길 수 있 습 니 다.그러나 날짜 표시 가 만 족 스 럽 지 못 하고 백분율 이 여전히 부동 소수점 이라는 것 을 알 수 있 습 니 다.그리고 우 리 는 적자 로 손실 을 표시 하거나 현재 더욱 유행 하고 있다 는 표현 으로 마이너스 성장 을 합 니 다.만약 에 우리 grid 에서 마이너스 성장 도 적자 로 표현 할 수 있다 면 효과 가 더욱 좋 을 것 입 니 다.extjs 는 우리 에 게 우리 의 생각 을 실현 하기 위해 매우 편리 한 것 을 제공 했다:render.ColumnModel 에서 우 리 는 필요 한 열 에 render 를 추가 하여 우리 가 원 하 는 효 과 를 실현 할 수 있 습 니 다.다음은 변 경 된 Column Model:

 
//    
var cm = new Ext.grid.ColumnModel([ 
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' }, 
{ header: "Price", width: 75, sortable: true, dataIndex: 'price' }, 
{ header: "Change", width: 75, sortable: true, dataIndex: 'change', renderer: change }, 
{ header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange', renderer: pctChange }, 
{ header: "Last Updated", width: 120, sortable: true, dataIndex: 'lastChange',renderer:Ext.util.Format.dateRenderer("Y-m-d h:i") } 
]); 
// Change  renderer   
function change(val) { 
if (val > 0) { 
return '<span style="color:green;">' + val + '</span>'; 
} else if (val < 0) { 
return '<span style="color:red;">' + val + '</span>'; 
} 
return val; 
} 
// % Change  renderer   
function pctChange(val) { 
if (val > 0) { 
return '<span style="color:green;">' + val + '%</span>'; 
} else if (val < 0) { 
return '<span style="color:red;">' + val + '%</span>'; 
} 
return val; 
} 

render 는 데 이 터 를 표시 하기 전에 데 이 터 를 바 꾸 는'해석 기'방법 으로 이해 할 수 있 습 니 다.render 를 실현 하 는 세 가지 방법 이 있 습 니 다.HTML 표 시 를 되 돌려 주 는 render 함수 Ext.util.Format 류 의 속성 을 사용 합 니 다.이 속성 은 render 함 수 를 제공 합 니 다.render 함수 와 역할 도 메 인 을 포함 한 대상 을 제공 합 니 다.우리 의 예 는 앞의 두 가지 방식 을 사 용 했 습 니 다.render 함 수 는 6 개의 인 자 를 전달 하고 셀 의 모든 정 보 를 저 장 했 습 니 다.여 기 는 첫 번 째 인자 만 사 용 했 습 니 다.셀 의 값 을 저 장 했 습 니 다.다른 매개 변수의 의 미 는 도움말 문 서 를 참고 할 수 있 습 니 다.이제 프로그램 을 실행 하면 우리 가 원 하 는 효 과 를 볼 수 있 습 니 다.마이너스 성장 은 적자 로 표시 되 었 습 니 다.대비 로 플러스 성장 은 녹색 색 을 사 용 했 고 시간 도 우리 가 원 하 는 형식 으로 나 타 났 습 니 다.때때로 우 리 는 모든 줄 에 번 호 를 주 고 싶 습 니 다.이것 은 실현 하기 도 쉽 습 니 다.우 리 는 ColumnModel 의 구조 함수 에 new Ext.grid.Row Numberer()를 추가 하면 됩 니 다.

 
var cm = new Ext.grid.ColumnModel([ 
new Ext.grid.RowNumberer(), //       
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' }, 
{ header: "Price", width: 75, sortable: true, dataIndex: 'price' }, 
{ header: "Change", width: 75, sortable: true, dataIndex: 'change', renderer: change }, 
{ header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange', renderer: pctChange }, 
{ header: "Last Updated", width: 120, sortable: true, dataIndex: 'lastChange',renderer:Ext.util.Format.dateRenderer("Y-m-d h:i") } 
]); 

Ext.grid.Grid Panel 의 설정 에 두 가지 자주 사용 하 는 매개 변수 가 있 습 니 다.view Config:우 리 는 이 매개 변수 로 grid 의 인터페이스 를 설정 할 수 있 습 니 다.자세 한 내용 은 도움말 문 서 를 볼 수 있 습 니 다.selModel:sm 으로 간략하게 쓸 수 있 습 니 다.모델 을 선택 하 십시오.예 를 들 어 셀 을 선택 하 시 겠 습 니까?전체 줄 을 선택 하 시 겠 습 니까?기본 값 은 줄 을 선택 하 시 겠 습 니까?