ExtJS5实战技巧

WEB前端

ExtJS是一个用Javascript写的富客户端的AJAX框架,主要用于创建前端用户界面,是一个与后台语言无关的前端框架。ExtJS包含多达40种的常用组件,大致分成三大类,即基本组件、工具栏组件、表单及元素组件。下面PHP程序员雷雪松给大家分享一下使用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

    这个好,正需要,帮我解决了问题,感谢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注