grid列自动换行
来源:互联网 发布:linux复制压缩包 编辑:程序博客网 时间:2024/05/20 02:24
在使用Ext2的GRID显示数据时碰到一个问题:每列内容的显示都显示成一行,如果内容过多,看起来不太舒服,如果能够自动换行显示成多行就会更好。不知能不能做到?
问题补充
使用TEMPLATE是可以做到,但我想直接利用GRID应该更方便,在ext-all.css中发现有这么一段:
css 代码
1..x-grid3-cell-inner,.x-grid3-hd-inner{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;padding:3px 3px 3px 5px;whitewhite-space:nowrap;}
2.
3..x-grid3-row-body{whitewhite-space:normal;}
我想可能是white-space:nowrap在作怪,但不知如何设置。
问题补充
找到一个解决办法:在显示GRID的页面上重载样式
css 代码
1.<style>
2. .x-grid3-cell-inner{whitewhite-space:normal;}
3.</style>
这样这一页的全部内容都能够自动换行了。
问题补充
使用renderer能够解决问题。
能不能说说renderer:function(value,cell){...}中cell的二个属性css和attr的不同吗?
我使用cell.attr='style="white-space:normal"'能够实现换行,但设置css似乎不起作用
能否试着用Ext的xTempate格式化一下
crabboy (初级程序员) 2008-08-29
在定义Ext.grid.ColumnModel的时候可以用setRenderer来指定某一列的css,然后把nowrap改掉就行了,因为有时候有些列还是希望有些列nowrap的,具体请参考文档啦~~
timezz (初级程序员) 2008-08-29
timezz 写道
在定义Ext.grid.ColumnModel的时候可以用setRenderer来指定某一列的css,然后把nowrap改掉就行了,因为有时候有些列还是希望有些列nowrap的,具体请参考文档啦~~
请问可以详细举个例吗?语法怎么写,我怎么也达不到效果.
还有个问题,顺便也问一下.有没有设置可以让grid一行,或单元格内的文本可以选定进行复制呀?
换行已经解决谢谢..
Java代码
1.function renderName(value, metadata, record){
2. metadata.attr = 'style="white-space:normal;"';
3. var deptid = document.forms[0].deptid.value;
4. return String.format(
5. '<a href="/webapp/goods/goodsinfoMaintenance/view.do?goodsid={1}&deptid={2}" title="点击查看明细" >{0}</a>',
6. value, record.data.goodsid,deptid);
7.}
function renderName(value, metadata, record){
metadata.attr = 'style="white-space:normal;"';
var deptid = document.forms[0].deptid.value;
return String.format(
'<a href="/webapp/goods/goodsinfoMaintenance/view.do?goodsid={1}&deptid={2}" title="点击查看明细" >{0}</a>',
value, record.data.goodsid,deptid);
}
但是单元格内的文本用鼠标拖动进行选定以便CTR+C还是没有实现解决....
gygcloud (初级程序员) 2008-08-29
很想请教一下mataData.attib是什么意思?? 为什么这样可以设置??
问题补充
使用TEMPLATE是可以做到,但我想直接利用GRID应该更方便,在ext-all.css中发现有这么一段:
css 代码
1..x-grid3-cell-inner,.x-grid3-hd-inner{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;padding:3px 3px 3px 5px;whitewhite-space:nowrap;}
2.
3..x-grid3-row-body{whitewhite-space:normal;}
我想可能是white-space:nowrap在作怪,但不知如何设置。
问题补充
找到一个解决办法:在显示GRID的页面上重载样式
css 代码
1.<style>
2. .x-grid3-cell-inner{whitewhite-space:normal;}
3.</style>
这样这一页的全部内容都能够自动换行了。
问题补充
使用renderer能够解决问题。
能不能说说renderer:function(value,cell){...}中cell的二个属性css和attr的不同吗?
我使用cell.attr='style="white-space:normal"'能够实现换行,但设置css似乎不起作用
能否试着用Ext的xTempate格式化一下
crabboy (初级程序员) 2008-08-29
在定义Ext.grid.ColumnModel的时候可以用setRenderer来指定某一列的css,然后把nowrap改掉就行了,因为有时候有些列还是希望有些列nowrap的,具体请参考文档啦~~
timezz (初级程序员) 2008-08-29
timezz 写道
在定义Ext.grid.ColumnModel的时候可以用setRenderer来指定某一列的css,然后把nowrap改掉就行了,因为有时候有些列还是希望有些列nowrap的,具体请参考文档啦~~
请问可以详细举个例吗?语法怎么写,我怎么也达不到效果.
还有个问题,顺便也问一下.有没有设置可以让grid一行,或单元格内的文本可以选定进行复制呀?
换行已经解决谢谢..
Java代码
1.function renderName(value, metadata, record){
2. metadata.attr = 'style="white-space:normal;"';
3. var deptid = document.forms[0].deptid.value;
4. return String.format(
5. '<a href="/webapp/goods/goodsinfoMaintenance/view.do?goodsid={1}&deptid={2}" title="点击查看明细" >{0}</a>',
6. value, record.data.goodsid,deptid);
7.}
function renderName(value, metadata, record){
metadata.attr = 'style="white-space:normal;"';
var deptid = document.forms[0].deptid.value;
return String.format(
'<a href="/webapp/goods/goodsinfoMaintenance/view.do?goodsid={1}&deptid={2}" title="点击查看明细" >{0}</a>',
value, record.data.goodsid,deptid);
}
但是单元格内的文本用鼠标拖动进行选定以便CTR+C还是没有实现解决....
gygcloud (初级程序员) 2008-08-29
很想请教一下mataData.attib是什么意思?? 为什么这样可以设置??
重载样式
.x-grid3-cell-inner,.x-grid3-hd-inner{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;padding:3px 3px 3px 5px;white-space:normal;}
.x-grid3-cell-inner,.x-grid3-hd-inner{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;padding:3px 3px 3px 5px;white-space:normal;}
在列使用
{
header: '审批要素', dataIndex: 'SHENPIYAOSHU', width: 200,
renderer: function (value, p, record) {
return '<div style="white-space:normal;">' + value + '</div>';
}
},
header: '审批要素', dataIndex: 'SHENPIYAOSHU', width: 200,
renderer: function (value, p, record) {
return '<div style="white-space:normal;">' + value + '</div>';
}
},
0 0
- grid列自动换行
- extjs4 grid 列根据内容长度自动换行
- Extjs Grid自动换行
- ligerUi Grid 自动换行
- extjs4 Grid自动换行
- grid单元格内自动换行
- ExtJs Grid自动生成列
- Ext js 列自动换行
- VFP中Grid表格自动换行
- Grid++ Reprot报表自动换行设置
- Extjs4 grid根据model自动生成列
- Ext.grid.ColumnModel列宽度自动填满grid宽度
- ext:grid分页,列宽度自动填满grid宽度
- gridview列内容自动换行的方法
- foreach 循环3列 自动换行
- gridview列内容自动换行的方法
- 设置Gridview的列是否自动换行
- esayui datagrid 列内容超长自动换行
- wampserver下如何修改MySQL密码
- Ubuntu 16.04 几个国内更新源
- Python 使用setuptools打包安装
- QT系列:JSON操作
- synchronized 与 Lock 的那点事
- grid列自动换行
- 使用Java代码连接mysql数据库
- 仿支付宝微信支付密码界面弹窗封装dialog
- Google Protocol Buffer项目无法加载解决方案
- Android 仿微信,朋友圈右滑退出
- source insight使用教程
- 傅里叶变换
- poj 1753
- 不支持从 OTHER 到 BINARY 的转换错误