extjs 연구 노트 4 페이징이 포함된 Grid_extjs

따라서 이제 거의 모든 그리드 컨트롤이 페이징 기능을 지원합니다. extjs도 예외는 아니며 페이징에 대한 강력하고 편리한 지원을 제공하므로 페이징을 쉽게 처리할 수 있습니다.
extjs에서 Ext.PagingToolbar 클래스는 페이징 작업을 캡슐화합니다. 이 클래스는 이름만 보아도 페이징을 처리할 수 있는 툴바임을 짐작할 수 있습니다. 좋아요, 그러한 도구 모음을 구성하는 방법을 살펴보겠습니다. PagingToolbar 클래스의 생성자는 구성을 위해 json 객체가 필요합니다. js에서는 필요한 매개변수를 제공하기 위해 json 객체를 사용하는 것이 매우 편리합니다. 매개변수의 순서. 페이징 도구 모음에서 일반적으로 사용되는 구성 매개변수는 다음과 같습니다.
pageSize: 각 페이지에 표시되는 레코드 수, 기본값은 20입니다.
store: 그리드의 store 매개변수와 동일합니다. 페이징도 데이터를 처리해야 하므로 이 매개변수가 필요합니다.
displayMsg: "{0}-{1}, 총 {2}개 항목"과 같은 페이징 상태 정보가 표시됩니다. 각각 현재 페이지를 나타내는 0, 1, 2가 중괄호로 묶여 있어야 합니다. 시작, 끝, 총 레코드 수. 다른 단어는 원하는 대로 작성할 수 있습니다. 원활하게 읽으면 페이징 도구 모음 오른쪽에 정보가 표시됩니다.
displayInfo: displayMsg를 표시할지 여부, 기본값은 표시하지 않는 것입니다.
emptyMsg: 기록이 없을 때 표시되는 텍스트입니다.
item: 툴바에 표시되는 항목 구성 후 어떤 항목을 사용할 수 있는지 살펴보겠습니다.
이제 페이징 도구 모음을 구성할 수 있지만 매개변수에 Store 클래스 개체가 필요하므로 먼저 구성합니다.

코드 복사 코드는 다음과 같습니다.

var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: ' totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{ name: 'replycount' , 유형: 'int' },
{ 이름: 'lastpost', 매핑: 'lastpost', 유형: 'date', dateFormat: 'timestamp' },
'lastposter', 'excerpt'
],
// 크로스 도메인이므로 동일한 도메인에서 ScriptTagProxy와 HttpProxy를 사용하세요.
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/ forum/topics-browse-remote.php'
})
});

이번에는 이름에서 알 수 있듯이 JsonStore 클래스를 사용하여 필수 Store 객체를 생성합니다. 이는 json 형식의 데이터를 변환하는 데 사용됩니다. 또한, 외부 서버에서 데이터를 가져오기 때문에 배열에서 데이터를 가져오는 것보다 코드가 더 복잡합니다. 사용된 매개변수의 의미를 살펴보겠습니다.
root: 데이터 행의 속성 이름을 포함합니다. 수집.
totalProperty: 데이터 세트의 총 레코드 수를 나타내는 속성 이름입니다. 페이징할 때만 필요합니다.
idProperty: 데이터 행에서 식별자로 사용되는 속성의 이름입니다.
remoteSort: 정렬 시 프록시를 통해 새 데이터를 가져올지 여부, 기본값은 false입니다.
필드: 이전 시리즈에서 언급했습니다. 여기에는 데이터의 이름을 캡슐화된 레코드 필드의 이름에 매핑하는 추가 매핑이 있습니다. 이름이 동일하면 무시할 수 있습니다.
프록시: 데이터 소스. 여기서는 데이터가 URL에 지정된 주소에서 가져온다는 점만 알면 되며, 이 주소는 크로스 도메인이므로 ScriptTagProxy가 사용됩니다.
서버에서 반환되는 데이터의 형식은 다음과 같아야 합니다.

코드 복사 코드는 다음과 같습니다. 다음:

{
"totalCount":10000, //totalProperty 속성에 해당하는 값
"topics":[ //루트 하우스 유형에 해당하는 값
//여기에는 json 객체의 컬렉션이 있습니다. 각 객체의 속성은
// 필드의 name 속성 값과 일치해야 합니다.
// 반환된 데이터를 관찰하면 더 명확하게 알 수 있습니다.
]
}

