extjs分頁事件

⑴ 如何讓Extjs4.1中的treegrid和treestore實現分頁

Extjs treeGrid分頁實例，項目中用到，拿出來跟大家分享一下，主要是通過兩個store實現。

[javascript] view plain
ProTreeGrid = Ext.extend(Ext.tree.Panel, {
_baseParam : {
process : '項目立項',
isShow : 'true',
start : 1
},
constructor : function(_config) {
if (_config == null)
_config = {};
Ext.apply(this, _config);

this.store1 = Ext.create('Ext.data.JsonStore', {
autoLoad : true,
pageSize : basicConstant.LIMIT,
proxy : {
type : 'ajax',
url : "xmgl/pro-info-manage!page.action",
extraParams : this._baseParam,
reader : {
type : 'json',
root : 'rows',
totalProperty : "totalCount"
}
},
model : 'ProInfo'
});

this.store = Ext.create('Ext.data.TreeStore', {
model : 'ProInfo',
proxy : {
type : 'ajax',
url : 'xmgl/pro-info-manage.action'
},
folderSort : true,
listeners : {
'beforeload' : {
fn : function(_s, _op, _e) {
this._baseParam.limit = basicConstant.LIMIT;
_s.proxy.extraParams = this._baseParam;
},
scope : this
}
}
});

this['selModel'] = Ext.create('Ext.selection.TreeModel', {
mode : 'SINGLE',
listeners : {
'selectionchange' : {
fn : this.selectionChangeHandler,
scope : this
}
}
});
this['columns'] = [ {
xtype : 'treecolumn',
text : '項目性質',
flex : 1,
sortable : true,
dataIndex : 'proClass'
}, {
text : '項目名稱',
flex : 2.5,
dataIndex : 'proName',
sortable : true
}, {
text : '流程狀態',
flex : .75,
dataIndex : 'process',
sortable : true
}, {
text : '項目時間',
xtype : 'datecolumn',
format : 'Y-m-d',
dataIndex : 'crTime',
sortable : true,
flex : .85
}, {
text : '項目編號',
flex : 1,
dataIndex : 'proNo',
sortable : true
}, {
text : '項目單位',
flex : 1,
dataIndex : 'unit',
sortable : true
}, {
text : '優先順序',
flex : .6,
dataIndex : 'priority',
sortable : true
}, {
text : '項目類型',
flex : .75,
dataIndex : 'proType',
sortable : true
}, {
text : '項目內容',
flex : 2,
dataIndex : 'proContent',
sortable : true
}, {
text : '附件數',
flex : .6,
dataIndex : 'fileCount',
sortable : true
} ]
ProTreeGrid.superclass.constructor.call(this, {
useArrows : true,
height : this._height,
width : this._width,
autoScroll : true,
rootVisible : false,
dockedItems : [ {
_treeGrid : this,
xtype : 'pagingtoolbar',
id : 'PROTREEGRID_PAGEBAR',
store : this.store1,
dock : 'bottom',
displayInfo : true,
listeners : {
change : function(obj, pdata, options) {
if(this._treeGrid._baseParam.start==pdata.currentPage)
return;
this._treeGrid._baseParam.start = pdata.fromRecord;
this._treeGrid._baseParam.limit = basicConstant.LIMIT;
this._treeGrid.store.load( {
params : this._treeGrid._baseParam
});
}
}
} ],
viewConfig : {
stripeRows : true,
enableTextSelection : true,
getRowClass : function(record) {
if (record.get("proClass") == '收入項目') {
return 'srcss';
} else if (record.get("proClass") == '支出項目') {
return 'zccss';
}
}
},
tbar : new Ext.toolbar.Toolbar( {
id : 'TBAR_PROTREEGRID',
items : [ new ProClassQueryCombo( {
width : 140,
labelWidth : 60
}), '-', '項目名稱：', {
xtype : 'textfield',
width : 70
}, '無分項總體項目顯示：', {
xtype : 'checkbox',
checked : true,
width : 70
}, {
text : "查詢",
icon : 'images/icons/search.gif',
handler : this.onSearch,
scope : this
}, {
text : "重置",
icon : 'images/icons/del.gif',
handler : this.onReset,
scope : this
}, {
text : "高級查詢",
icon : 'images/icons/search.gif',
handler : this.onAdvSearch,
scope : this
} ]
})
});
},
selectionChangeHandler : function() {
},
reLoadData : function() {
this.store.load( {
params : this._baseParam
});
this.store1.load( {
params : this._baseParam
});
},
onSearch : function() {
var _param = {};
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_param.process = _tbar.items.items[0].value;
_param.proClass = _tbar.items.items[2].value;
_param.proName = _tbar.items.items[5].value;
_param.isShow = _tbar.items.items[7].value;
// this.store1.load(1);
this._baseParam = _param
this.reLoadData();
},
onReset : function() {
var _tbar = Ext.getCmp('TBAR_PROTREEGRID');
_tbar.items.items[0].setValue('項目立項');
_tbar.items.items[2].setValue('');
_tbar.items.items[5].setValue('');
this._baseParam = {
process : '項目立項',
isShow : 'false'
};
},
onAdvSearch : function() {
new ProQueryWin( {
_grid : this,
_process : '項目立項'
}).show();
}

});

