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

太过爱你忘了你带给我的痛 2023-10-17 13:47 1阅读 0赞

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

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

在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中，发现该类换行有时候没有达到预期效果，如图

![Center][]

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

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

该行代码，即：

...

renderer: function(value, meta, record)\{

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

return value

\}

...

这样达到预期效果。

![Center 1][]

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

\--------------------

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

renderer : function (value, meta, record) \{

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

return value;

\}  
  
  
转自：  
http://blog.sina.com.cn/s/blog\_6543cca50102vzyd.html

[Center]: https://img-blog.csdn.net/20170616153953938?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzcyNzk3ODM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20170616154002621?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzcyNzk3ODM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 Extjs中GridPanel实现单元格自动换行的补充-转载

Extjs中GridPanel实现单元格自动换行的补充 <table> <tbody> <tr> <td> </td> <td>&nb

太过爱你忘了你带给我的痛/ 2023年10月17日 13:47/ 0 赞/ 2 阅读

相关 JTable单元格内容超出自动换行的办法

JTable单元格内容超出自动换行的办法 > 如果实现java swing是数据的超出宽度自动换行，需要实现对表格的自动渲染，替换文本框。将表格添加到渲染器

短命女/ 2023年10月13日 19:03/ 0 赞/ 25 阅读

相关 excel如何在单元格内换行

方一：自动换行选中需要换行的某个单元格，然后依次点击开始-》对齐方式-》自动换行即可。且这是自行适应单元格的列宽进行换行，而且随着列宽的变化而变化。方二：强制换行

约定不等于承诺〃/ 2022年10月12日 01:40/ 0 赞/ 244 阅读

相关 extjs gridpanel 操作行得到选中行

[extjs gridpanel 操作行得到选中行的列][extjs gridpanel _] 在Extjs 3.2.0上适合 var model =

系统管理员/ 2022年07月24日 04:08/ 0 赞/ 238 阅读

相关 ExtJs合并单元格

前端框架ExtJS4.0 下图为合并后效果：先 ![Image 1][] 最近项目中做Grid显示时，需要将单元格分类然后按一定要求给合并，如果单单是合并表头，

╰半橙微兮°/ 2022年07月21日 12:19/ 0 赞/ 442 阅读

相关 BootStrapTable.JS 单元格不换行的实现

字段过长容易导致 BootStrapTable.JS 实现的 Table 文字自动换行。 The width of column. If not defined, the w

曾经终败给现在/ 2022年07月14日 00:28/ 0 赞/ 618 阅读

相关如何用代码在Excel中实现单元格内换行

已启用新博客：[http://ant73.com][http_ant73.com] 若有需要联系或其他，请访问 [http://ant73.com][http_ant73.co

墨蓝/ 2022年07月12日 14:38/ 0 赞/ 594 阅读

相关 jqgrid单元格内容过长换行

JQGrid表头自动换行的办法：如果table的header部分字段太多或字段文字太长需要自动换行时，可尝试如下css。 <style type="text/css" m

雨点打透心脏的1/2处/ 2022年05月12日 10:16/ 0 赞/ 294 阅读

相关 ExtJs gridPanel默认选中第一行

具体语法 MyGrid.getSelectionModel().select(0,true); 注意事项语句最好的位置选择是 Store获取数据的成

爱被打了一巴掌/ 2021年09月14日 12:54/ 0 赞/ 514 阅读

相关 ExtJs gridPanel实现多行选取

需求在ExtJs中使用gridPanel时，实现选取多行，并且获得其中的数据效果图如下 ![这里写图片描述][SouthEast] 解决在ExtJs

怼烎@/ 2021年09月14日 12:04/ 0 赞/ 469 阅读