转帖自:
http://blog.sina.com.cn/s/blog_57112b350100m0cu.html
GridPanel 单元格自动换行
定义列的时候加个 renderer,例
{
header : '序号',
dataIndex : 'ind',
renderer: function(value, meta, record) {
meta.attr = 'style="white-space:normal;"';
return value;
}
}
使用自动换行又会带来一个新的问题,那就是不需要换行的列在竖直方向上没有居中显示,而是靠上对齐,要想在竖直方向上居中显示还得改下 grid 的样式,本人不赞成直接修改 ext-all.css,一个是尊重人家的版权,还有就是改多了,以后自己都记不清。那么要想改过成单元格都竖直居中,只需在页面或者自己的样式定义里面重写一个样式即可:
<style type="text/css">
.x-grid3-row td, .x-grid3-summary-row td {
line-height:13px;
vertical-align: middle;
padding-left:1px;
padding-right:1px;
-moz-user-select: none;
-khtml-user-select:none;
-webkit-user-select:ignore;
}
</style>
其实看过原码就知道了,里面只有 vertical-align: middle; 才是设置对齐用的,其他的都是原来定义的样式,只是把这个对齐由原来的 top 改成了 middle 而已。这样就能既达到了有些列自动换行的目的,而且又不影响到 grid 的美观了。
分享到:
相关推荐
EXT GridPanel获取某一单元格的值
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
Ext的gridpanel控件二次加载时丢失解决方案
Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便,下面是从网上搜到的解决方案。
Ext GridPanel加载完数据后进行操作,比如load数据之后选定某些行数据,下面有个示例,需要的朋友可以参考下
Ext.grid.GridPanel 删除线 放到example文件夹下运行
EXT实例GridPanel. 实现简单的。
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
NULL 博文链接:https://shenhaiquan.iteye.com/blog/1474328
本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中,具体实现代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
ExtJS中的表格功能非常强大,包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列...
tapestry4.02中封装ext的GridPanel组件
ext.net gridpanel 弹出窗
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
NULL 博文链接:https://wv1124.iteye.com/blog/741559
Ext.grid.ColumnModel显示不正常