ext grid怎么自适应宽度

ext grid怎么自适应宽度,第1张

用.x-grid3-header-offset{width:auto} 就可以实现;

参考代码如下:

/*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的问题了


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11688746.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存