Extjs中GridPanel实现单元格自动换行的补充

Extjs中GridPanel实现单元格自动换行的补充

Extjs3.x

在Extjs中GridPanel组件或EditorGridPanel中，针对单元格内容超长实现自动换行要求时，目前网上介绍的基本上是在采用在ColumnModel中给对应列增加Css样式，如下代码：

...

{

    id:'N_Pro_TestValue',

    header:F_N_Pro_TestValue,

    width: 120,

    dataIndex:'N_Pro_TestValue',

    menuDisabled:true,

css:'background-color:#F5F5F5;',

    renderer:function(value, meta, record) {

        meta.attr ='style="white-space:normal;"'; 实现自动换行功能

        return value

    }

},

...

但笔者在使用 EditorGridPanel中，发现该类换行有时候没有达到预期效果，如图

图中对应的列，划圈的部分实现了换行功能，但是画矩形框部分，确没有换行。

如果想要改部分也实现自动换行，需要对原来的CSS进行调整，增加word-wrap: break-word;

该行代码，即：

...

  renderer: function(value, meta, record){

        meta.attr ='style="white-space:normal;word-wrap:break-word;"'; 

        return value

    }

...

这样达到预期效果。

以上在extjs3.41版本中通过。

--------------------

补充：在4.2.3版本中，以上代码改为：

renderer : function (value, meta, record) {

meta.style = 'white-space:normal;word-break:break-all;';

return value;

}