为什么的我的gridpanel不出现水平滚动条

Question

我的grid放在一个window中，显示，但grid却没有出现水平滚动条导致有些列看不到，以下是grid代码:

var test = new Ext.grid.GridPanel({
    id:'basegrid',
    //plain : false,
    height : 250,
    frame:false,
    border : true,// 出现边框
    region : 'center',// 设定显示区域为中心,停靠在容器中心
    layout : 'fit',// 表格内列内容填充满,按列头比例填充
    width : 500,
    autoScroll:true,
    autoSizeColumns : true,//根据列内容自动适应列宽度
    trackMouseOver:true,//鼠标移动时，高亮显示
    sm : new Ext.grid.RowSelectionModel(),
    cm : colM,
    autoWidth : true,
    viewConfig : {
     sortAscText : '升序',
     sortDescText : '降序',
     columnsText : '显示列',
        forceFit:false
     
    },
    renderTo:wuzhen,
    loadMask : {
     msg : '正在查询,请稍后...'
    },
    store : store,
    autoExpandColumn : 'URL'
   });

 

 

下面是window的代码:

 

var wuzhen = new Ext.Window({
          id:'cmwap',
    title : '业务类型查询',
    width : 520,
    height : 300,
    //loadMask : true,
    plain : true,
    bodyStyle : 'padding:5px;',
    buttonAlign : 'center',
    layout : 'fit',
    renderTo : Ext.getBody(),
    items : [test],
    buttons : [{
       text : '关闭',
       handler : function() {
        wuzhen.close();
       }
      }]
   });

 

下面是较完整的代码

 

 

var store = new Ext.data.Store({
    proxy : new Ext.data.HttpProxy({
       url : url
      }),
    reader : new Ext.data.JsonReader({
       root : 'result'
      }, [{
         name : 'CHARGINGID',mapping: 0
        }, {
         name : 'SERVICECODE',mapping: 1
        }, {
         name : 'UPLINKVOLUME',mapping: 2
        }, {
         name : 'DOWNLINKVOLUME',mapping: 3
        }, {
         name : 'USAGEDURATION',mapping: 4
        }, {
         name : 'URL',mapping: 5
        }])
   });

 var colM = new Ext.grid.ColumnModel([// 定义表格显示列头
 {

    header : "计费标识",
    sortable : true,
    dataIndex : 'CHARGINGID',
    width:45
   }, {
    header : "上行流量",
    sortable : true,
    dataIndex : 'UPLINKVOLUME',
    width:35
   }, {
    header : "下行流量",
    sortable : true,
    dataIndex : 'DOWNLINKVOLUME',
    width:35
   }, {
    header : "业务编码",
    sortable : true,
    dataIndex : 'SERVICECODE',
    width:45
   }, {
    header : "使用时长",
    sortable : true,
    dataIndex : 'USAGEDURATION',
    width:35
   }, {
    header : "使用时实际URL",
    sortable : true,
    dataIndex : 'URL',
    width:60
   }]);

 var test = new Ext.grid.GridPanel({
    id:'basegrid',
    //plain : false,
    height : 250,
    frame:false,
    border : true,// 出现边框
    region : 'center',// 设定显示区域为中心,停靠在容器中心
    layout : 'fit',// 表格内列内容填充满,按列头比例填充
    width : 500,
    autoScroll:true,
    autoSizeColumns : true,//根据列内容自动适应列宽度
    trackMouseOver:true,//鼠标移动时，高亮显示
    sm : new Ext.grid.RowSelectionModel(),
    cm : colM,
    autoWidth : true,
    viewConfig : {
     sortAscText : '升序',
     sortDescText : '降序',
     columnsText : '显示列',
        forceFit:false
     
    },
    renderTo:wuzhen,
    loadMask : {
     msg : '正在查询,请稍后...'
    },
    store : store,
    autoExpandColumn : 'URL'
   });

 // ===================================================================

 var wuzhen = new Ext.Window({
          id:'cmwap',
    title : '业务类型查询',
    width : 520,
    height : 300,
    //loadMask : true,
    plain : true,
    bodyStyle : 'padding:5px;',
    buttonAlign : 'center',
    layout : 'fit',
    renderTo : Ext.getBody(),
    items : [test],
    buttons : [{
       text : '关闭',
       handler : function() {
        wuzhen.close();
       }
      }]
   });
 wuzhen.show();
 store.load();

 

 

我在后面还贴了图，

 

 

请大家帮忙看看，先谢过了，在网上搜索下了，都说在gridview里面定义 forceFit:false 就可以了，但是加了这句后，老是报this.config[...].width为空或不是对象的错误，不知道为什么……，恳请大家帮助

Answer 1

你的水平 字段没超出所以没 滚动条！

你试下吧 columnModel 的列宽度 写大点就有了

还有可能是另外一个原因：

autoSizeColumns : true,//根据列内容自动适应列宽度

吧这句话去掉

原理同 autoHeight , 必须显示指定一个高度 才有垂直滚动条