ExtJS 2.0 GridPanel 기본 표 간단명료 한 튜 토리 얼

ExtJS 의 표 기능 은 정렬,캐 시,드래그,특정한 열 숨 기기,줄 번호 자동 표시,열 집합,셀 편집 등 실 용적 인 기능 을 포함한다.표 는 클래스 Ext.grid.GridPanel 에서 정의 하고 Panel 에서 계승 하 며 xtype 은 grid 입 니 다.ExtJS 에서 표 Grid 는 열 정의 정 보 를 포함 하고 표 의 데이터 저장 소 Store 를 지정 해 야 합 니 다.표 의 열 정 보 는 클래스 Ext.grid.ColumnModel 로 정의 되 고 표 의 데이터 저장 소 는 Ext.data.store 로 정의 되 며 데이터 저장 소 는 분 석 된 데이터 에 따라 JSonstore,Simple Stroe,Grouping Store 등 으로 나 뉜 다.우 리 는 먼저 표를 사용 하 는 가장 간단 한 코드 를 살 펴 보 겠 습 니 다.

 
Ext.onReady(function(){ 
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'], 
[2, 'jfox', 'huihoo','www.jb51.net'], 
[3, 'jdon', 'jdon','s.jb51.net'], 
[4, 'springside', 'springside','tools.jb51.net'] ]; 
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]}); 
var grid = new Ext.grid.GridPanel({ 
renderTo:"hello", 
title:"  Java       ", 
height:150, 
width:600, 
columns:[{header:"    ",dataIndex:"name"}, 
{header:"    ",dataIndex:"organization"}, 
{header:"  ",dataIndex:"homepage"}], 
store:store, 
autoExpandColumn:2 
}); 
}); 

위의 코드 를 실행 하면 간단 한 표를 얻 을 수 있 습 니 다.다음 그림 에서 보 듯 이위의 코드 중 첫 번 째 줄 인'var data=..'는 표 에 표시 할 데 이 터 를 정의 하 는 데 사 용 됩 니 다.이것 은[][]2 차원 배열 입 니 다.두 번 째 줄"var store=..."는 데이터 저장 소 를 만 드 는 데 사 용 됩 니 다.이것 은 GridPanel 은 설정 속성 을 사용 해 야 합 니 다.데이터 저장 소 Store 는 다양한 데이터(예 를 들 어 2 차원 배열,JSon 대상 배열,xml 텍스트)등 을 ExtJS 의 데이터 기록 집합 으로 변환 하 는 것 을 책임 집 니 다.데이터 저장 소 Store 에 대해 다음 장 에서 전문 적 으로 소개 할 것 입 니 다.세 번 째 줄"var grid=new Ext.grid.GridPanel(...)"은 표를 만 드 는 것 을 책임 집 니 다.표 에 포 함 된 열 은 columns 설정 속성 으로 설명 합 니 다.columns 는 배열 입 니 다.각 줄 의 데이터 요소 설명 표 의 열 정 보 는 열 표시 텍스트(header),열 에 대응 하 는 기록 집합 필드(dataIndex),열 정렬 가능 여부(sorable)를 포함 합 니 다.열의 렌 더 링 함수(render),너비(width),포맷 정보(format)등 은 위의 열 에서 header 와 dataIndex 만 사용 합 니 다.다음은 표 의 정렬 과 숨겨 진 열 특성 을 간단하게 살 펴 보고 위의 코드 를 간단하게 수정 합 니 다.내용 은 다음 과 같 습 니 다.

 
Ext.onReady(function(){ 
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'], 
[2, 'jfox', 'huihoo','www.jb51.net'], 
[3, 'jdon', 'jdon','s.jb51.net'], 
[4, 'springside', 'springside','tools.jb51.net'] ]; 
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]}); 
var colM=new Ext.grid.ColumnModel([{header:"    ",dataIndex:"name",sortable:true}, 
{header:"    ",dataIndex:"organization",sortable:true}, 
{header:"  ",dataIndex:"homepage"}]); 
var grid = new Ext.grid.GridPanel({ 
renderTo:"hello", 
title:"  Java       ", 
height:200, 
width:600, 
cm:colM, 
store:store, 
autoExpandColumn:2 
}); 
}); 

