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优化技巧(文件瘦身篇)
Jan 28 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
潜说js对象和数组
May 25 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
浅谈键盘上回车按钮的js触发事件
Feb 13 Javascript
JavaScript的继承实现小结
May 07 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
详解Vue路由自动注入实践
Apr 17 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
AJAX检测用户名是否存在的方法
Mar 24 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
用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 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
bootstrap中的 form表单属性role=&quot;form&quot;的作用详解
2017/01/20 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
python连接、操作mongodb数据库的方法实例详解
2019/09/11 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
支行行长竞聘报告
2014/11/06 职场文书
学校实习推荐信
2015/03/27 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
2015年法务工作总结范文
2015/05/23 职场文书
公司规章制度范本
2015/08/03 职场文书
2016新年晚会开场白
2015/12/03 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python