我正在尝试以此为基础来确定禁用按钮的总数。
我第一次尝试使用ext.js，请让我知道我是否出错。
我只需要获取数据总数
这是我的代码
Ext.define('MyTeckno.view.Users', {
extend : 'Ext.grid.Panel',
initComponent : function() {
var me = this;
me.store = Ext.create('Ext.data.Store',{
callback : me,
proxy : {
type: 'ajax',
url : 'users.json',
pageSize: 25,
reader: {
type: 'json',
root: 'results.records',
totalProperty: 'totalCount',
successProperty: 'success'
}
},
fields : [
'userid', 'name', 'email', 'phone'
],
tools: [
{
xtype: 'checkbox',
itemId: 'showAllCheckbox',
boxLabel: 'Show All',
listeners: {
change: {
fn: me.onShowAllChange,
scope: me
}
}
}
],
listeners : {
beforeload : {
fn : me.onUserStoreBeforeLoad,
scope : me
}
}
});
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
];
dockedItems: [{
xtype: 'pagingtoolbar',
store: me.store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}];
me.callParent(arguments);
me.store.load();
},
onUserStoreBeforeLoad: function(store, operation, options) {
var me = this;
//If showall is checked set the totalcount if not set the default 25
// Assumption is that you are getting the totalCount as for the firstload
var isShowAll = me.down('#showAllCheckbox').getValue();
if(isShowAll) {
store.pageSize = store.totalCount;
}
else {
store.pageSize = 25;
}
},
//Change event on showall checkbox, just call the store.load() to reload the store
onShowAllChange: function() {
var me = this;
me.store.load();
}
});
假设另一个调用您的服务器以获取totalCount并将其设置为pageSize
有人可以帮我吗
答案 0 :(得分：1)
是的，store.totalCount属性具有上一个请求返回的记录总数。但是我认为这不是正确的方法。这是医生对pagingtoolbar的评价：
随着记录数量的增加，浏览器所需的时间 使它们增加。分页用于减少数据量 与客户交换。注意：如果记录/行多于 可以在可用的屏幕区域中查看，垂直滚动条将 被添加。
分页通常在服务器端处理（请参见下面的异常）。 客户端向服务器端发送服务器需要的参数 解释并用适当的数据做出响应。
Ext.toolbar.Paging是专用工具栏，已绑定到 Ext.data.Store并提供自动分页控制。该组件 通过传递用于以下目的的参数将数据块加载到存储中 分页条件。
在这种情况下，您要求服务器仅返回要显示的数量（未选中的复选框）或所有信息（选中的复选框）。
知道这一点，您是否同意用上次请求中传入的数据量来更改pageSize并没有多大意义？如果自上次请求以来发生了更改，则此金额可能已过时。
调整服务器端，在选中复选框时返回所有数据，或者按照分页（参数开始和限制）进行操作，会更有趣。
我创建了这个小提琴来举例说明：Extjs Grid Pagination。
还要查看文件Data / users.json。
这是文档关于store.pageSize property的内容：
被认为构成“页面”的记录数。这用来 使用nextPage和previousPage为内置分页供电 使用Ext.toolbar对网格进行分页时，函数会起作用。 到25。
要禁用分页，请将pageSize设置为0。
不要忘记服务器应始终返回总记录（totalCount），以便pagingtootbar可以正确装入分页。
proxy.setExtraParam将参数添加到代理。这会导致将参数发送到商店加载到任何地方。
Extjs代码：
var store = Ext.create('Ext.data.Store',{
pageSize: 10,
//pageSizeDefault avoid a hardcode below (line 49)
pageSizeDefault: 10,
proxy : {
type: 'ajax',
url : 'users.json',
reader: {
type: 'json',
rootProperty: 'root',
totalProperty: 'totalCount', //<= This should be returned from the backend
successProperty: 'success'
}
},
fields : [
'userid', 'name', 'email', 'phone'
],
listeners: {
load: function(store){
console.log('totalCount => ', store.getTotalCount());
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
title: 'Teste',
autoLoad: true,
tools: [
{
xtype: 'checkbox',
itemId: 'showAllCheckbox',
boxLabel: 'Show All',
listeners: {
change: {
fn: function(field, newValue, oldValue, eOpts) {
var store = field.up('grid').getStore();
//If showall is checked set the totalcount if not set the default 25
// Assumption is that you are getting the totalCount as for the firstload
if(newValue) {
store.setPageSize(0);
store.getProxy().setExtraParam('limit', 0);
}else {
store.setPageSize(store.pageSizeDefault);
store.getProxy().setExtraParam('limit', store.pageSizeDefault);
}
store.reload();
}
}
}
}
],
columns: [
{ text: 'Name', dataIndex: 'name', flex: 3},
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true,
items:[
{
xtype: 'button',
handler: function(){
alert('click');
}
}
]
}]
});
var wnd = Ext.create('Ext.window.Window',{
layout:'fit',
maximized: true,
title: 'Example of pagination'
}).show();
wnd.add(grid);
后端代码示例：
var data = [
{userid: "1", name: "user1", email: "user1@email.com", phone: "+55999999991"},
{userid: "2", name: "user2", email: "user2@email.com", phone: "+55999999992"},
{userid: "3", name: "user3", email: "user3@email.com", phone: "+55999999993"},
{userid: "4", name: "user4", email: "user4@email.com", phone: "+55999999994"},
{userid: "5", name: "user5", email: "user5@email.com", phone: "+55999999995"},
{userid: "6", name: "user6", email: "user6@email.com", phone: "+55999999996"},
{userid: "7", name: "user7", email: "user7@email.com", phone: "+55999999997"},
{userid: "8", name: "user8", email: "user8@email.com", phone: "+55999999998"},
{userid: "9", name: "user9", email: "user9@email.com", phone: "+55999999999"},
{userid: "10", name: "user10", email: "user10@email.com", phone: "+55999999910"},
{userid: "11", name: "user11", email: "user11@email.com", phone: "+55999999911"},
{userid: "12", name: "user12", email: "user12@email.com", phone: "+55999999912"},
{userid: "13", name: "user13", email: "user13@email.com", phone: "+55999999913"},
{userid: "14", name: "user14", email: "user14@email.com", phone: "+55999999914"},
{userid: "15", name: "user15", email: "user15@email.com", phone: "+55999999915"},
{userid: "16", name: "user16", email: "user16@email.com", phone: "+55999999916"},
{userid: "17", name: "user17", email: "user17@email.com", phone: "+55999999917"},
{userid: "18", name: "user18", email: "user18@email.com", phone: "+55999999918"},
{userid: "19", name: "user19", email: "user19@email.com", phone: "+55999999919"},
{userid: "20", name: "user20", email: "user20@email.com", phone: "+55999999920"}
];
var totalCount = data.length;
if(params.limit > 0){
data = data.slice(params.start, params.start + params.limit);
}
return {success: true, root: data, totalCount: totalCount};
最后，我想提一些我认为很重要的意见。我知道您是从Extjs开始的，所以请给予积极评价：
store.pageSize属性，但是我使用了store.getPageSize()方法，而不是直接访问该属性。 store.getTotalCount()也是如此。pagingtoolbar的目的恰恰是为了减少所携带的信息量，从而减少了时间和计算量，是否真的有必要给用户提供带来所有数据的选项（复选框Show All）？ onUserStoreBeforeLoad方法中，商店的属性根据复选框的值而改变。分析哪个组件更多地依赖于另一个组件以知道将代码放置在何处是很有趣的。在这种情况下，此复选框将更改商店的行为。此摘录可以位于复选框change方法内。在当前形式中，您仍然需要删除onUserStoreBeforeLoad方法，但是，如建议的那样，删除此组件不会影响代码。很清楚吗？
注意：英语不是我的母语，并且我还在学习。
任何问题，请发表评论。
希望这会有所帮助。