参考代码如下:
/*store之类的就省略了*/
var sm = new Ext.grid.CheckboxSelectionModel({
handleMouseDown : function(){}
})
var gridColumn = new Ext.grid.ColumnModel([
sm,
{header:'地市',dataIndex:'areaName',width:200},
{header:'品牌',dataIndex:'brandName',width:200},
{header:'指标',dataIndex:'busiTypeName',width:200},
{header:'1日',dataIndex:'day1',width:200},
{header:'2日',dataIndex:'day2',width:200},
{header:'3日',dataIndex:'day3',width:200},
{header:'4日',dataIndex:'day4',width:200},
{header:'5日',dataIndex:'day5',width:200}
])
var gridPanel = new Ext.grid.GridPanel({
id: 'gridPanelId',
cm: gridColumn,
sm: sm,
ds: gridStore,
frame: true,
autoScroll: true,
height: 550,
tbar: topToolbar,
bbar: new Ext.PagingToolbar({
id: 'pagingToolbarId',
store: gridStore,
displayInfo: true,
pageSize: 10
})
})
var linePanel = new Ext.Panel({
id: 'linePanelId',
frame: true,
contentEl: 'myChartId',
height: 550
})
var backPanel = new Ext.Panel({
id: 'backPanelId',
frame: true,
autoScroll: true,
items: [gridPanel, linePanel]
})
new Ext.Viewport({
layout: 'fit',
items: backPanel
注意:不要设置viewConfig: {forceFit: true},这个是把列宽(即ColumnModel的宽度)设置为自动宽度,不是整个GridPanel的宽度。
亲 第一个问题就是分页工具栏的Store就是Grid的Store,正确使用方式如下:1.在Grid的Store定义
var store = Ext.create('Ext.data.Store', {
model: ‘Demo’,
pageSize: itemsPerpage,
proxy:{
waitTitle : '提醒:',
waitMsg : '数据加载中...',
type : 'ajax',
url : '自定义action路径',
reader:{
type : 'json',//传回的数据类型
root: 'items',//读取数据的节点名称
totalProperty :'total'//非常重要,数据总条目数,你要在后台算出后写在JSON中传回
}
}
})
2.Grid中定义bbar
bbar: Ext.create('Ext.PagingToolbar', {
store: store,//关键在此,下面的配置项可参看API配置
displayInfo: true,
xtype :'pagingtoolbar',
beforePageText :"第"
})。
3.store的加载方式
store.load(
{
params:{
start :0,
limit :20
}
})
为了保持通过limit和pageSize的数量要一致,start会在翻页时自动累加,后台取到start和limit参与查询即可。
若是store中需要带其他参数就要添加事件
store.on('beforeload',function(){// =======翻页时 查询条件
Ext.apply(
store.proxy.extraParams, {
flag : 1//自定义的
}
)
})
以上的这些讯息完全可以解决pagingBar的问题了
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)