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 相关文章推荐
Javascript Object.extend
May 18 Javascript
通过url查找a元素并点击
Apr 09 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
Oct 10 Javascript
layui文件上传实现代码
May 20 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
js实现随机8位验证码
Jul 24 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
js+css3实现炫酷时钟
Aug 18 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
PHP 中 DOMDocument保存xml时中文出现乱码问题的解决方案
2016/09/19 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Django封装交互接口代码
2020/07/12 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
超市实习总结自我鉴定
2013/09/19 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
2014校长四风问题对照检查材料思想汇报
2014/09/16 职场文书
国庆横幅标语
2014/10/08 职场文书
股权投资协议书
2016/03/23 职场文书