ExtJS4學習筆記 五 Grid分頁

2021-06-16 06:50:22 字數 2034 閱讀 9706

grid元件,當資料量很大的時候,就需要分頁顯示,本文介紹如何實現extjs4 grid的分頁功能。

先看thml**:

"-//w3c//dtd xhtml 1.0 transitional//en"

"">

"">

"demo">

這裡引用的js檔案,都是相對於extjs4整個目錄的。如果已經將js和css檔案剝離並分目錄放置了,那麼一定要注意修改bootstrap.js。

js**:

ext.require([

'ext.grid.*',

'ext.*******.paging',

'ext.data.*'

]);

ext.onready(function(),

'addtime'

] });

//建立資料來源

var store = ext.create('ext.data.store', ,

******sortmode: true

}, sorters: 

});

//建立grid

var grid = ext.create('ext.grid.panel',,

, ,

], height:400,

width:520,

x:20,

y:40,

title: 'extjs4 grid 分頁示例',

disableselection: true,

loadmask: true,

renderto: 'demo',

viewconfig: ,

bbar: ext.create('ext.paging*******',  -  條,共計  條',

emptymsg: "沒有資料"

}) })

store.loadpage(1); })

關於資料,任何服務端都可以,只要返回相應的資料就可以了。這裡簡單使用asp**做了一些測試用的資料,但是這些測試**包含了引數接收、基本判斷以及分頁方法。具體情況具體實施,這些**只作為拋磚引玉的作用。

asp**:

response.contenttype = "text/html"

response.charset = "utf-8"

%>

'返回json資料,自定義一些測試資料。。

'這裡的引數與ext3.x相同,區別在於排序欄位和排序方式使用了新的屬性。

'由於這裡是測試資料,接收的引數只用到了start,limit。sorts和dir在實際操作過程中,將之加入sql的order by裡即可。

start = request("start")

limit = request("limit")

if start = ""

then

start = 0

endif

if limit = ""

then

limit = 50

endif

sorts = replace(trim(request.form("sort")),"'","") 

dir = replace(trim(request.form("dir")),"'","")

dim counts:counts=300

'注意,這裡的counts相當於rs.recordcount,也就是記錄總數。

dim ls:ls = cint(start) + cint(limit)

if ls >= counts then

ls = counts

endif

echo("")

if ithen

echo(",")

endif

next

echo("]}")

function echo(str)

response.write(str)

endfunction

%>

最後,來張效果圖:

ExtJS4學習筆記 八 Grid分頁

grid元件,當資料量很大的時候,就需要分頁顯示,本文介紹如何實現extjs4 grid的分頁功能。先看thml w3c demo 這裡引用的js檔案,都是相對於extjs4整個目錄的。如果已經將js和css檔案剝離並分目錄放置了,那麼一定要注意修改bootstrap.js。js ext.requi...

ExtJS4學習 多表頭Grid

做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。之前有一篇文章,講的是如何實現grid的分頁功能...

ExtJS4學習 多表頭Grid

做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。之前有一篇文章,講的是如何實現grid的分頁功能...