ExtJS下grid的一些属性说明


Posted in Javascript onDecember 13, 2009

1.界面修改(css style):
Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等,几乎都不同。Extjs对这些样式的设置都是由css完成的。如:
选中行的颜色就可用如下设置完成:
.x-grid3-row-selected{background:#c6e2ff!important;}
其他的都类似,只要找到对应的class, 然后设置要修改的部分即可。

2. 属性的作用(About Ext.grid. GroupingView, EditorGridPanel):
Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属性与其对应,可以选择要还是不要。其中一些的属性和其作用如下:
*. EditorGridPanel:
border: false, //grid的边界
autoHeight: true, //grid的高度是否要用指定的高度
enableColumnMove: false, //grid的列是否可以移动
enableHdMenu: false, //在列的header是否要有下拉菜单
trackMouseOver: true, //当鼠标移过行时,行是否要highlight
stripeRows: true, //让grid相邻两行背景色不同
*. GroupingView:
在要显示的数据中,根据它们的某个数据点进行分组,分组显示。这个数据点由*.GroupingStore中的groupField决定。*.GroupingView设置这个分组显示的grid的一些关于组的显示属性。如:
forceFit:true, //是否根据grid的宽度调整列的宽度,防止水平scrollbar的出现
enableGroupingMenu: false, //控制header的下拉菜单中是否有group的选项(Group By This Field, Show in Groups(checkbox))
showGroupName: true,
//用来分组的数据点这一列的header是否要随group name一起显示
hideGroupedColumn: true, //用来分组的数据点这一列是否要显示
startCollapsed: false, //一开始进到grid这页,它的group是合起还是展开
scrollOffset: -1, //为垂直的scrollbar留下的space(默认是19px)

3.在单元格中添加图片:
在Ext.grid.ColumnModel中对应于加图片的列,用它的render链接到一个函数进行添加。如:
var colModel = new Ext.grid.ColumnModel([
{header:”com”, render: AddImgs.createDelegate(this)},
{header:”test”, width:200, sortable:false}
]);
响应函数如下:
AddImgs = function(value,p,record){
if(record.data.descrip != "")
{
p.attr='ext:qtip="Add to playlist" style="background-image:url(/imgs/icn_view.gif) !important; background-position: center 2px; background-repeat: no-repeat;cursor: pointer;"';
}
}
函数中的record.data是grid的数据,而着色的就是要添加的图片的路径和图片名。

4.当显示内容的字数超过单元格可以显示的字数时,如何让其自动换行(how to wrap text when the length of characters is more than the width of the column):
设置这些单元格的所用类的css即可。 如:
.x-grid3-cell-inner{
white-space:normal;
overflow:visible;
}
需要注意的是:overflow的默认值是hidden. 当加上white-space之后,本来wrap就可以了,但是单元格的高度还是一行的高度,所以数据除了第一行,其它都看不到。只有把overflow的值改为visible后,单元格所在行的高度才会随着数据的行数而调整。

5.当一开始进入页面时,让所有的group除了第一个group展开(collapsed)外,其它的group都合上(folded):
首先通过设置属性startCollapsed让所有group都合上: startCollapsed:true;
然后在store.load({callback: function(records,o,s) {ToggleFirstGroup();} })中调用函数把第一个group展开:
//gridView是该grid所用的view, 如(var gv = new Ext.grid.GroupingView({});).

function ToggleFirstGroup(gridView) 
{ 
var grNum = gridView.getGroups().length; 
for (var i = 0; i < grNum ; i++) 
{ 
var firstGroupID = gridView.getGroups()[i].id; 
if(firstGroupID && firstGroupID != "") 
{ 
gridView.toggleGroup(firstGroupID); 
break; 
} 
} 
}

6.date format: 数据为9/24/2008
1).这种format的结果是:Web Sep 24 00:00:00 UTC+0800 2008
{
header: dHeader,
width: 90,
sortable: true,
dateFormat: 'Y-m-d', //dateFormat是'm/d/Y'的话,得到的结果一样
dataIndex: 'date'
},
2). 这种format的结果是: 2008-09-24
{
header: dHeader,
width: 90,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d'), //format是'm/d/Y',结果是”09/24/2008”
dataIndex: 'date'
},
找到的一些关于Class Date的format及其输出的描述(http://extjs.com/deploy/ext/docs/output/Date.html):
****************************
Format Output Description
------ ---------- --------------------------------------------------------------
d 10 Day of the month, 2 digits with leading zeros
D Wed A textual representation of a day, three letters
j 10 Day of the month without leading zeros
l Wednesday A full textual representation of the day of the week
S th English ordinal day of month suffix, 2 chars (use with j)
w 3 Numeric representation of the day of the week
z 9 The julian date, or day of the year (0-365)
W 01 ISO-8601 2-digit week number of year, weeks starting on Monday (00-52)
F January A full textual representation of the month
m 01 Numeric representation of a month, with leading zeros
M Jan Month name abbreviation, three letters
n 1 Numeric representation of a month, without leading zeros
t 31 Number of days in the given month
L 0 Whether it's a leap year (1 if it is a leap year, else 0)
Y 2007 A full numeric representation of a year, 4 digits
y 07 A two digit representation of a year
a pm Lowercase Ante meridiem and Post meridiem
A PM Uppercase Ante meridiem and Post meridiem
g 3 12-hour format of an hour without leading zeros
G 15 24-hour format of an hour without leading zeros
h 03 12-hour format of an hour with leading zeros
H 15 24-hour format of an hour with leading zeros
i 05 Minutes with leading zeros
s 01 Seconds, with leading zeros
O -0600 Difference to Greenwich time (GMT) in hours
T CST Timezone setting of the machine running the code
Z -21600 Timezone offset in seconds (negative if west of UTC, positive if east)
**********************************
下面是一些format的格式及其对应结果:数据同上,用renderer: Ext.util.Format.dateRenderer(format)
“Y-m-d” --> 2008-09-24
“y-m-d” --> 08-09-24
“F j, Y” --> September 24, 2008
“F j, y” --> September 24, 08
“F j, Y, g:i A” --> September 24, 2008, 12:00 AM
Javascript 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
js获取UserControl内容为拼html时提供方便
Nov 02 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
详解Angular 4.x Injector
May 04 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
用jquery ajax获取网站Alexa排名的代码
Dec 12 #Javascript
jValidate 基于jQuery的表单验证插件
Dec 12 #Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 #Javascript
Ext.MessageBox工具类简介
Dec 10 #Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 #Javascript
js 与或运算符 || &amp;&amp; 妙用
Dec 09 #Javascript
测试你的JS的掌握程度的代码
Dec 09 #Javascript
You might like
flash用php连接数据库的代码
2011/04/21 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Django日志模块logging的配置详解
2017/02/14 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
python Web开发你要理解的WSGI &amp; uwsgi详解
2018/08/01 Python
python环形单链表的约瑟夫问题详解
2018/09/27 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
留学生求职信
2014/06/03 职场文书
运动会的口号
2014/06/09 职场文书
办理护照工作证明
2014/10/10 职场文书
关于召开会议的通知
2015/04/15 职场文书
公司管理制度范本
2015/08/03 职场文书
入团申请书格式
2019/06/20 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS