ExtJS是一款強(qiáng)大的JavaScript框架，其中的Grid是非常常用的組件之一。在實(shí)現(xiàn)Grid分頁(yè)功能時(shí)，我們可以使用JSON格式的數(shù)據(jù)源進(jìn)行數(shù)據(jù)加載和分頁(yè)。下面我們來(lái)看一下如何使用ExtJS Grid和JSON數(shù)據(jù)源實(shí)現(xiàn)分頁(yè)功能。

首先，我們需要配置一個(gè)Ext.data.Store對(duì)象，用于獲取遠(yuǎn)程數(shù)據(jù)。具體代碼如下：

var store = Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'age'],
pageSize: 10,
proxy: {
type: 'ajax',
url: '/api/user/get',
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
}
},
autoLoad: true
});

其中，id、name、age是數(shù)據(jù)源中的字段名稱，pageSize指定每頁(yè)顯示的記錄數(shù)，proxy是數(shù)據(jù)代理對(duì)象，負(fù)責(zé)獲取和處理數(shù)據(jù)。在proxy的配置中，我們將type指定為ajax類型，url為遠(yuǎn)程數(shù)據(jù)加載地址，reader為數(shù)據(jù)讀取器，其中rootProperty指定數(shù)據(jù)源中的數(shù)據(jù)數(shù)組名稱，第二個(gè)totalProperty是總記錄數(shù)參數(shù)的名稱。

然后，我們創(chuàng)建一個(gè)分頁(yè)工具條，并將其與Store關(guān)聯(lián)。具體代碼如下：

var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
store: store,
displayInfo: true
});

displayInfo:true表示工具條上顯示分頁(yè)信息，如當(dāng)前頁(yè)、總頁(yè)數(shù)等。

最后，我們創(chuàng)建一個(gè)Grid，并將其與Store和分頁(yè)工具條關(guān)聯(lián)起來(lái)。具體代碼如下：

var grid = Ext.create('Ext.grid.Panel', {
store: store,
dockedItems: [pagingToolbar],
columns: [{
text: 'ID',
dataIndex: 'id'
}, {
text: '姓名',
dataIndex: 'name'
}, {
text: '年齡',
dataIndex: 'age'
}],
renderTo: Ext.getBody()
});

其中，dockedItems屬性用于定義容器中的工具欄、側(cè)邊欄等元素，我們將分頁(yè)工具條放置在頂部。columns屬性用于定義表格列的名稱和數(shù)據(jù)源中的字段對(duì)應(yīng)關(guān)系。

通過(guò)以上代碼，我們就可以實(shí)現(xiàn)一個(gè)帶有分頁(yè)功能的Grid。當(dāng)我們翻頁(yè)時(shí)，ExtJS會(huì)自動(dòng)向遠(yuǎn)端服務(wù)器發(fā)起請(qǐng)求，獲取對(duì)應(yīng)的數(shù)據(jù)和總記錄數(shù)，并更新Grid的顯示內(nèi)容。