我已经真心没分了,就这一问题我都发了多少贴了,真心不知道EXT是会的人少还是我的问题没人愿意理,都石沉大海
问题:
1.EXT的grid分页
2.本地json传入。
3.为什么所有数据全在第一页,点击下一页无任何效果。
4。代码如下,json为本地数据,我其实就是想做一个json本地传入的EXT.grid,且有分页,如果实在不行,求赏个json传入带分页的demo吧~!只要本地json
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.form.field.Number',
'Ext.form.field.Date',
'Ext.tip.QuickTipManager'
]);Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'cost', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});var data = [
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
];Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = Ext.create('Ext.data.Store', {
model: 'Task',
pageSize: 10,
autoLoad:false,
data: data,
sorters: {property: 'due', direction: 'ASC'},
groupField: 'project'
}); var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var showSummary = true;
var pagingToolbar=new Ext.PagingToolbar({
store: store,
displayInfo: true
});
var grid = Ext.create('Ext.grid.Panel', {
width: 800,
height: 450,
frame: true,
title: 'Sponsored Projects',
iconCls: 'icon-grid',
renderTo: document.body,
store: store,
plugins: [cellEditing],
bbar: pagingToolbar,
selType: 'checkboxmodel',
columns: [
new Ext.grid.RowNumberer({header:'num',width:30,locked:true}),
{
header: 'Task',
width:200,
locked:true,
sortable: true,
dataIndex: 'description',
}, {
header: 'Project',
width: 180,
sortable: true,
dataIndex: 'project'
}, {
header: 'Due Date',
width: 80,
sortable: true,
dataIndex: 'due',
summaryType: 'max',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),
field: {
xtype: 'datefield'
}
}, {
header: 'Estimate',
width: 75,
sortable: true,
dataIndex: 'estimate',
summaryType: 'sum',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return value + ' hours';
},
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' hours';
},
field: {
xtype: 'numberfield'
}
}, {
header: 'Rate',
width: 75,
sortable: true,
renderer: Ext.util.Format.usMoney,
summaryRenderer: Ext.util.Format.usMoney,
dataIndex: 'rate',
summaryType: 'average',
field: {
xtype: 'numberfield'
}
}, {
id: 'cost',
header: 'Cost',
width: 75,
sortable: false,
groupable: false,
renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
},
dataIndex: 'cost'
}]
});
});
ExtJSJSON分页
问题:
1.EXT的grid分页
2.本地json传入。
3.为什么所有数据全在第一页,点击下一页无任何效果。
4。代码如下,json为本地数据,我其实就是想做一个json本地传入的EXT.grid,且有分页,如果实在不行,求赏个json传入带分页的demo吧~!只要本地json
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.form.field.Number',
'Ext.form.field.Date',
'Ext.tip.QuickTipManager'
]);Ext.define('Task', {
extend: 'Ext.data.Model',
idProperty: 'taskId',
fields: [
{name: 'projectId', type: 'int'},
{name: 'project', type: 'string'},
{name: 'taskId', type: 'int'},
{name: 'description', type: 'string'},
{name: 'estimate', type: 'float'},
{name: 'rate', type: 'float'},
{name: 'cost', type: 'float'},
{name: 'due', type: 'date', dateFormat:'m/d/Y'}
]
});var data = [
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 112, description: 'Integrate 2.0 Forms with 2.0 Layouts', estimate: 6, rate: 150, due:'06/24/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 113, description: 'Implement AnchorLayout', estimate: 4, rate: 150, due:'06/25/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 114, description: 'Add support for multiple types of anchors', estimate: 4, rate: 150, due:'06/27/2007'},
{projectId: 100, project: 'Ext Forms: Field Anchoring', taskId: 115, description: 'Testing and debugging', estimate: 8, rate: 0, due:'06/29/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 101, description: 'Add required rendering "hooks" to GridView', estimate: 6, rate: 100, due:'07/01/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 102, description: 'Extend GridView and override rendering functions', estimate: 6, rate: 100, due:'07/03/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 103, description: 'Extend Store with grouping functionality', estimate: 4, rate: 100, due:'07/04/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 121, description: 'Default CSS Styling', estimate: 2, rate: 100, due:'07/05/2007'},
{projectId: 101, project: 'Ext Grid: Single-level Grouping', taskId: 104, description: 'Testing and debugging', estimate: 6, rate: 100, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 105, description: 'Ext Grid plugin integration', estimate: 4, rate: 125, due:'07/01/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 106, description: 'Summary creation during rendering phase', estimate: 4, rate: 125, due:'07/02/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 107, description: 'Dynamic summary updates in editor grids', estimate: 6, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 108, description: 'Remote summary integration', estimate: 4, rate: 125, due:'07/05/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 109, description: 'Summary renderers and calculators', estimate: 4, rate: 125, due:'07/06/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 110, description: 'Integrate summaries with GroupingView', estimate: 10, rate: 125, due:'07/11/2007'},
{projectId: 102, project: 'Ext Grid: Summary Rows', taskId: 111, description: 'Testing and debugging', estimate: 8, rate: 125, due:'07/15/2007'}
];Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
var store = Ext.create('Ext.data.Store', {
model: 'Task',
pageSize: 10,
autoLoad:false,
data: data,
sorters: {property: 'due', direction: 'ASC'},
groupField: 'project'
}); var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var showSummary = true;
var pagingToolbar=new Ext.PagingToolbar({
store: store,
displayInfo: true
});
var grid = Ext.create('Ext.grid.Panel', {
width: 800,
height: 450,
frame: true,
title: 'Sponsored Projects',
iconCls: 'icon-grid',
renderTo: document.body,
store: store,
plugins: [cellEditing],
bbar: pagingToolbar,
selType: 'checkboxmodel',
columns: [
new Ext.grid.RowNumberer({header:'num',width:30,locked:true}),
{
header: 'Task',
width:200,
locked:true,
sortable: true,
dataIndex: 'description',
}, {
header: 'Project',
width: 180,
sortable: true,
dataIndex: 'project'
}, {
header: 'Due Date',
width: 80,
sortable: true,
dataIndex: 'due',
summaryType: 'max',
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
summaryRenderer: Ext.util.Format.dateRenderer('m/d/Y'),
field: {
xtype: 'datefield'
}
}, {
header: 'Estimate',
width: 75,
sortable: true,
dataIndex: 'estimate',
summaryType: 'sum',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return value + ' hours';
},
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' hours';
},
field: {
xtype: 'numberfield'
}
}, {
header: 'Rate',
width: 75,
sortable: true,
renderer: Ext.util.Format.usMoney,
summaryRenderer: Ext.util.Format.usMoney,
dataIndex: 'rate',
summaryType: 'average',
field: {
xtype: 'numberfield'
}
}, {
id: 'cost',
header: 'Cost',
width: 75,
sortable: false,
groupable: false,
renderer: function(value, metaData, record, rowIdx, colIdx, store, view) {
return Ext.util.Format.usMoney(record.get('estimate') * record.get('rate'));
},
dataIndex: 'cost'
}]
});
});
ExtJSJSON分页
解决方案 »
- [算法求解]10万以内的双倍超立方数。
- jquery中多个下拉框如何获取已选值(每个下拉框的name相同)
- 一个语法问题
- 小菜鸟,为什显示加粗的行内存溢出,谢谢了各位
- javascript用createElement("TABLE")创建表格相关求助!
- jquery validate IE8 不兼容,火狐验证正常,IE没验证直接提交
- 请问 网银输入密码时 显示器屏幕变半透明黑色 是怎么做到的?
- ~~~~~~~~~~~~~~~~~~~~本世纪初的经典打印问题~~~~~~~~~~~~~~~~~~~
- 一个关于文本框获得下拉菜单的问题
- 小弟在坐tree的时候,想通过点继节点打开一个窗口的问题!!再线等待,立刻给分!!
- 新手请教一下怎么把第一项默认打开
- 大家觉得在JS方面WebStorm如何,相比dreamweaver
分页其实是你要取几条,后端返回几条,ext一股脑儿的加载这些反回的数据。
比如 你规定返回20条,那么后端就返回20条。ext会把返回的结果都显示在表格里面。
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.ux.data.PagingMemoryProxy',
'Ext.form.field.Number',
'Ext.form.field.Date',
'Ext.tip.QuickTipManager'
]);
var store = Ext.create('Ext.data.Store', {
model: 'Task',
sorters: {property: 'due', direction: 'ASC'},
groupField: 'project',
pageSize:10,
autoLoad:true,
proxy:new Ext.ux.data.PagingMemoryProxy({ data:data,reader:{type:'json'}})
});
此问题已自行解决,根据之前没人回答的情况,我总结一下,
Ext分页分2种,一种是本地数据,需要用PagingMemoryProxy才能分页
另一种是后台,但恰恰就是这种,才是大部分想要的。这个其实就相当于给sql添加查询条件,然后返回,如果后台没写,数据当然会全部一次性查出来。
我想说的是,各种教学视频和demo几乎对第二种方法一笔带过或者压根没说,直接放一个pagingToolbar了事。至于官方demo,直接引用了一个。php的返回值,但对于一直初学者来说,完全是一脑袋的浆糊,在加上如果要grid加多选框、锁列、检索,4.0直接报ext-all-debug错误,各种莫名其妙的event错误,后来才发现要引用4.2的包就完全正常了,而且4.2的包名字和4.0还不一样,望后来遇到和我一样问题的人仔细,不要被惯性思维干扰。
我花了再论坛积攒的全部积分,发了多少个帖子,其实要的就是这么个结果,结果等我看完源码,才发现问题在哪。至今才有人说到根本原因在哪,大部分都是说自行查看API,我要是自行能解决我至于跑上来问吗?还有说EXT的事件全是要自己写的。
其实我想说,我发的帖子,目的又不是要给我写代码,我只想知道问题在哪里,用错了,那么原理错在哪?就这么简单。在一个就是,csdn这里,大部分EXT的帖子中,对于我所问的问题没有1个是正面回答的。对于ext的各种莫名其妙的问题(比如checkbox和locked同时加载,有白板----4.0),有多少人,但又有多少人回答了。
最后,虽然最后问题还是自己解决掉了,但还是感谢版主一阵见血的回答。