Extjs中设置表格自适应以及去除空白

最新推荐文章于 2020-04-21 08:20:00 发布

原创最新推荐文章于 2020-04-21 08:20:00 发布 · 641 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了一个用于管理检修过程中使用的各种物料的系统。该系统通过表格形式展示物料信息，包括物料号、名称、单价、使用数量及总价等关键字段，并允许用户进行编辑操作。系统采用自适应宽度设计，确保在不同屏幕尺寸下都能良好显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

{
xtype : 'grid',
title : '检修用料',
ref : 'grid',
clicksToEdit : 1,
height : 270,
columnLines:true,
viewConfig : {
forceFit : true,//自适应宽度

scrollOffset: 0//去除最右边空白

/*forceFit : false, //false表示不会自动按比例调整适应整个grid，true表示依据比例自动智能调整每列以适应grid的宽度，阻止水平滚动条的出现。dataCM(ColumnModel)中任意width的设置可覆盖此配置项。

autoFill : false //false表示按照实际设置宽度显示每列，true表示当grid创建后自动展开各列，自适应整个grid.且，还会对超出部分进行缩

减，让每一列的尺寸适应grid的宽度大小，阻止水平滚动条的出现。*/

},
store : new Ext.data.JsonStore({
fields : ['sbjxid', 'tid', 'wlh', 'wlmc', 'dj', 'sysl', 'jg','spdj','spsl','spjg','bz']
}),
columns : [{
header : '物料号',
dataIndex : 'wlh',
sortable : true,
width : 80
},{
header : '名称',
dataIndex : 'wlmc',
sortable : true
},{
header : '单价',
dataIndex : 'dj',
sortable : true,
width : 80
},{
header : '使用数量',
dataIndex : 'sysl',
sortable : true,
width : 80
},{
header : '总价',
dataIndex : 'jg',
sortable : true,
width : 80
}]
}