`
atian25
  • 浏览: 468841 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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了...

 

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

 

 

  • 大小: 97.5 KB
分享到:
评论
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是算总和的百分比的

相关推荐

    解决extjs 桌面图标换行方法

    ### 解决ExtJS桌面图标换行方法 #### 知识点概述 本文档将详细介绍如何在ExtJS框架中实现桌面图标的自动换行功能。在许多应用中,特别是在模仿桌面环境的应用程序中,桌面图标(通常称为快捷方式)的布局至关重要...

    extjs中设置grid默认行高及换行

    Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...

    ExtJS grid过滤操作

    ExtJS Grid是一个强大的数据展示组件,它允许用户以表格的形式查看和操作大量数据。在实际应用中,数据过滤是常见的需求,以便用户能快速定位到感兴趣的信息。本篇将深入探讨ExtJS Grid的过滤操作,以及如何动态地对...

    extjs4 桌面图标换行

    extjs4.0 实现桌面图标换行,具体改动参考 4.0.2a\examples\desktop\App.js 核心方法参考这句 //这里初始化所有图标 this.initShortcut(); 我觉得我说的很清楚了,还不明白的留言,一点js不懂的请闪开,谢谢

    extjs grid数据导出excel文件

    这包括将数据转换为二维数组,每一行代表一个Grid记录,每一列对应记录的一个字段。 4. **创建并写入工作簿**:利用SheetJS创建一个新的工作簿对象,然后将转换后的数据添加到新的工作表中。 5. **生成Excel文件**...

    EXTJS grid导出EXCEL文件

    在EXTJS中,Grid组件是一个强大的数据展示工具,它允许用户以表格形式查看和操作大量数据。在EXTJS 3.2.0版本中,Grid提供了一个功能,可以将其中的数据导出到Microsoft Excel文件中,方便进一步的数据分析和处理。 ...

    ExtJs Grid选择行

    在ExtJs框架中,Grid组件是一种非常常用的展示数据表格的方式,它提供了丰富的功能,包括数据的排序、分页、过滤以及行选择等。在实际应用中,经常需要根据用户交互来判断Grid中的行是否被选中,以便进行下一步的...

    extjs grid

    EXTJS Grid是EXTJS库中的一个核心组件,用于创建数据密集型的表格视图,它在Web应用程序中常用于展示和操作大量结构化数据。EXTJS Grid提供了丰富的功能,包括分页、排序、过滤、编辑等,使得用户可以高效地管理和...

    EXTJS Grid总结例子

    Grid的列配置是通过`columns`数组实现的,每个元素代表一列,可以设置列的标题、宽度、对齐方式、可编辑性等。例如: ```javascript columns: [{ text: 'Name', dataIndex: 'name', width: 200 }, { text: 'Age'...

    extjs grid示例代码

    ExtJS Grid是Sencha ExtJS框架中的一个核心组件,它用于构建数据驱动的表格视图。Grid组件在Web应用中广泛使用,因为它提供了强大的数据展示、排序、分页、筛选和编辑功能。以下是对`ExtJS Grid`示例代码的详细解析...

    Extjs grid 中文排序问题修正

    总结起来,解决EXTJS Grid中文排序问题主要涉及到自定义排序函数和利用localeCompare方法。通过这种方式,我们可以确保EXTJS Grid在处理中文数据时能正确排序,提供更好的用户体验。在实际开发中,可能还需要考虑...

    ExtJs grid多选时获取选中的所有值

    其中,Grid Panel(简称 Grid)是ExtJs中最常用的一个组件之一,用于展示表格数据。在实际业务场景中,经常需要支持用户对表格中的多行数据进行选择,并执行批量操作,如删除、编辑等。因此,掌握如何在ExtJs Grid中...

    Extjs Grid 扩展实例

    4. **过滤**:通过`Ext.grid.filters.Filters`插件,我们可以为Grid的每一列添加过滤功能。这样用户可以根据需求筛选数据,提高数据操作的效率。 5. **排序**:默认情况下,Grid支持单击列头进行升序或降序排序。若...

    Extjs grid分页1

    ExtJS Grid 分页是Web应用中数据展示的重要组成部分,它允许用户高效地浏览大量数据而无需一次性加载所有记录。在本文中,我们将深入探讨ExtJS Grid的分页功能及其实现方式。 首先,ExtJS Grid是一种强大的...

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    extjs grid 多表头插件

    ExtJS Grid是一款强大的数据展示组件,常用于构建复杂的Web应用程序中的数据网格。多表头插件是ExtJS Grid的一个重要特性,它允许我们创建具有多层次、复杂结构的表头,以便更好地组织和呈现数据。在ExtJS Grid中,...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    Extjs4 grid使用例子

    Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **MVC架构**: Model-View-Controller(MVC)是一种设计模式,常用于大型应用的组织和管理。在ExtJS4...

    ExtJs grid导出Excel

    当需要将Grid中的数据导出到Excel时,可以采用两种方法,这些方法在ExtJs 4.2版本中已经得到很好的支持。 **方法一:使用XLSX.js库** XLSX.js是一个JavaScript库,能够方便地读取和写入Excel文件。在ExtJs中,你...

    Extjs Grid 操作大全

    根据提供的文件信息以及标题与描述,本文将详细探讨Extjs Grid的操作大全,特别是关于如何获取Grid中的各种值以及如何添加各种点击事件。 ### Extjs Grid 操作大全 #### 一、Extjs Grid简介 Extjs 是一个用...

Global site tag (gtag.js) - Google Analytics