ExtJS4學習 多表頭Grid

2021-06-22 10:32:42 字數 2318 閱讀 7018

做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。

做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。

之前有一篇文章,講的是如何實現grid的分頁功能(位址是:www.mhzg.net/a/20115/201151811170246.html),本文在此基礎上做出修改,達到多表頭grid+分頁功能。

先看下效果圖:

實現**如下:

html**:

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

"">

"">

"demo"

>

group-header.js:

ext.require([

'ext.grid.*'

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

,'ext.util.*'

,'ext.data.*'

]);ext.onready(

function

(),'addtime'

]});

//建立資料來源

varstore = ext.create(

'ext.data.store'

, ,******sortmode: 

true

},sorters: 

});//建立grid

vargrid = 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);})

js**要注意的地方:

1、記得載入'ext.util.*',

2、二級表頭必須指定寬度,如果不指定的話,會提示錯誤。如圖所示,紅框裡的項,必須要指定寬度。

服務端**,這裡使用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

iflimit = 

""then

limit = 50

endif

sorts = replace(trim(request.form(

"sort"

)),"'",""

) dir = replace(trim(request.form(

"dir"

)),"'",""

)dim

counts:counts=300

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

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

ifls >= counts 

then

ls = counts

endif

echo("")

ifithen

echo(

",")

endif

next

echo(

"]}"

)function

echo(str)

response.write(str)

endfunction

%>

ExtJS4學習 多表頭Grid

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

ExtJS4學習筆記 九 多表頭Grid

做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。之前有一篇文章,講的是如何實現grid的分頁功能 位址是 www.mhzg.net a 20115 201151811170246.html 本文在此基礎上做出修改,達到多表...

ExtJS4學習筆記 五 Grid分頁

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