⑵ Extjs 分頁工具條加按鈕，然後輸入第幾頁，點擊按鈕就跳轉到第幾頁怎麼實現

給那個數據框添加偵聽事件，點擊或者回車時執行偵聽事件，執行數據載入就可以了。我的源碼：

var pagingBar = new Ext.PagingToolbar({
pageSize : Cookies.get('pageSize')
? parseInt(Cookies.get('pageSize'))
: 15,
store : myStore,
displayInfo : true,
displayMsg : '第{0} - {1}條,共{2}條',
emptyMsg : "沒有記錄",
items : ['-', '每頁', new Ext.form.Field({
hideLabel : 'true',
size : '3',
height : '18',
cls : "x-tbar-page-number",
id : 'pagefield'
}), '條記錄']
});
if (Ext.getCmp('pagefield')) {
Ext.getCmp('pagefield').on("specialkey", function(arg, e) {
var k = e.getKey();
if (k == e.RETURN) {
e.stopEvent();
pagingBar.pageSize = parseInt((arg.getValue()%1==0 && arg.getValue()>0)?arg.getValue():15);
Cookies.set('pageSize', pagingBar.pageSize);
pagingBar.doLoad(0);
arg.setValue(pagingBar.pageSize);
} else if (k == e.UP || k == e.PAGEUP || k == e.DOWN
|| k == e.PAGEDOWN) {
e.stopEvent();
var pageNum = parseInt((arg.getValue()%1==0 && arg.getValue()>0)?arg.getValue():15);
var increment = e.shiftKey ? 10 : 1;
if (k == e.DOWN || k == e.PAGEDOWN) {
increment *= -1;
}
pageNum += increment;
arg.setValue(pageNum);
}
});
Ext.getCmp('pagefield').on("focus", function() {
this.el.dom.select();
});
Ext.getCmp('pagefield').setValue(pagingBar.pageSize);
}

⑶ extjs客戶端分頁問題

這邊兄台

我看了你的代碼，這定義了一個表格

你這個表格的後台寫好了么？如果後台寫好了，這個問題很好解決，請繼續追問我

如果連後台都沒寫好，先寫好了再說吧

⑷ extjs 是怎樣分頁的

var logbar = new Ext.PagingToolbar({
pageSize : 10,//每一頁的行數
store : store,//grid的store
displayInfo : true,
displayMsg : '當前顯示從{0}至{1}， 共{2}條記錄',
emptyMsg : "當前沒有記錄"
});
查詢的時候會傳start和limit參數回去,所以需要在查詢語句裡面添加這兩個參數

⑸ extjs 分頁問題求助！在線等待

你在後台需要進行2次查詢
一次是查處一共有多少條數據，既totalProperty的值
還有一次是根據start,limit的值查詢處當前頁顯示的數據，放到root裡面
start是開始的位置，比如一頁2條，第3頁的時候 ，start是5，
limit是每頁顯示的數據量，即pageSize

⑹ ExtJs gridpanel 分頁條失效 求指點

varstore=Ext.create("Ext.data.Store",{
//重要，指定每頁顯示多少數據
pageSize:20,
proxy:{
type:"ajax",
url:"...",
reader:{
type:"json",
//重要，指定讀取的數據數組
root:"data",
//重要，需要後台傳一個總的數據量過來
totalProperty:"count"
}
}
});

初始化表格分頁欄

varpager=Ext.create("Ext.PagingToolbar",{
//重要，指定分頁所使用的store
store:store,
displayInfo:true,
displayMsg:"第{0}條至第{1}條記錄/共{2}條記錄",
emptyMsg:"暫無記錄"
})

在表格中的bbar使用分頁工具欄

bbar:pager

你對比一下自己的代碼，看看哪裡缺了東西

⑺ 求大神幫忙解決一下用Extjs 的分頁問題

