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

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

 

换了autoExpandColumn感觉不管用.

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

 

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

于是试了下在grid里面加一句minColumnWidth:11,结果发现OK了...

 

先记录下,回头再细看一下这个函数吧...呵呵...

 

 

评论

3 楼 atian25 2009-08-31  

damoqiongqiu 写道

你总是走在最前面的那个人，呵呵。这个问题也困扰我许久 

实际上是我理解错误了.
forceFit后各个cm的width是算总和的百分比的

2 楼 damoqiongqiu 2009-08-31  

你总是走在最前面的那个人，呵呵。这个问题也困扰我许久 

1 楼 atian25 2009-06-29  

Column
width : Number

The initial width in pixels of the column. The width of each column can also be affected if any of the following are configured:

1.Ext.grid.GridPanel.autoExpandColumn

2.Ext.grid.GridView.forceFit
By specifying forceFit:true, non-fixed width columns will be re-proportioned (based on the relative initial widths) to fill the width of the grid so that no horizontal scrollbar is shown.

3.Ext.grid.GridView.autoFill

4.Ext.grid.GridPanel.minColumnWidth

Note: when the width of each column is determined, a space on the right side is reserved for the vertical scrollbar. The Ext.grid.GridView.scrollOffset can be modified to reduce or eliminate the reserved offset.

还是有问题,forceFit后各个cm的width是算总和的百分比的