ExtJS5实战技巧

WEB前端 JS开发 2017年3月22日

ExtJS是一个用Javascript写的富客户端的AJAX框架，主要用于创建前端用户界面，是一个与后台语言无关的前端框架。ExtJS包含多达40种的常用组件，大致分成三大类，即基本组件、工具栏组件、表单及元素组件。下面雷雪松给大家分享一下使用ExtJS5开发的实战技巧。

1、允许grid表格文本复制

1	viewConfig : {enableTextSelection:true}

2、只允许CheckBox选中，并且支持反选

1
2
3
4
5
6

selModel: {
selType: 'checkboxmodel',
mode:'SINGLE',
allowDeselect : true, //支持反选
checkOnly:true //只允许CheckBox选中，不支持单选行选中
},

3、根据行内容改变行颜色

1
2
3
4

.x-grid-record-red {
background: #FF0000; //修改背景颜色
color:#000000; //修改字体颜色
}

1
2
3
4
5
6
7
8
9
10

viewConfig : {
getRowClass : function(record,rowIndex,rowParams,store){
//失败数据显示红色
if(record.data.status=='0'){
return 'x-grid-record-red';
}else{
return '';
}
}
}

4、向Ajax请求的store添加数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

store: new Ext.data.Store({
singleton: true,
proxy: {
type: 'ajax',
api: {
read: path + 'data/read'
},
reader: {
type: 'json',
rootProperty: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
rootProperty: 'data',
encode: true
},
},
fields: ['name', 'value'],
autoLoad: true,
listeners: {
load: function( store , records ) {
store.add(new Ext.data.Store({'name':'raykaeso', 'value':'雷雪松'}));
}
},
})

5、Ext grid字段渲染

1 2	{header: '交易状态', width:100, dataIndex: 'status', align: 'center',renderer: function(value,meta,record){if(value==0){return '成功'} else if(value==1){return '失败'}else if(value==0){return '成功'}else{return '未知'}}},

6、Ext对象和URL参数相互转换。网上说的都是Ext.urlDecode 和Ext.urlEncode。不过查阅ExtJS5官方文档显示这两个函数已经废弃了，使用Ext.Object.fromQueryString和Ext.Object.toQueryString两个方法。

1 2	Ext.Object.toQueryString({name: "raykaeso", age: 18}); // returns "name=raykaeso&age=18" Ext.Object.fromQueryString("name=raykaeso&age=18"); // returns {name: "raykaeso", age: 18}

7、Ext Grid 汇总(Summary)用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

features: [{
ftype: 'summary'
}],
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return '总计'+value;
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}]

来源：ExtJS5实战技巧

“ExtJS5实战技巧” 评论

葫芦岛网站建设评论:
2017年4月3日下午3:29

这个好，正需要，帮我解决了问题，感谢！

雷雪松的个人blog

雷雪松的博客，一个优秀的个人技术博客。

ExtJS5实战技巧

“ExtJS5实战技巧” 评论

发表回复