다음 단계는 페이징 도구 모음을 구성하는 것입니다.

복사 코드 코드는 다음과 같습니다.

var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: '{2} 중 {0} - {1} 주제 표시 중',
emptyMsg: "기사 없음",
항목: [
'-', {
눌림: true,
enableToggle: true,
text: '미리보기 표시',
cls: 'x-btn-text-icon 세부정보',
toggleHandler: function(btn, 누름) {
var view = Grid.getView();
view.showPreview = 누름;
view.refresh()
}]
}); >

items는 도구 모음에 있는 항목의 모음이며 기본 유형은 버튼입니다. 여기서는 두 개의 항목만 사용합니다. "-"는 구분 기호를 나타내고 두 번째 항목은 버튼입니다. 각 속성이 무엇을 나타내는지 살펴보겠습니다.
pressed: 처음에 버튼을 눌렀는지 여부를 나타냅니다. 활성화토글은 참입니다.
enableToggle: 버튼을 누를 수 있는지 여부를 나타냅니다.
text: 버튼에 표시되는 텍스트입니다.
cls: 버튼의 CSS 클래스입니다.
toggleHander: 활성화Toggle이 true로 설정된 경우 버튼을 클릭할 때의 이벤트 핸들러 함수입니다.
페이징 도구 모음과 그리드를 결합할 차례입니다. 이번에는 그리드가 ColumnModel을 사용하지 않지만 동시에 viewConfig를 사용하여 전체 코드를 살펴보겠습니다. 🎜>

코드 복사 코드는 다음과 같습니다.

///
/**//*
*작성자: Daben
*날짜: 2009-10-13
*버전: 1.0
*블로그 주소: http://yage.cnblogs.com
*/
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';
Ext.onReady( function() {
//Construct store
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid ',
remoteSort: true,
필드: [
'title', 'forumtitle', 'forumid', 'author',
{ name: 'replycount', type: 'int' } ,
{ 이름: 'lastpost', 매핑: 'lastpost', 유형: 'date', dateFormat: 'timestamp' },
'lastposter', 'excerpt'
],
// 교차 도메인으로 인해 동일한 도메인
proxy: new Ext.data.ScriptTagProxy({
url: 'http://extjs.com/forum/topics-browse-remote. php'
})
});
store.setDefaultSort("lastpost", "DESC"); //기본 정렬 열 및 방향 설정
//페이징 기능을 사용하여 툴바 구성
var pagingToolbar = new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: '항목 {0}-{1}, 총 {2 }items',
emptyMsg: "표시할 주제 없음",
items: [
'-', {
pressed: true,
enableToggle: true,
text: ' 미리보기',
cls: 'x-btn-text-icon 세부정보',
toggleHandler: function(btn,pressed) {
var view = Grid.getView()
view.showPreview = pressed;
view.refresh();
}
}]
})
//페이징 도구 모음을 사용하여 그리드 구성
vargrid = new Ext.grid. ({
renderTo:"grid",
width: 700,
height: 500,
title: 'grid with paging function',
store: store,
trackMouseOver : false ,
disableSelection: true,
loadMask: true,
// 그리드 열
columns: [{
id: 'topic',
header: "topic",
dataIndex: 'title',
width: 420,
renderer: renderTopic,
sortable: true
}, {
header: "Author",
dataIndex: 'author',
너비: 100,
숨김: true,
정렬 가능: true
}, {
header: "replycount",
dataIndex: 'replycount',
width: 70 ,
align: 'right',
sortable: true
}, {
id: 'last',
header: "Last reply",
dataIndex: 'lastpost',
width: 150,
renderer: renderLast,
sortable: true
}],
// 사용자 정의된 사용자 인터페이스
viewConfig: {
forceFit: true ,
활성화RowBody: true,
showPreview: true,
getRowClass: function(record, rowIndex, p, store) {
if (this.showPreview) {
p.body = '< ;p>' Record.data.excerpt '

';
return 'x-grid3-row-expanded';
}
return 'x-grid3-row-collapsed'; 🎜>},
//상단 페이징 도구 모음
//tbar: pagingToolbar,
//하단 페이징 도구 모음
bbar: pagingToolbar
})
// 데이터 로드
store.load({ params: { start: 0,limit: 25} })
// 토픽 열의 렌더러 함수
function renderTopic(value, p, Record) {
return String.format(
'{0}{1} 포럼',
value,record.data.forumtitle,record.id,record.data.forumid);
}
//마지막 응답 열의 렌더러 함수
function renderLast(value, p , r) {
return String.format('{0}
by {1}', value.dateFormat('M j, Y, g:i a'), r.data[' lastposter']) ;
}
})