用這段代碼試試。
var vstore = new Ext.data.Store({
autoDestroy: true,
id: 'cjid',
proxy: new Ext.data.HttpProxy({
url: "Moles/xs/GetCJInfo.aspx",
method: "POST"
}),
reader: new Ext.data.JsonReader({
totalProperty : 'totalCount',
root : 'data'
},["xn", "zymc", "xh", "xm", "kclb", "kch", "kcmc", "xs", "xf", "ksxz", "zpcj"])
});
vstore.load({
params: {
start: 0,
limit: 5
}
});

⑻ （高分請教）extjs與java結合後進行頁面分頁問題

想做分頁必須要與後台進行交互.給你一個我寫的程序前台頁面:
<%@ page contentType="text/html; charset=UTF-8" language="java"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-nested" prefix="nested"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<html>
<head>
<title></title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/tab.css" type="text/css"></link>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/scripts/ext/resources/css/ext-all.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/scripts/ext/ext-all.js"></script>
</head>
<script type="text/javascript">
mole_js =function() {
var ds, cm, gridHead, gridFoot, paging, grid;
var countPerPage=12; //每頁顯示幾條
var mod_mole_win,mod_id_temp;
return {
init : function(){
//設置布局
var border = new Ext.Panel({
title: '布局',
layout:'border',
items: [{
title: '北部面板',
region: 'north',
height: 100,
minSize: 75,
maxSize: 250//,
//margins: '0 5 5 5'
},{
title: '模塊列表',
region:'center'//,
// margins: '5 5 0 0'
}]
});
//顯示模塊列表
ds = new Ext.data.Store({ //定義數據集合
proxy: new Ext.data.HttpProxy({url:'sysFunction.do?method=selectMole'}), //讀取列表的方法,id是傳進來的
reader: new Ext.data.JsonReader({ //讀取方式
totalProperty: 'totalProperty', //後台返回的總記錄數,要與後台欄位對應
root: 'jsondata' //後台返回的結果
}, [
{name: 'functionId'},
{name: 'showName'},
{name: 'functionName'},
{name: 'linkUrl'}
])
});

ds.on('beforeload',beforeload);
function beforeload(myds,options){
var conditaion = {parentId:'-1',level:1,functionName:document.getElementById('functionName').value,showName:document.getElementById('showName').value,showOrder:document.getElementById('showOrder').value,linkUrl:document.getElementById('linkUrl').value,hrefTarget:document.getElementById('hrefTarget').value,showInMenu:document.getElementById('showInMenu').value};
options=options||{};
options.params = options.params||{};
options.params.conditaion = Ext.util.JSON.encode(conditaion);
return true;
}
ds.load({params:{start:0,limit:countPerPage}}); //載入數據

cm = new Ext.grid.ColumnModel([ //定義列
new Ext.grid.RowNumberer(), //行號
{header:'ID',dataIndex:'functionId',width: 40,sortable: true},
{header:'模塊名',dataIndex:'functionName',width: 120,sortable: true},
{header:'顯示名',dataIndex:'showName',width: 130,sortable: true},
{header:'URL',dataIndex:'linkUrl',width: 260,sortable: true}
]);

var pagingBar = new Ext.PagingToolbar({ //分頁按鈕
pageSize: countPerPage,
store: ds,
displayInfo: true,
displayMsg: '第 {0} 條 - 第 {1} 條 共 {2} 條',
emptyMsg: "沒有數據",

items:[
'-', {
pressed: true,
enableToggle:true,
text: '刪 除 模 塊',
cls: 'x-btn-text-icon details',
toggleHandler: confirmDelMole
}]
});

grid = new Ext.grid.GridPanel({ //開始構建列表
el: 'mole_grid', //所使用的div
ds: ds, //數據集合
cm: cm, //列定義
height: 340, //該列表的高和寬
width: 590,
bbar: pagingBar
});
grid.render(); //開始生成列表

grid.on('rowdblclick',function(grid,rowIndex,e){
var mod_id=ds.getAt(rowIndex).data['functionId'];
//var mod_id=ds.getAt(rowIndex).functionId;
mod_id_temp = mod_id;
openModPage(mod_id);
});

function openModPage(mod_id){
if(typeof(mod_id)=="undefined"||mod_id==null){
Ext.Msg.alert("提示信息","請選擇您要修改的一行");
return false;
}
document.getElementById('mod_mole').style.display="";
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
var nav = new Ext.Panel({
items:[{
id:'mod_mole_id',
width:600,
height:300,
contentEl:'mod_mole'
}]
});
if(!mod_mole_win||mod_mole_win!=null){
mod_mole_win = new Ext.Window({
width: 600,
height: 300,
closeAction:'hide',
minimizable: false,
title: '修改模塊',
items:[nav],
keys: [{ key: 27,
fn: function(){mod_mole_win.hide();} }]});
mod_mole_win.on('minimize', function(){
mod_mole_win.toggleCollapse();});
mod_mole_win.show();
}
mod_mole_win.show(this);

document.getElementById('mod_functionName').value = data.functionName;
document.getElementById('mod_showName').value = data.showName;
document.getElementById('mod_showOrder').value = data.showOrder;
document.getElementById('mod_linkUrl').value = data.linkUrl;
document.getElementById('mod_hrefTarget').value = data.hrefTarget;
document.getElementById('mod_showInMenu').value = data.showInMenu;
mod_id_temp = data.functionId;
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax請求沒能正常完成");
}
};
var url = 'sysFunction.do?method=toModMole';
var params = {data:Ext.util.JSON.encode({mod_id:mod_id,time_stamp:(new Date()).getTime()})};
var connection = new Ext.data.Connection();
connection.request({url:url,method:'POST',params:params,callback:handle});
}

function confirmDelMole()
{
var rows=grid.getSelectionModel().getSelections();
if(typeof(rows)=="undefined"||rows===null||rows==""){
Ext.Msg.alert("提示信息","請選擇要刪除的模塊");
return false;
}
var del_ids="";
for(var i=0;i<rows.length;i++)
{
del_ids=del_ids+rows[i].get("functionId")+',';
}
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
if(data.count>0){
Ext.Msg.alert("提示信息","該模塊下面還有"+data.count+"個菜單？請先刪除其子菜單後再刪除該模塊？！");
return false;
}else{
Ext.MessageBox.confirm('刪除提示', '確定刪除該模塊嗎？', delMole);
}
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax請求沒能正常完成");
}
};
var url = 'sysFunction.do?method=preDelMole';
var params = {data:Ext.util.JSON.encode({del_ids:del_ids,time_stamp:(new Date()).getTime()})};
var connection = new Ext.data.Connection();
connection.request({url:url,method:'POST',params:params,callback:handle});
}

