ExtJS5实战技巧
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实战技巧
2017年4月3日 下午3:29
这个好,正需要,帮我解决了问题,感谢!