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

ExtJS Grid布局与自适应

最新推荐文章于 2018-01-25 13:28:00 发布

最新推荐文章于 2018-01-25 13:28:00 发布 · 222 阅读

文章标签：

#EXT #CSS #JavaScript #IE #ViewUI

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文探讨了ExtJS Grid组件的布局问题，包括单元格内容自动换行、指定列宽后的自适应调整等，并分享了解决Firefox浏览器下操作列溢出的方法。

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

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

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

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 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下,最右边的操作老溢出。如下图