做專案的時候,有時候會遇到多表頭的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'
] });
//建立資料來源
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); })
js**要注意的地方:
1、記得載入'ext.util.*',
2、二級表頭必須指定寬度,如果不指定的話,會提示錯誤。如圖所示,紅框裡的項,必須要指定寬度。
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中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。之前有一篇文章,講的是如何實現grid的分頁功能...
ExtJS4學習 多表頭Grid
做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。做專案的時候,有時候會遇到多表頭的grid,在extjs4中,多表頭的實現已經很簡單了,本文介紹如何實現多表頭gird的功能。之前有一篇文章,講的是如何實現grid的分頁功能...
學習Extjs4心得
其實,學習extjs4的過程中,經常的檢視api。因為一開始接觸這個,所以一開始不會檢視api,但後來玩久了,也就能夠很熟練的玩了。其實,不管事什麼開發語言還是框架,學會檢視api是我們必須要做的事 在開發過程中,最糾結的就是除錯,我用的是firefox,裡面有個firebug,是除錯js的神器,可...