function delMole(btn)
{
if(btn=="yes"){
var rows=grid.getSelectionModel().getSelections();
if(typeof(rows)=="undefined"||rows===null||rows==""){
Ext.Msg.alert("提示信息","請選擇要刪除的模塊");
return false;
}
var del_ids="";
for(var i=0;i<rows.length;i++)
{
del_ids=del_ids+rows[i].get("functionId")+',';
}
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
ds.reload();
Ext.Msg.alert("提示信息","刪除成功");
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax請求沒能正常完成");
}
};
var url = 'sysFunction.do?method=delMole';
var params = {data:Ext.util.JSON.encode({del_ids:del_ids,time_stamp:(new Date()).getTime()})};
var connection = new Ext.data.Connection();
connection.request({url:url,method:'POST',params:params,callback:handle});
}
}

},closeModMoleWin:function()
{
mod_mole_win.hide();
},modMole:function()
{
var functionName = document.getElementById('mod_functionName').value;
var showName = document.getElementById('mod_showName').value;
var showOrder = document.getElementById('mod_showOrder').value;
var linkUrl = document.getElementById('mod_linkUrl').value;
var hrefTarget = document.getElementById('mod_hrefTarget').value;
var showInmenu = document.getElementById('mod_showInMenu').value;
var handle = function (opts, success, response) {
if(success){
var data = eval("("+response.responseText+")");
if(data.result){
mole_js.closeModMoleWin();
ds.reload();
Ext.Msg.alert("提示信息","修改成功");
}else{
Ext.Msg.alert("提示信息",data.message);
}
}else{
Ext.Msg.alert("提示信息","ajax請求沒能正常完成");
}
};
var url = 'sysFunction.do?method=modMole';
var params = {data:Ext.util.JSON.encode({mod_id:mod_id_temp,functionName:functionName,showName:showName,showOrder:showOrder,showInmenu:showInmenu,linkUrl:linkUrl,hrefTarget:hrefTarget,time_stamp:(new Date()).getTime()})};
var connection = new Ext.data.Connection();
connection.request({url:url,method:'POST',params:params,callback:handle});
},selectMole:function()
{
ds.load({params:{start:0,limit:countPerPage}});
}
};
}();
Ext.EventManager.onDocumentReady(mole_js.init, mole_js, true);
</script>
<body>
<table>
<tr>
<td align="center">
<div id="north" align="left">
<center><h3>查詢模塊</h3></center>
<table align="center">
<tr>
<td>
模塊名(英文):
</td>
<td height="25">
<input type="text" id="functionName">
</td>
<td>
模塊顯示名:
</td>
<td height="25">
<input type="text" id="showName">
</td>
</tr>
<tr>
<td>
顯示次序:
</td>
<td height="25">
<input type="text" id="showOrder">
</td>
<td>
鏈接路徑(沒有不填):
</td>
<td height="25">
<input type="text" id="linkUrl">
</td>
</tr>
<tr>
<td>
所在窗口(沒有不填):
</td>
<td height="25">
<input type="text" id="hrefTarget">
</td>
<td>
是否在菜單中顯示:
</td>
<td height="25">
<select id="showInMenu" style="width:155px">
<option value="">所有</option>
<option value="t">顯示</option>
<option value="f">不顯示</option>
</select>
</td>
</tr>
<tr>
<td>
備注(沒有不填):
</td>
<td height="25" colspan="3">
<input type="text" id="memo" size="60">
</td>
</tr>
<tr>
<td height="25" align="center" colspan="4">
<input type="button" name="subButton" id="subButton" value="查詢" onclick="mole_js.selectMole();">
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>
<br>
<div id="center">
<div id="mole_grid">
</div>
</div>
</td>
</tr>
</table>
<div id="mod_mole" style="display:none">
<center><h3>修改模塊</h3></center>
<table align="center">
<tr>
<td>
模塊名(英文):
</td>
<td height="25">
<input type="text" id="mod_functionName" size="60">
</td>
</tr>
<tr>
<td>
模塊顯示名:
</td>
<td height="25">
<input type="text" id="mod_showName" size="60">
</td>
</tr>
<tr>
<td>
顯示次序:
</td>
<td height="25">
<input type="text" id="mod_showOrder" size="60">
</td>
</tr>
<tr>
<td>
鏈接路徑(沒有不填):
</td>
<td height="25">
<input type="text" id="mod_linkUrl" size="60">
</td>
</tr>
<tr>
<td>
所在窗口(沒有不填):
</td>
<td height="25">
<input type="text" id="mod_hrefTarget" size="60">
</td>
</tr>
<tr>
<td>
是否在菜單中顯示:
</td>
<td height="25">
<select id="mod_showInMenu" style="width:435px">
<option value="t">顯示</option>
<option value="f">不顯示</option>
</select>
</td>
</tr>
<tr>
<td>
備注(沒有不填):
</td>
<td height="25">
<input type="text" id="mod_memo" size="60">
</td>
</tr>
<tr>
<td height="25" align="center" colspan="2">
<input type="button" name="subButton" id="subButton" value="確認" onclick="mole_js.modMole();">
<input type="button" name="closeButton" value="關閉" onclick="mole_js.closeModMoleWin();">
</td>
</tr>
</table>
</div>
</body>
</html>
你參考下,把例子往下接著做,看著是有點長,不過不要緊,你先把教程的例子看完,然後你再看就知道需要提煉什麼了,我這個jsp涵蓋了很多東西,你做其他什麼的時候也許也會用到的.

⑼ ExtJs讀取後台數據進行分頁

oStore = new Ext.data.JsonStore({
url: '/backend/getdata', // 這兒就是你說的後台
root: 'data',
totalProperty: 'total', // total 裡面放記錄總數
remoteSort: true,
fields: [ // 具體有哪些欄位？
'field1',
'field2',
... ...
]
});
var selModel = new Ext.grid.CheckboxSelectionModel();
var colModel = new Ext.grid.ColumnModel([selModel, {
//表格列定義
... ...
]);

oGrid = new Ext.grid.GridPanel({
title: '標題',
iconCls:'icon_xxx', // 圖標
ds: oStore,
cm: colModel,
sm: selModel,
loadMask: {
msg: 'Loading...'
},
tbar:[{ //頭部工具條
text: '按鈕1',
iconCls: 'icon-fileup',
tooltip: '按鈕1的動作',
handler: function(btn, e){
//
}
}],
bbar: new Ext.PagingToolbar({ //底部工具條（分頁在這兒實現）
store: oStore,
pageSize: 30, //每頁顯示的記錄數
displayInfo: true,
plugins: [new Ext.ux.PageSizePlugin()], // 這是一個插件，在網上找找
emptyMsg: "沒有數據"
}),
listeners: {
render: function() {
//載入首頁數據
oStore.load({params:{start:0, limit:30}});
}
}
});

/backend/getdata 返回的數據應該是這樣
{
data: [...],
total: 100
}

⑽ Extjs4使用gridpanel後台分頁，搜索出結果之後，用分頁點擊到下一頁不會把搜索參數傳到後台，怎麼解決

在js中給store添加beforeload事件，將參數name傳向後台function(store){store.baseParams={name:namevalue}}