ExtJS5实战技巧

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

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

1、允许grid表格文本复制
[cc lang=”javascript” escaped=”true”]viewConfig : {enableTextSelection:true}[/cc]

2、只允许CheckBox选中，并且支持反选
[cc lang=”javascript” escaped=”true”]selModel: {
selType: ‘checkboxmodel’,
mode:’SINGLE’,
allowDeselect : true, //支持反选
checkOnly:true //只允许CheckBox选中，不支持单选行选中
},[/cc]

3、根据行内容改变行颜色
[cc lang=”css” escaped=”true”].x-grid-record-red {
background: #FF0000; //修改背景颜色
color:#000000; //修改字体颜色
}[/cc]

[cc lang=”javascript” escaped=”true”]viewConfig : {
getRowClass : function(record,rowIndex,rowParams,store){
//失败数据显示红色
if(record.data.status==’0′){
return ‘x-grid-record-red’;
}else{
return ”;
}
}
}[/cc]

4、向Ajax请求的store添加数据
[cc lang=”javascript” escaped=”true”]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’:’雷雪松’}));
}
},
})[/cc]

5、Ext grid字段渲染
[cc lang=”javascript” escaped=”true”]{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 ‘未知’}}},[/cc]

6、Ext对象和URL参数相互转换。网上说的都是Ext.urlDecode 和Ext.urlEncode。不过查阅ExtJS5官方文档显示这两个函数已经废弃了，使用Ext.Object.fromQueryString和Ext.Object.toQueryString两个方法。
[cc lang=”javascript” escaped=”true”]
Ext.Object.toQueryString({name: “raykaeso”, age: 18}); // returns “name=raykaeso&age=18”
Ext.Object.fromQueryString(“name=raykaeso&age=18”); // returns {name: “raykaeso”, age: 18}[/cc]

7、Ext Grid 汇总(Summary)用法
[cc lang=”javascript” escaped=”true”]
features: [{
ftype: ‘summary’
}],
columns: [{
dataIndex: ‘student’,
text: ‘Name’,
summaryType: ‘count’,
summaryRenderer: function(value, summaryData, dataIndex) {
return ‘总计’+value;
}
}, {
dataIndex: ‘mark’,
text: ‘Mark’,
summaryType: ‘average’
}][/cc]

来源：ExtJS5实战技巧