실행해 보면 그림과 같이 데이터를 가져올 때 페이지가 애니메이션으로 덮이는 것을 볼 수 있습니다.

데이터가 로드되면 데이터는 그리드에 페이지가 매겨지고 마지막 게시된 열을 기준으로 내림차순으로 정렬되며 작성자 열은 숨겨집니다.

정렬할 열 이름을 클릭하면 서버에서 새 데이터가 다시 로드됩니다. . 오른쪽 화살표를 클릭하여 페이지를 넘기고 "미리보기" 버튼을 클릭하여 효과를 확인하세요. 이번 코드는 가장 단순한 그리드보다 훨씬 더 많지만 효과도 훨씬 더 멋집니다. 코드를 처음부터 정리해보자:
8행은 그림 자리 표시자를 사용하며, 그것이 가리키는 그림은 빈 그림이다. extjs 라이브러리 파일에서 이 그림 자리 표시자는 필요에 따라 다른 그림으로 대체됩니다. 이 예에서 이 줄이 제거되면 제목 표시줄의 "마지막 응답"이 아래의 작은 화살표가 사라집니다. 이 글을 쓰는 습관을 들이도록 합시다.
11-28행은 Store 클래스의 객체를 구성합니다.
30행에서는 lastpost 열을 기본 정렬 열로 설정하고 "DESC"는 대문자여야 하며 오름차순은 "ASC"로 정렬합니다.
33-51행은 이전에 언급한 페이징 기능을 갖춘 도구 모음을 구성합니다.
54-112행은 페이징 기능이 있는 그리드를 구성합니다.
                                                                                                                                   마우스를 행 위로 가져갈 때 해당 행이 강조 표시되지 않도록 지시합니다.
61행은 사용자가 그리드를 선택할 수 없음을 나타냅니다.
62행에서는 데이터를 로드할 때 페이지를 덮도록 지시합니다. 스크린샷에서 효과를 볼 수 있지만, 효과를 보려면 직접 실행하는 것이 좋습니다. 데이터를 로드하면 마스킹 효과가 사라집니다.
94-105행은 사용자 인터페이스를 설정합니다. 각 매개변수의 의미를 살펴보겠습니다.
forceFit: 가로 스크롤 막대가 나타나지 않도록 열 너비를 강제로 조정할지 여부입니다. 거짓.
활성화RowBody: true인 경우 각 행에 tr 요소를 추가하여 데이터 행을 확장할 수 있습니다.
showPreview: 코드에 미리보기를 표시할지 여부를 제어하는 ​​데 사용되는 사용자 정의 부울 유형 속성입니다. 매개변수는 매개변수의 body 속성을 통해 행 데이터를 확장하는 데 사용할 수 있습니다. 이 메소드는 CSS 클래스 이름을 반환해야 합니다. 이 예에서는 기사의 요약 정보가 showPreview 값에 따라 동적으로 표시됩니다.
111번 라인은 그리드 하단에 페이징 툴바를 표시합니다. 상단에 표시하려면 bbar 대신 tbar를 사용하면 됩니다.
라인 115는 데이터를 얻기 위해 서버에 요청을 보냅니다. extjs는 포스트 모드에서 params의 매개변수를 서버에 보냅니다. 여기서 start는 시작할 데이터 조각 수를 나타내고,limit는 표시되는 데이터 양을 나타냅니다. 각 페이지.
118~126은 두 개의 렌더러 기능으로, 사용법은 이전 시리즈에서 설명했습니다.
마지막으로 짚고 넘어가야 할 점은 페이징 기능이 실제로 서버 측에서 완료된다는 점입니다. 클라이언트에서 페이지를 넘기면 115번 라인처럼 매개변수가 제출됩니다. 서버 측에서 전달된 별표 및 제한 값을 기반으로 반환해야 하는 데이터를 계산하여 올바른 형식으로 클라이언트에 보내야 합니다. . 서버가 클라이언트가 전달한 매개변수를 얻는 방법과 클라이언트에 데이터를 보내는 방법은 이 시리즈의 첫 번째 섹션을 참조하세요.