【转】ExtJS中的grid没有滚动条问题(grid作为form的一个item)

两种解决方法：

1、grid有自己的scrollBar

思路：首先设置grid的width为grid.getColumnModel().getTotalWidth(false)，然后对包含grid的item设置{ columnWidth : .99, autoScroll : true, items : [grid] } ，同时还可以对grid的columnModel加个listener以动态调整grid的width，废话少说，上代码：

Ext.onReady(function() {

var grid_store_kcxx = new Ext.data.JsonStore({
url : baseServletUrl + '?action=getkcxx',
remoteSort : true
});

var grid_cm_kcxx = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({header:'序号',width:30}),{
id : 'ckbm',
header : "仓库编码",
width : 130,
sortable : true,
dataIndex : 'ckbm'
}, {
id : 'ckmc',
header : "仓库名称",
width : 75,
sortable : true,
dataIndex : 'ckmc'
}, {
hidden : true,
id : 'wzbm',
header : "物资编码",
width : 130,
sortable : true,
dataIndex : 'wzbm'
}, {
id : 'wzmc',
header : "物资名称",
sortable : true,
dataIndex : 'wzmc',
width : 130
}, {
id : 'ggxh',
header : "规格型号",
width : 160,
sortable : true,
dataIndex : 'ggxh'
}, {
id : 'jldw',
header : "单位",
width : 75,
sortable : true,
dataIndex : 'jldw'
}, {
id : 'dj',
header : "单价",
width : 75,
sortable : true,
renderer : chnYuan,
dataIndex : 'dj'
}, {
id : 'kcl',
header : "库存量",
width : 75,
sortable : true,
dataIndex : 'kcl'
}, {
id : 'ssdwzkc',
header : "所属单位总库存",
width : 75,
sortable : true,
dataIndex : 'ssdwzkc'
}, {
id : 'kczk',
header : "单位库存状况",
width : 120,
sortable : true,
}, {
id : 'zz',
header : "总值",
width : 75,
dataIndex : 'zz',
sortable : true
}]);

grid_cm_kcxx.on("hiddenchange",function(thiz,colIndex,hidden){grid_kcxx.setWidth(thiz.getTotalWidth(false))})

var grid_kcxx = new Ext.grid.EditorGridPanel({
store : grid_store_kcxx,
cm : grid_cm_kcxx,
stripeRows : true,
buttonAlign : 'center',
frame : true,
autoHeight : true,
width : grid_cm_kcxx.getTotalWidth(false), //boolean参数指定是否包括隐藏列的宽度
trackMouseOver : true,
});

var ddlb_store_ck = new Ext.data.JsonStore({
fields : defaultComboStoreFields
});

var top = new Ext.FormPanel({
labelAlign : 'left',
buttonAlign : 'center',
labelWidth : 80,
frame : true,
title : '库存查询',
autoScroll : true,
width : '100%', //指定此项,宽度将为其容器的宽度,即viewport的一个item的宽度
layout : 'column',
items : [{},{},...,{
columnWidth : .99,
autoScroll : true, //加上autoScroll=true,并设置grid的width才有滚动条
items : [grid_kcxx]
}]
});

2、grid和form公用一个scrollBar

思路：将form的width设为grid.getColumnModel().getTotalWidth(false)，并将form的autoScroll设为true（注意还必须设置form的layout，不然会没有滚动条）。同时还可以为grid的columnModel加个listener，以动态设置form的width

代码：

Ext.onReady(function() {

var grid_store_kcxx = new Ext.data.JsonStore({
url : baseServletUrl + '?action=getkcxx',
remoteSort : true
});

var grid_cm_kcxx = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer({header:'序号',width:30}),{
id : 'ckbm',
header : "仓库编码",
width : 130,
sortable : true,
dataIndex : 'ckbm'
}, {
id : 'ckmc',
header : "仓库名称",
width : 75,
sortable : true,
dataIndex : 'ckmc'
}, {
hidden : true,
id : 'wzbm',
header : "物资编码",
width : 130,
sortable : true,
dataIndex : 'wzbm'
}, {
id : 'wzmc',
header : "物资名称",
sortable : true,
dataIndex : 'wzmc',
width : 130
}, {
id : 'ggxh',
header : "规格型号",
width : 160,
sortable : true,
dataIndex : 'ggxh'
}, {
id : 'jldw',
header : "单位",
width : 75,
sortable : true,
dataIndex : 'jldw'
}, {
id : 'dj',
header : "单价",
width : 75,
sortable : true,
renderer : chnYuan,
dataIndex : 'dj'
}, {
id : 'kcl',
header : "库存量",
width : 75,
sortable : true,
dataIndex : 'kcl'
}, {
id : 'ssdwzkc',
header : "所属单位总库存",
width : 75,
sortable : true,
dataIndex : 'ssdwzkc'
}, {
id : 'kczk',
header : "单位库存状况",
width : 120,
sortable : true,
}, {
id : 'zz',
header : "总值",
width : 75,
dataIndex : 'zz',
sortable : true
}]);

grid_cm_kcxx.on("hiddenchange",function(thiz,colIndex,hidden){form_kcxx.setWidth(thiz.getTotalWidth(false))})

var grid_kcxx = new Ext.grid.EditorGridPanel({
store : grid_store_kcxx,
cm : grid_cm_kcxx,
stripeRows : true,
buttonAlign : 'center',
frame : true,
autoHeight : true,
width : grid_cm_kcxx.getTotalWidth(false),
trackMouseOver : true,
});

var ddlb_store_ck = new Ext.data.JsonStore({
fields : defaultComboStoreFields
});

var top = new Ext.FormPanel({
labelAlign : 'left',
buttonAlign : 'center',
labelWidth : 80,
frame : true,
title : '库存查询',
autoScroll : true, //!!!
autoWidth : false, //!!!不能指定为true,否则宽度无法根据grid的宽度进行调整,grid的有些列就会看不到
width : grid_kcxx.getColumnModel().getTotalWidth(false),//!!!width不能指定为'100%'否则宽度无法根据grid的宽度进行调整,grid的有些列就会看不到
layout : 'column',
items : [{},{},...,{
columnWidth : .99,
layout : 'form',
items : [grid_kcxx]
}]
});