将页面工具栏与网格面板一起使用
Using Paging toolbar with Grid Panel
我已经在这一点上呆了很长时间了。请帮我识别错误。
我试图在网格面板中显示数据,由于数据很大,我也在使用分页工具栏。这是我的代码(我不确定,但我认为问题出在我正在创建的商店里)。
var myData = {
record: [{
name: "Record 0",
column1: "0",
column2: "0"
}, {
name: "Record 1",
column1: "1",
column2: "1"
}, {
name: "Record 2",
column1: "2",
column2: "2"
},
]
};
var fields = [{
name: 'name',
mapping: 'name'
}, {
name: 'column1',
mapping: 'column1'
}, {
name: 'column2',
mapping: 'column2'
}
];
var store = new Ext.data.Store({
id: 'simpsonsStore',
fields: ['name', 'column1', 'column2'],
pageSize: 5, // items per page
data: myData,
reader: {
root: 'record',
type: 'json'
}
});
// Column Model shortcut array
var cols = [{
id: 'name',
header: "Record Name",
width: 50,
sortable: true,
dataIndex: 'name'
}, {
header: "column1",
width: 50,
sortable: true,
dataIndex: 'column1'
}, {
header: "column2",
width: 50,
sortable: true,
dataIndex: 'column2'
}
];
store.load({
params: {
start: 0,
limit: 5
}
});
// declare the source Grid
var grid = new Ext.grid.GridPanel({
ddGroup: 'gridDDGroup',
store: store,
columns: cols,
enableDragDrop: true,
stripeRows: true,
autoExpandColumn: 'name',
width: 650,
height: 325,
region: 'west',
title: 'Data Grid',
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}
]
});
var displayPanel = new Ext.Panel({
width: 650,
height: 300,
layout: 'column',
renderTo: Ext.getBody(),
items: [
grid
],
bbar: [
'->', {
text: 'Reset Example',
handler: function () {
gridStore.loadData(myData);
}
}
]
});
在myData.record数组中使用无关逗号将阻止此操作运行。
var myData = {
record : [
{ name : "Record 0", column1 : "0", column2 : "0" },
{ name : "Record 1", column1 : "1", column2 : "1" },
{ name : "Record 2", column1 : "2", column2 : "2" }**,**
]
};
尝试在网格bbar处设置分页栏,而不是dockedItems。新建外部绘图工具栏({页面大小:20,存储:存储,displayInfo:true});
相关文章:
- 删除CKEditor工具栏按钮,但不删除功能
- Sencha触摸:工具栏无法正常滚动
- 使用网格ID隐藏剑道网格工具栏
- 如何在IE中隐藏菜单栏,工具栏
- 将此事件添加到工具栏
- ExtJS--如何居中对齐两个工具栏按钮
- 在某些URL上显示火狐插件工具栏
- 如何将自定义图标添加到 JqGrid 顶级工具栏按钮
- 文本编辑工具栏解决方案 (js),具有低级自定义
- Ext JS工具栏和痕迹导航示例在JSFiddle中不起作用
- 如何在较新版本的 Free-JQGard 中重置搜索工具栏和搜索过滤器
- 尝试绘制从鼠标位置工具栏中选择的形状 - HTML5 CANVAS
- ExtJS 4-在调整窗口大小时,溢出的工具栏会失去控制器
- 如何在ExtJS 4.2中聚焦工具栏的按钮
- 单击Firefox工具栏按钮中的坐标
- 为什么我的 init() 函数没有运行?(安装 Firefox 扩展时自动添加工具栏按钮,但仅在首次运行时)
- 让jQuery顶部工具栏不那么跳跃
- JQGridPageing在通过过滤器工具栏应用过滤器后非常慢
- 如何在mozilla firefox扩展中更改自定义工具栏按钮的颜色
- 将页面工具栏与网格面板一起使用