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 图片缩放效果代码
Jun 09 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
vue axios登录请求拦截器
Apr 02 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php缓存技术介绍
2006/11/25 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
php 中的closure用法详解
2017/06/12 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python进阶教程之词典、字典、dict
2014/08/29 Python
Python常用模块介绍
2014/11/21 Python
Python中关于浮点数的冷知识
2019/09/22 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
python实现简单飞行棋
2020/02/06 Python
Python+Opencv实现把图片、视频互转的示例
2020/12/17 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
物流仓储计划书
2014/01/10 职场文书
工商管理本科生求职信
2014/07/13 职场文书
建设办主任四风问题整改思路和措施
2014/09/20 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
入党函调证明材料
2015/06/19 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
小学作文之描写天气
2019/08/15 职场文书