文档章节

Extjs Grid自动换行

Junn
 Junn
发布于 2015/03/24 16:59
字数 292
阅读 136
收藏 0

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 的美观了。

本文转载自:http://guozhenqian.iteye.com/blog/1225145

共有 人打赏支持
Junn
粉丝 145
博文 412
码字总数 288918
作品 0
海淀
高级程序员
Extjs GridPanel用法详解

创建GridPanel 要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: //1.定义ModelExt.define("MyApp.model.User", { }); 然后创建Store: //...

鱼煎
2017/11/02
0
0
Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成...

鱼煎
2017/11/02
0
0
ExtJs4.1目录结构介绍和使用说明

一、在做ExtJs开发之前首先要到网站上下载ExtJs的开发包,我用的最新版本是4.1.1。此版本相对于之前的版本目录结构发生了一些变化,没有了adapter目录, 目录结构如下 文件/文件夹名的作用:...

Junn
2013/01/17
0
1
ExtJs grid 如何实现按照每一列进行筛选

官方有例子: http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#big-data-grid 百度百科: http://zhidao.baidu.com/link?url=1GPwBtElw09u0......

jxlgzwh
2014/10/11
0
0
Eclipse开发Javascript环境配置(含EXTJs配置) 转载

有三种Javascript编辑器可供选择: 1. JSDT 2. JSEclipse 3. Spket 分别介绍这三种插件的安装: 1. JSDT 是WPT自带的插件 只要装了WTP就不用单独安装JSDT了。也可以从这里了解JSDT的一些信息...

晨曦之光
2012/03/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

webSocket前台实现

webSocket前台实现 简单实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="application/javascript" src="js/base64.js"></script......

Airship
9分钟前
0
0
从零到一,使用实时音视频 SDK 一起开发一款 Zoom 吧

zoom(zoom.us) 是一款受到广泛使用的在线会议软件。相信各位一定在办公、会议、聊天等各种场景下体验或者使用过,作为一款成熟的商业软件,zoom 提供了稳定的实时音视频通话质量,以及白板、...

七牛云
10分钟前
0
0
Linux学习-10月16

9.1 正则介绍_grep 9.2 grep中 9.3 grep下 一、什么是正则 正则就是一串有规律的字符串,包括各种特殊符号 掌握正则对于编写shell有很大帮助 各种编程中都有正则,原理是一样的 二、grep简介...

wxy丶
17分钟前
0
0
设计模式学习与应用——单例模式

单例模式 作用:一个类只有一个实例,并且提供访问该实例的全局访问点 创建方式 1.懒汉方式 public class Singleton{//使外部无法访问这个变量,而要使用公共方法来获取private static ...

隔壁老余在这
26分钟前
0
0
亿级爆款背后,网易云音乐的生长之道

两年时间,破亿;四年时间,破4亿…… 据国内知名移动大数据监测平台Trustdata发布的《2017年下半年中国移动互联网发展分析报告》显示,2017年12月,网易云音乐MAU同比增长达43.1%,是移动音...

安卓绿色联盟
29分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部