`
marc0658
  • 浏览: 81434 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Grid的单元格文本自动换行

 
阅读更多

Grid的单元格对数据显示都是采用省略的办法来处理的,即内容长度超过单元格长度时自动隐藏超过的部分并使用省略号...来显示,这样虽然也很好,但有时我们可能还是希望它能完全的显示出来,即采用换行显示。

最简单的办法莫过于直接修改ext-all.css,但俺一般不像侵入ext的源文件,那就自己用别的方法实现吧。
方法其实也很简单,判断该grid是否需要换行显示。如果是则加上这段代码:

grid.store.on('load', function() {
    grid.El.select(
"table[class=x-grid3-row-table]").each(function(x) {
        x.addClass('x
-grid3-cell-text-visible');
    });
});

CSS文件内容:

.x-grid3-cell-text-visible .x-grid3-cell-inner{overflow:visible;padding:3px 3px 3px 5px;white-space:normal;}



分享到:
评论

相关推荐

    横向合并单元格.zip

    2. 另外,可以通过调整单元格的宽度和高度,或者使用`AutoSizeMode`属性来控制单元格的大小,以适应自动换行的文本。例如,可以设置`AutoSizeMode`为`GrowOnly`或`GrowAndShrink`。 3. 如果需要在特定条件下(如...

    delphi xe 10.2.3 fmx grid 多元化表格 支持合并单元格 单独设置背景色

    3,可以储存文本(默认单元格内显示[DEMO],可以编辑实际内容或读取实际内容) 4,可以储存字符串列表(可以设置读取选择字符串) 5,可以储存日期(格式2018-07-06) 6,可以储存时间(格式10:26:32,设置智能设置到时分,直接...

    DataGridView控件用法合集

    自动调整行高和列宽可以通过启用`AutoSizeColumnsMode`和`AutoSizeRowsMode`属性来实现,它们会根据单元格内容自动调整大小。 #### 9. DataGridView指定行列冻结 冻结行列使某些列或行始终可见,即使用户滚动表格。...

    ExtJs高级技巧

    `,可以使超出列宽的文本自动换行。 **CSS调整示例**: ```css .x-grid3-cell-inner, .x-grid3-hd-inner { overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; padding: 3px 3px 3px 5px...

    web程序设计 表格 其中包含table td td常见的属性

    7. **`nowrap`**: 如果设置为`nowrap`,则内容将不会换行,所有文本都在同一行显示。 8. **`style`/`class`**: 可以添加CSS样式或类名,以自定义单元格的外观。 9. **`abbr`**: 提供单元格的简短解释,主要用于...

    html(超文本标记语言)题库_答案

    - **行为描述**:`<pre>`中的文本会保持原有的空格和换行,这对于展示代码或其他需要保持原有格式的文本非常有用。 **扩展知识点**: - `<pre>`标签通常配合`<code>`标签使用,后者用于标记程序代码或命令。 #### ...

    EduStringGrid v2.0

    2)列对齐(左、中、右),行对齐(上、中、下)3)自动换行,多行表头3)Flat,Grid3d,Lower 显示效果4)标题排序(左键升序,右键降序),图标提示排序方向,支持大数据排序,速度非常非常快!5)自动列宽,单列...

    itGrid v2.02

     在列表列内自动换行(Word-wrap);  列表头;  ListDrop和ListHide事件;  ListRows属性设置dropdownList的最大条目数; 支持的开发环境 • Visual C++ 6.0 • Visual Basic 6.0 • Delphi 5-7 • ...

    ExtJS下grid的一些属性说明

    注意:默认情况下,`overflow` 的值为 `hidden`,即使设置了 `white-space: normal`,单元格高度也不会随着文本换行而增加。因此,还需要将 `overflow` 的值设为 `visible`。 #### 五、默认折叠除第一个分组外的...

    VB常用附加控件【特别整理了表格控件】

    MSHFlexGrid1.Rows =i <BR>MSHFlexGrid1.Cols =j <BR>MSHFlexGrid1.Text =指定的字符串 <BR><BR> WordWrap-------为ture时可以在当前单元格换行显示,否则如果要显示的字符的长度超过列宽,那么就不能显示完全。

    Delphi StringGrid文字居中,Titile字体变大,Cell添加CheckBox

    在这个主题中,我们将探讨如何实现StringGrid中的文字居中、调整Title的文字大小和颜色,以及在单元格中添加并操作CheckBox控件。 首先,让我们关注StringGrid的文字居中。在Delphi中,可以通过设置StringGrid的`...

    winform grid 合并拆分

    然后,遍历GridView的所有单元格,将其内容转换为文本并添加到`PrintDocument`的`PrintPage`事件处理程序中。最后,使用`PrintPreviewDialog`显示预览效果。确保处理好换行、边距和列宽等问题,以保持与屏幕显示一致...

    C#和VB.Net DataGridView用法總結

    设置单元格中的文本换行。 - **设置换行**: ```csharp DataGridView1.DefaultCellStyle.WrapMode = DataGridViewTriState.True; ``` #### 36. DataGridView单元格DBNull值表示的设定 设置DBNull值的表示方式。 ...

    WPF渐变及布局Demo

    - **WrapPanel**:元素按顺序排列,当一行填满后自动换行。 ### 3. 示例应用:WpfAppdemo 在这个示例应用中,开发者可能创建了一个使用了渐变和布局的简单界面。例如,一个按钮可能使用线性渐变作为背景,同时,...

    后台需要南阳帮忙改的1

    - 单元格的文字换行或隐藏可能涉及到CSS的`word-wrap`、`white-space`属性以及CSS Flexbox或Grid布局。 - 分页样式的修改通常涉及CSS的调整,包括按钮样式、间距、对齐方式等。 - 弹出对话框和提示效果通常使用...

    CSS40个布局实例

    9. **Grid Auto Flow**:在Grid布局中,auto flow决定了单元格如何自动填充行和列。 10. **Grid Track Sizing**:设置行和列的大小,如fr单位,用于创建动态的网格系统。 11. **Grid Template Areas**:通过定义...

    完美解决UI-Grid表格元素中多个空格显示为一个空格的问题

    这段CSS代码将应用到所有的UI-Grid单元格内容上,使得每个单元格都按照`pre`的规则处理空白,即保持原始的空白字符序列,不会进行压缩或合并。这样一来,即使数据中包含多个连续的空格,它们也会在表格中以多个空格...

    [DataGird]如何截取过长的字符串

    在数据展示应用中,尤其是在使用`DataGrid`组件时,我们经常会遇到这样的问题:当单元格中的文本长度超过了列的宽度时,显示效果会受到影响,例如文本被截断或换行等。这不仅影响了界面的美观,还可能造成信息展示不...

    Table CSS样式

    `:防止单元格内的长文本换行,确保所有单元格宽度一致。 - `caption-side: top/bottom;`:控制表格标题(`<caption>`)的位置。 - `thead` 和 `tfoot`:分别为表头和表脚,可以设置不同的背景色或字体样式。 在...

    wpf基本控件的使用

    `Text`属性用于获取或设置文本内容,还可以通过`TextWrapping`属性控制文本换行。 3. **RichTextBox**: 与TextBox相比,RichTextBox提供了更复杂的文本格式化功能,如字体、颜色、段落对齐等,支持插入图片和表格。...

Global site tag (gtag.js) - Google Analytics