ExtJS Grid 换行后的最后一列太窄,暂时解决方法

最新推荐文章于 2020-08-10 09:45:34 发布

lego2816

最新推荐文章于 2020-08-10 09:45:34 发布

阅读量3.2k

点赞数

分类专栏： ext 文章标签： extjs header javascript function css class

ext 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

关键字: extjs grid 换行列宽

首先是cell内容自动换行,在官方FAQ那提到是加一句CSS:

Html代码

.x-grid3-cell-inner {
/*内容长的时候换行*/
white-space:normal !important;
}

.x-grid3-cell-inner {
      /*内容长的时候换行*/
      white-space:normal !important;
}

其次,Grid的某几列都指定了宽度,就剩下一列(如图中的"内容")是让它自适应的.

Js代码

var cm = new Ext.grid.ColumnModel([
sm,
{
header:'名称',
dataIndex:'alarmName',
//renderer:this.simpleRenderer,
width:40,
sortable:true
},{
header:'对象',
dataIndex:'node',
renderer:function(value,meta,record){
var nodeType = Ext.util.Format.uppercase(record.get('nodeType'));
if(['BSC','MSC','MGW','GGSN','SGSN'].indexOf(nodeType)!=-1){
meta.css = 'netcell';
meta.attr = String.format(' netcell="{0}" netcellType="{1}" ',record.get('node'),nodeType);
}
return value;
},
tooltip:'鼠标悬浮可查看相关网元',
css:"text-align:center;",
width:20,
sortable:true
},{
header:'内容',
dataIndex:'alarmContent',
//renderer:this.simpleRenderer,
sortable:true
},{
header:'最早发生时间',
dataIndex:'firstTime',
type:'date',
renderer:Ext.util.Format.dateRenderer('y-m-d H:i:s'),
css:"text-align:center;",
width:30,
sortable:true
},{
header:'最后发生时间',
dataIndex:'createTime',
type:'date',
renderer:Ext.util.Format.dateRenderer('y-m-d H:i:s'),
css:"text-align:center;",
width:30,
sortable:true
},{
header:'次数',
dataIndex:'stackTimes',
//renderer:this.simpleRenderer,
css:"text-align:center",
width:12,
sortable:true
},{
header:'操作',
dataIndex:'node',
renderer:function(value,meta,record){
var resultStr = "<div class='controlBtn'><a href='javascript:void(0);' class='alarm_detail'>详细</a> | <a href='javascript:void(0);' class='alarm_check'>签阅</a> | <a href='javascript:void(0);' class='alarm_delete'>删除</a></div>";
return resultStr;
},
css:"text-align:center;",
width:30,
sortable:false
}
]);

var cm = new Ext.grid.ColumnModel([
      sm,
      {
        header:'名称',
        dataIndex:'alarmName',
        //renderer:this.simpleRenderer,
        width:40,
        sortable:true
      },{
        header:'对象',
        dataIndex:'node',
        renderer:function(value,meta,record){
          var nodeType = Ext.util.Format.uppercase(record.get('nodeType'));
          if(['BSC','MSC','MGW','GGSN','SGSN'].indexOf(nodeType)!=-1){
            meta.css = 'netcell';
            meta.attr = String.format(' netcell="{0}" netcellType="{1}" ',record.get('node'),nodeType);
          }
          return value;
        },
        tooltip:'鼠标悬浮可查看相关网元',
        css:"text-align:center;",
        width:20,
        sortable:true
      },{
        header:'内容',
        dataIndex:'alarmContent',
        //renderer:this.simpleRenderer,
        sortable:true
      },{
        header:'最早发生时间',
        dataIndex:'firstTime',
        type:'date',
        renderer:Ext.util.Format.dateRenderer('y-m-d H:i:s'),
        css:"text-align:center;",
        width:30,
        sortable:true
      },{
        header:'最后发生时间',
        dataIndex:'createTime',
        type:'date',
        renderer:Ext.util.Format.dateRenderer('y-m-d H:i:s'),
        css:"text-align:center;",
        width:30,
        sortable:true
      },{
        header:'次数',
        dataIndex:'stackTimes',
        //renderer:this.simpleRenderer,
        css:"text-align:center",
        width:12,
        sortable:true
      },{
        header:'操作',
        dataIndex:'node',
        renderer:function(value,meta,record){
          var resultStr = "<div class='controlBtn'><a href='javascript:void(0);' class='alarm_detail'>详细</a> | <a href='javascript:void(0);' class='alarm_check'>签阅</a> | <a href='javascript:void(0);'  class='alarm_delete'>删除</a></div>";
          return resultStr;
        },
        css:"text-align:center;",
        width:30,
        sortable:false
      }
    ]);

Js代码

var grid = new Ext.grid.GridPanel({
//title:'::网元告警&关注事件(近24小时)::',
region:'center',
store:store,
enableColumnMove: true,
enableHdMenu: true,
autoScroll: true,
cm:cm,
sm:sm,
columnLines:true,
trackMouseOver:false,
//minColumnWidth:11,
//loadMask:'载入中...',
viewConfig:{
forceFit: true,
deferEmptyText: true,
emptyText: "<div>业务运行正常</div>",
enableRowBody:true,
getRowClass: function(record, rowIndex, rowParams, store){
if(record.get('alarmType')==Elvis.NetCellAlarmMonitor.ALARM_TYPE_CALLLIMIT_EVENT){
return 'alarm_row_event';
}else{
return 'alarm_row_alarm';
}
}
}
});

var grid = new Ext.grid.GridPanel({
      //title:'::网元告警&关注事件(近24小时)::',
      region:'center',
      store:store,
      enableColumnMove: true,
      enableHdMenu: true,
      autoScroll: true,
      cm:cm,
      sm:sm,
      columnLines:true,
      trackMouseOver:false,
      //minColumnWidth:11,
      //loadMask:'载入中...',
      viewConfig:{
        forceFit: true,
        deferEmptyText: true,
        emptyText: "<div>业务运行正常</div>",
        enableRowBody:true,
        getRowClass: function(record, rowIndex, rowParams, store){
          if(record.get('alarmType')==Elvis.NetCellAlarmMonitor.ALARM_TYPE_CALLLIMIT_EVENT){
            return 'alarm_row_event';
          }else{
            return 'alarm_row_alarm';
          }
        }
      }
    });

在IE一切正常,在FF3下,最右边的操作老溢出。如下图

（图略）

换了autoExpandColumn感觉不管用.

官方论坛上问了,回复说是forceFit:true后,column里面设置的无效.

今天看了下GridView的源码, fitColumns() 里面有一句cm.setColumnWidth(i, Math.max(this.grid.minColumnWidth, Math.floor(w + w*frac)), true);