new Ext.grid.ColumnModel 을 직접 사용 하여 표 의 열 편지 정의 정 보 를 만 듭 니 다.'프로젝트 이름'및'개발 팀'열 에 sortable 을 true 로 하 는 속성 을 추가 하여 이 열 을 정렬 하고 위의 코드 를 실행 할 수 있 음 을 표시 합 니 다.우 리 는 그림 xxx 와 같은'프로젝트 이름'또는'개발 팀'표 에 따라 지원 을 받 을 수 있 습 니 다.(항목 이름 에 따라 정렬)(정렬 가능 한 목록 헤드 뒤의 작은 단 추 는 조작 메뉴 를 팝 업 할 수 있 습 니 다)(어떤 열 을 숨 길 지 지정 할 수 있 습 니 다)또한 각 열의 데이터 렌 더 링 방식 은 스스로 정의 할 수 있 습 니 다.예 를 들 어 위의 표 에서 저 희 는 사용자 가 표 에서 인터넷 주 소 를 클릭 하면 이러한 오픈 소스 팀 의 사 이 트 를 직접 열 기 를 바 랍 니 다.즉,인터넷 주소 라 는 열 에 슈퍼 연결 을 추가 해 야 한 다 는 것 이다.다음 코드 는 이 기능 을 실현 합 니 다.

 
function showUrl(value) 
{ 
return ""+value+""; 
} 
Ext.onReady(function(){ 
var data=[ [1, 'EasyJWeb', 'EasyJF','www.baidu.com'], 
[2, 'jfox', 'huihoo','www.jb51.net'], 
[3, 'jdon', 'jdon','s.jb51.net'], 
[4, 'springside', 'springside','tools.jb51.net'] ]; 
var store=new Ext.data.SimpleStore({data:data,fields:["id","name","organization","homepage"]}); 
var colM=new Ext.grid.ColumnModel([{header:"    ",dataIndex:"name",sortable:true}, 
{header:"    ",dataIndex:"organization",sortable:true}, 
{header:"  ",dataIndex:"homepage",renderer:showUrl}]); 
var grid = new Ext.grid.GridPanel({ 
renderTo:"hello", 
title:"  Java       ", 
height:200, 
width:600, 
cm:colM, 
store:store, 
autoExpandColumn:2 
}); 
}); 
[html] 

               ，     “  ”        renderer  ， {header:"  ",dataIndex:"homepage",renderer:showUrl}。showUrl         ，         value        <a>   html  。                ： 


                              ，          html   。 
        ，              ？      ，           data         ： 

[code] 
var data=[{id:1, 
name:'EasyJWeb', 
organization:'EasyJF', 
homepage:'www.baidu.com'}, 
{id:2, 
name:'jfox', 
organization:'huihoo', 
homepage:'www.jb51.net'}, 
{id:3, 
name:'jdon', 
organization:'jdon', 
homepage:'s.jb51.net'}, 
{id:4, 
name:'springside', 
organization: 'springside', 
homepage:'tools.jb51.net'} 
]; 

즉,데이터 가 1 차원 배열 로 바 뀌 었 고 배열 의 모든 요 소 는 하나의 대상 입 니 다.이 대상 들 은 name,organization,homepage,id 등 속성 을 포함 합 니 다.표 에 위의 데 이 터 를 표시 하려 면 매우 간단 합 니 다.store 를 Ext.data.JSonstore 로 바 꾸 면 됩 니 다.코드 는 다음 과 같 습 니 다.

 
var store=new Ext.data.JsonStore({data:data,fields:["id","name","organization","homepage"]}); 
var colM=new Ext.grid.ColumnModel([{header:"    ",dataIndex:"name",sortable:true}, 
{header:"    ",dataIndex:"organization",sortable:true}, 
{header:"  ",dataIndex:"homepage",renderer:showUrl}]); 
var grid = new Ext.grid.GridPanel({ 
renderTo:"hello", 
title:"  Java       ", 
height:200, 
width:600, 
cm:colM, 
store:store, 
autoExpandColumn:2 
}); 

위의 코드 가 얻 은 결 과 는 앞의 것 과 같 습 니 다.물론 표 역시 xml 형식의 데 이 터 를 표시 할 수 있 습 니 다.만약 에 위의 데 이 터 를 hello.xml 파일 에 저장 하면 내용 은 다음 과 같 습 니 다.

 
<?xml version="1.0" encoding="UTF-8"?><dataset> <row> <id>1</id> <name>EasyJWeb</name> <organization>EasyJF</organization> <homepage>www.baidu.com</homepage> </row> <row> <id>2</id> <name>jfox</name> <organization>huihoo</organization> <homepage>www.jb51.net</homepage> </row> <row> <id>3</id> <name>jdon</name> <organization>jdon</organization> <homepage>s.jb51.net</homepage> </row> <row> <id>4</id> <name>springside</name> <organization>springside</organization> <homepage>tools.jb51.net</homepage> </row> </dataset> 

이 xml 데 이 터 를 ExtJS 표 Grid 로 표시 하기 위해 저 희 는 store 부분의 내용 을 다음 과 같은 내용 으로 조정 하면 됩 니 다.

 

var store=new Ext.data.Store({ 
url:"hello.xml", 
reader:new Ext.data.XmlReader({ 
record:"row"}, 
["id","name","organization","homepage"]) 
}); 

다른 부분 은 변경 하지 않 아 도 됩 니 다.전체 코드 는 다음 과 같 습 니 다.

 
function showUrl(value) 
{ 
return "<a href='http://"+value+"' target='_blank'>"+value+"</a>"; 
} 
Ext.onReady(function(){ 
var store=new Ext.data.Store({ 
url:"hello.xml", 
reader:new Ext.data.XmlReader({ 
record:"row"}, 
["id","name","organization","homepage"]) 
}); 
var colM=new Ext.grid.ColumnModel([{header:"    ",dataIndex:"name",sortable:true}, 
{header:"    ",dataIndex:"organization",sortable:true}, 
{header:"  ",dataIndex:"homepage",renderer:showUrl}]); 
var grid = new Ext.grid.GridPanel({ 
renderTo:"hello", 
title:"  Java       ", 
height:200, 
width:600, 
cm:colM, 
store:store, 
autoExpandColumn:2 
}); 
store.load(); 
}); 

store.laod()는 데 이 터 를 불 러 오 는 데 사 용 됩 니 다.위의 코드 를 실행 하 는 표 는 앞의 것 과 똑 같 습 니 다.