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 相关文章推荐
jquery tab插件精简版分享
Sep 10 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
Javascript函数的参数
Jul 16 Javascript
Javascript之Date对象详解
Jun 07 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
Aug 30 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
vue页面切换过渡transition效果
Oct 08 Javascript
如何能分清npm cnpm npx nvm
Jan 17 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 Javascript
用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
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
PHP 断点续传实例详解
2017/11/11 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
JS中常用的消息框总结
2018/02/24 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
回顾Javascript React基础
2019/06/15 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
浅析Python中的多重继承
2015/04/28 Python
详解Python 解压缩文件
2019/04/09 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
linux 下selenium chrome使用详解
2020/04/02 Python
python 实现两个线程交替执行
2020/05/02 Python
将keras的h5模型转换为tensorflow的pb模型操作
2020/05/25 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
python如何调用php文件中的函数详解
2020/12/29 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
会计系毕业生求职信
2014/05/28 职场文书
淘宝店策划方案
2014/06/07 职场文书
消防安全宣传口号
2014/06/10 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python