我有一个具有排序功能的Extjs 4网格。我想在每次用户按下排序按钮后调用一个custum函数。
在我的自定义函数中，我想导航到我的网格的第一页（我的网格使用分页，它利用服务器端排序）我想我必须在我的自定义函数中使用store.loadPage(1)（纠正我如果我错的话）
我应该把自定义功能放在哪里？
这是我的Ext.OnReady()功能：
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var url = {
local: 'grid-filter.json', // static data file
remote: 'grid-filter.php'
};
var paging = true;
var encode = false;
var local = false;
Ext.define('UserDirectoryDataModel', {
extend : 'Ext.data.Model',
fields : [ 'uname', 'fname', 'lname', 'postcode', 'mail', {
name : 'pass'
}, 'hasAccess', 'isActive', 'lastVisit' , 'deleteUser'],
idProperty : 'uname'
});
var itemsPerPage = 20;
var store = Ext.create('Ext.data.Store', {
pageSize : itemsPerPage,
autoLoad: false,
local: false,
autoDestroy: true,
model : 'UserDirectoryDataModel',
autoSync : true,
sortOnLoad : true,
remoteSort:true,
sorters : {
property : 'uname',
direction : 'ASC'
},
listeners: {
beforeload: function(){
store.loadPage(1);
}
},
proxy : {
type : 'ajax',
url: (local ? url.local : url.remote),
api : {
read : 'read.php',
update : 'update.php'
},
reader : {
type : 'json',
root : 'users',
successProperty : 'success',
totalProperty : 'totalCount'
},
writer : {
type : 'json',
writeAllFields : true,
encode : false,
root : 'users'
},
afterRequest : function(request, success) {
if (request.action == 'update') {
if (success) {
Ext.MessageBox.alert('alert',
'data updated!');
}
}
}
}
});
store.load({
params:{
start:0,
limit: itemsPerPage
}
});
var filters = {
ftype: 'filters',
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
filters: [
{
}
]
};
var createColumns = function (finish, start) {
var columns = [ {
text : "username",
dataIndex : 'uname',
width : 150,
filterable: true,
align : 'right'
}, {
text : "name",
dataIndex : 'fname',
width : 150,
align : 'right',
hidden : false,
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "last name",
dataIndex : 'lname',
width : 150,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "PostalCode",
dataIndex : 'postcode',
width : 110,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "email",
dataIndex : 'mail',
width : 200,
align : 'right',
sortable : true,
filterable: true,
editor : {
xtype : 'textfield',
allowBlank : false
}
}, {
text : "password",
width : 150,
align : 'right',
sortable : false,
filterable: true,
hidden : true,
dataIndex : 'pass',
editor : {
xtype : 'textfield',
inputType : 'password',
allowBlank : true
}
}, {
text : "access to system",
dataIndex : 'hasAccess',
renderer:function(value){
if(value[0]=="1"){
return "<a href=\"?action=access&type=revoke&cn="+value.substring(1,value.length)+"\">has</a>";
}else{
return "<a href=\"?action=access&type=grant&cn="+value.substring(1,value.length)+"\">doens't have</a>";
}
},
width : 100,
align : 'center',
sortable : false,
filterable: false
}, {
text : "active",
dataIndex : 'isActive',
renderer:function(value){
if(value==null)
return;
if(value[0]=="1"){
return "<a href=\"?action=activation&type=grant&cn="+value.substring(1,value.length)+"\">no</a>";
}else if(value[0]=="0"){
return "<a href=\"?action=activation&type=revoke&cn="+value.substring(1,value.length)+"\">yes</a>";
}else if(value[0]=="2"){
return "Not in portal!";
}
},
width : 100,
align : 'center',
sortable : false,
filterable: false
}, {
text : "last visit",
dataIndex : 'lastVisit',
width : 120,
hidden : true,
align : 'right',
sortable : true,
filterable: true
}, {
text : " ",
dataIndex : 'uname',
renderer:function(value){
return "<a href=\"?action=delete&type=deleteUser&cn="+value+"\">delete</a>";
},
width : 120,
hidden : true,
align : 'right'
} ];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
border: false,
width : 1200,
height : 620,
title : '',
store: store,
disableSelection : false,
seltype : 'rowmodel',
loadMask : true,
viewConfig : {
id : 'gv',
trackOver : false,
stripeRows : false,
plugins : [ {
ptype : 'preview',
bodyField : 'excerpt',
expanded : true,
pluginId : 'preview'
} ]
},
columns: createColumns(),
features: [filters],
dockedItems: [Ext.create('Ext.toolbar.Paging', {
dock: 'bottom',
store: store
})],
plugins : [ Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit : 2
}) ],
renderTo : 'userdatagrid'
});
grid.child('pagingtoolbar').add([
{
text: 'show filters',
handler: function () {
var data = Ext.encode(grid.filters.getFilterData());
Ext.Msg.alert('show filters',data);
}
},{
text: 'delete filters',
handler: function () {
grid.filters.clearFilters();
}
}
]);
store.loadPage(1);
});
答案 0 :(得分：3)
或者你可以使用它：
grid.on('sortchange', function() {
grid.getStore().loadPage(1);
});
答案 1 :(得分：0)
忘掉我写的一切： Server Side sorting in an ExtJS GridPanel
您应该将自定义函数放在网格事件中：sortchange。
我只是重新阅读你的问题 - 我认为你有无限的传呼 如果您的排序是在服务器端完成的，那么是的，您需要调用loadPage（1） 您还需要发送排序参数。
listeners: {
sortchange: function(){
var grid = Ext.ComponentQuery.query('my-grid-alias')[0];
grid.getStore().loadPage(1);
}
}
我希望这会有所帮助。
答案 2 :(得分：0)
我只是在sortchange事件中放了一个loadPage（1），但它发出了两次服务器请求（网格自动生成第一个带有排序参数的服务器），怎么可能只有一次呢？
答案 3 :(得分：0)
我找到了一个解决方案，我在商店设置"remoteSort:false"并
"sortchange: {fn:function(){
var time = (new Date()).getTime()/1000;
// after {remoteSort:false} is set, sortchange event will be fired twice when column header is clicked, so I had to set a parameter for time record
if('undefined' == typeof(this.last_sort_time) || this.last_sort_time+1 < time){
this.getStore().loadPage(1);
this.last_sort_time = time;
}
}, scope:this}"
在网格中。 但它不能正常工作，因为接收的数据在显示之前由网格重新排序
最后，我用这种方式解决了问题：
Ext.override(Ext.grid.column.Column, {
doSort:function(){
var ds = this.up('tablepanel').store;
ds.currentPage = 1;
this.callParent(arguments);
}
});
到目前为止它完美无缺
答案 4 :(得分：0)
sortchange事件触发。解决方案请看这里 http://www.sencha.com/forum/showthread.php?145779-Reset-page-for-paginator-on-sort-change