ExtJS入門教程06,grid分頁的實現

2021-09-06 14:53:48 字數 1264 閱讀 2783

前面兩篇內容分別介紹了extjs grid的基本用法和extjs grid非同步載入資料,這篇文章將介紹extjs grid的分頁。

在extjs grid的請求中,包含幾個引數,如圖:

page:當前頁

start:起始行的行號

limit:每頁資料行數,預設為25

在請求處理的時候,我們只要獲得這些引數,就可以方便的將想要的分頁後的資料返回給客戶端。

接下來我們新建乙個handler,用來處理分頁請求,返回資料:

然後,修改我們的store,將預設的每頁資料行數改為2(我們的列表中只有6行資料):

var 

mystore = ext.create(

'ext.data.store'

, }

});

由於採用了分頁,我們返回的json資料的結構也發生了變化,所以reader也進行了相應的改變。

然後重新整理看我們的grid,截圖如下:

確實是有兩行資料,但是卻少了我們的分頁工具欄。

接下來我們為grid新增分頁工具欄,通常情況下,我們將工具欄顯示在grid底部,**如下:

var 

win = ext.create(

"ext.window"

, , ,

],bbar: }

});

paging*******的store配置一定要和grid的store相同。

截個圖,看看效果:

大概就是這個樣子,我們的grid已經可以進行分頁了,並且是非同步的哦

ExtJS入門教程05,grid的非同步載入資料

所謂非同步,就是通過ajax的方式將伺服器端的資料載入到我們的grid中。為了提供資料,我們先定義乙個資料類,並建立一些臨時資料。public class userentity public string name public int age public static list userenti...

ExtJS入門教程05,grid的非同步載入資料

所謂非同步,就是通過ajax的方式將伺服器端的資料載入到我們的grid中。為了提供資料,我們先定義乙個資料類,並建立一些臨時資料。public class userentity public string name public int age public static list userenti...

ansible 入門教程06 變數

變數的命名要注意,不要使用 而推薦使用 變數可以通過group來定義,也就是定義一些變數給整個組使用,例如 group vars all dbservers 對應的就是我們hosts中定義的組 當然,也可以在playbook中直接定義 當然,我們定義的主要目的還是用使用這些變數 例如,我們在例子中的...