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 delete 属性的使用
Oct 08 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
JavaScript console的使用方法实例分析
Apr 28 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 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
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
php 清除网页病毒的方法
2008/12/05 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
详解JS中的快速排序与冒泡
2017/01/10 Javascript
深入理解ES6 Promise 扩展always方法
2017/09/26 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
js实现随机8位验证码
2020/07/24 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Python中encode()方法的使用简介
2015/05/18 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
10个Python小技巧你值得拥有
2018/09/29 Python
食堂采购员岗位职责
2014/03/17 职场文书
企业环保标语
2014/06/10 职场文书
法制宣传口号
2014/06/16 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
党性分析材料格式
2014/12/19 职场文书
检讨书格式
2015/05/07 职场文书
心术观后感
2015/06/11 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL