extjs项目积累

①extjs的字符串工具方法

1、ellipsis(String value,Number length)----截取字符串

[javascript] view plain copy

1. Ext.onReady(function (){

2. var v="这是一个测试4567878974";

3. Ext.MessageBox.alert("ellipsis",Ext.util.Format.ellipsis(v,10));

4. });

截取v变量中的7个字，然后会在这7个字后面加上3个点，加起来一共10位；

2、Ext.util.Format.undef: ------将null装换成空字符串

[javascript] view plain copy

5. Ext.onReady(function (){

6. var v=null;

7. Ext.MessageBox.alert("undef",Ext.util.Format.undef(v));

8. });

3、Ext.util.Format.defaultValue:如果为空则赋默认值

[javascript] view plain copy

9. Ext.onReady(function (){

10. var v=;

11. Ext.MessageBox.alert("defaultValue",Ext.util.Format.defaultValue(v,"这是默认值"));

12. });

4、Ext.util.Format.htmlEncode:将变量原样输出，而不进行html的解析

[javascript] view plain copy

13. Ext.onReady(function (){

14. var v="<a href=''>这是一个测试</a>";

15. Ext.MessageBox.alert("htmlEncode",Ext.util.Format.htmlEncode(v));

16. //Ext.MessageBox.alert("",v);

17. });

5、Ext.util.Format.htmlDecode:与htmlEncode相反，进行html的解析

[javascript] view plain copy

18. Ext.onReady(function (){

19. var v="<a href=''>这是一个测试</a>";

20. Ext.MessageBox.alert("htmlDecode",Ext.util.Format.htmlDecode(v));

21. //Ext.MessageBox.alert("",v);

22. });

6、Ext.util.Format.trim(String value):将字符串前后的空格删掉

[javascript] view plain copy

23. Ext.onReady(function (){

24. var v=" 这是测试 ";

25. Ext.util.Format.trim(v)

26. });

7、Ext.util.Format.substr(String value,Number start,Number lenght)：截取字符串

[javascript] view plain copy

27. Ext.onReady(function (){

28. var v="这是一个测试";

29. Ext.MessageBox.alert("substr",Ext.util.Format.substr(v,1,5));

30. });

8、Ext.util.Format.lowercase(String value):将字符串转成小写

[javascript] view plain copy

31. Ext.onReady(function (){

32. var v="ABC";

33. Ext.MessageBox.alert("lowercase",Ext.util.Format.lowercase(v));

34. });

9、Ext.util.Format.uppercase(String value):将字符串转成大写

[javascript] view plain copy

35. Ext.onReady(function (){

36. var v="abc";

37. Ext.MessageBox.alert("uppercase",Ext.util.Format.uppercase(v));

38. });

10、Ext.util.Format.capitalize(String value):第一个字母大写，其他字母小写

[javascript] view plain copy

39. Ext.onReady(function (){

40. var v="aBC";

41. Ext.MessageBox.alert("capitalize",Ext.util.Format.capitalize(v));

42. });

11、Ext.util.Format

来源： http://blog.csdn.net/bzuld/article/details/8969770

.date(Mixed value,[String format]):将某个值解析成为一个特定格式的日期

[javascript] view plain copy

43. Ext.onReady(function (){

44. //Y:年;m:月;d:天;H:24小时制的小时;h:12小时制的小时;i:分;s:秒

45. var v=new Date();

46. Ext.MessageBox.alert("date",Ext.util.Format.date(v,'Y-m-d H:i:s'));

47. });

12、Ext.util.Format.skipTags(Mixed value):剥去value的html标签，只剩下文本内容

[javascript] view plain copy

48. Ext.onReady(function (){

49. var v="<a href=''>这是测试</a>";

50. Ext.MessageBox.alert("substr",Ext.util.Format.stripTags(v));

51. });

② 自定义校验：Ext.apply(Ext.form.VTypes, {

52. password : function(val, field) {// val指这里的文本框值，field指这个文本框组件，大家要明白这个意思

53. if (field.confirmTo) {// confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值

54. var pwd = Ext.get(field.confirmTo);// 取得confirmTo的那个id的值

55. return (val == pwd.getValue());

56. }

57. return true;

58. }

59. });

60. // 配置items参数

61. items : [{

62. fieldLabel : "密码",

63. id : "pass1"

64. }, {

65. fieldLabel : "确认密码",

66. id : "pass2",

67. vtype : "password",// 自定义的验证类型

68. vtypeText : "两次密码不一致！",

69. confirmTo : "pass1"// 要比较的另外一个的组件的id

70. }];

④图片上传

1.前台的写法

{

xtype:'fileuploadfield',

id:'hx_file_form',

name:'file',emptyText:'--请选择图片--',

fieldLabel:'文件上传',

buttonText:'浏览……',

style:{

marginBottom:'15px'

}

2.后台的写法，springmvc

/**

* 增加财务确认信息

* @param pageRequest

* @return

@SuppressWarnings("rawtypes")

@RequestMapping("/addFinancialConfirmationInformation")

@ResponseBody

@OperationDescription(type = OperationType.PAGE_INSERT, ignoreParam = false, ignoreResult = true)//定义controller方法的操作类型

public Object addFinancialConfirmationInformation(CommonsMultipartFile file，HttpServletRequest request, HttpServletResponse response, LendingConfirm lendingConfirm) {

logger.info("-----------LoanReconciliationController:addFinancialConfirmationInformation begin------------------");

String selectedData = request.getParameter("selectedData");

JSONArray jsonArray = JSONArray.fromObject(selectedData);

@SuppressWarnings({ "deprecation", "unchecked" })

List<LoanReconciliationVo> list = JSONArray.toList(jsonArray, LoanReconciliationVo.class);

@SuppressWarnings("unused")

Map<String, Object> map = new HashMap<String, Object>();

Date createdTime = new Date();

ExtReturn o = new ExtReturn();

// 目录命名格式如：*files2013-03-05-22

// SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd");

// // 构建图片保存的目录

// String logoPathDir = "/upload/file" + dateformat.format(new Date());

// // 得到图片保存目录的真实路径

// String logoRealPathDir = request.getSession().getServletContext().getRealPath(logoPathDir);

// // 根据真实路径创建目录

// File logoSaveFile = new File(logoRealPathDir);

// if (!logoSaveFile.exists()) {

// logoSaveFile.mkdirs();

// }

// // 页面控件的文件流

// // 获取文件名/

// String filename = multipartFile.getOriginalFilename();

// long time = createdTime.getTime(); // 时间

// int index = filename.lastIndexOf(".");

// if (index == -1) {

// filename = filename + "-" + time; // 文件名

// logger.info("文件名：" + filename);

// } else {

// filename = filename.substring(0, index) + "-" + time + filename.substring(index);

// logger.info("文件名：" + filename);

// }

// // 拼成完整的文件保存路径加文件

// String fileName = logoRealPathDir + File.separator + filename;

// 保存路径

// lendingConfirm.setPicturePath(logoRealPathDir);

// 保存文件名

// lendingConfirm.setFileName(filename);

// 财务确认状态设置为1

lendingConfirm.setFinancialStatus(1);

// File file = new File(fileName);

// // 保存上传文件

try {

// multipartFile.transferTo(file);

// logger.info(filename + "上传成功！！！");

// // 插入数据库

@SuppressWarnings("unused")

ResponseData result = loanReconciliationService.addFinancialConfirmationInformation(lendingConfirm, list);

return result;

// o.setSuccess(true);

// o.setMsg("操作成功，已导入" + list.size() + "条数据！");

} catch (Exception e) {

o.setSuccess(false);

o.setMsg("文件上传失败");

logger.error("异常出现：" + e);

}

// try {// 对于图片上传的formpanel，返回数据要用getwriter进行打印到页面，否则不能识别success：true

// JSONObject object = JSONObject.fromObject(o);

// response.setContentType("text/html;charset=utf-8");

// response.getWriter().print(object.toString());

// } catch (IOException e) {

// e.printStackTrace();

// o.setSuccess(false);

// o.setMsg("上传失败！");

// }

logger.info("-----------LoanReconciliationController:addFinancialConfirmationInformation end------------------");

return null;

}

解决extjs grid文字不能选中的问题

Css代码

71. .x-selectable, .x-selectable * {

72. -moz-user-select: text!important ;

73. -khtml-user-select: text!important ;

74. }

Javascript代码

75. // enable grid cell to be selected in chrome(x-selectable)/firefox(x-selectable)/IE(unselectable)

76. Ext.grid.GridView.prototype.cellTpl = new Ext.Template(Ext.grid.GridView.prototype.cellTpl.html

77. .replace('unselectable="on"', '').replace('class="',

78. 'class="x-selectable '))

extjs的combox的静态和动态的写法：

静态：

, {

xtype : 'combo',

id : 'repayState',

name : 'repayState',

emptyText : "全部",

fieldLabel : '还款类型',

width : 140,

store : new Ext.data.SimpleStore({

fields : ['repayStateKey',

'repayStateValue'],

data : [

['-1', "全部"],

['5', '正常还款'],

['1', '部分退货结清'],

['2', '全部退货结清'],

['0', '正常提前结清'],

['4','部分提前']

]

}),

mode : 'local',

triggerAction : 'all',

displayField : 'repayStateValue',

valueField : 'repayStateKey',

listeners : {

load : function(store, records, options) {

Ext.getCmp('repayState')

.setValue(records[0]

.get('repayStateKey'));

'change' : function(newV, old) {

pageQueryStore.baseParams.repayState = newV

.getValue();

}

动态：

{

xtype : 'combo',

id : 'repayState',

hiddenName : 'repayState',

fieldLabel : '还款类型',

emptyText : "全部",

labelStyle : "text-align:right",

store : new Ext.data.Store({

id : 'repayStateStore',

proxy : new Ext.data.HttpProxy({

url : __ctxPath

+ '/dict/getRepayTypes?nodeCode=HKLX'

}),

reader : new Ext.data.JsonReader({},

Ext.data.Record.create([{

name : 'itemCode'

}, {

name : 'itemName'

}]))

}),

mode : 'remote',

triggerAction : 'all',

displayField : 'itemName',

valueField : 'itemCode'

// ,

// listeners : {// select监听函数

// afterrender : function() {

// orgProductStore.load();

// }

}

grid的行号宽度不够的改法：

new Ext.grid.RowNumberer({

region:'center',

width:35,

css:"background-image:none;background-color:#EDEEF0;"

})

关于formpanel提交以后总是提示e.result错误的消息，是因为formpanel的timeout超时问题

在用EXTJS 提交表单数据，

[javascript] view plain copy

print?

79. if (form.form.isValid()) {

80. form.form.submit( {

81. waitTitle: '提示',

82. waitMsg : '正在保存数据，请稍后...',

83. url : '/xxx',

84. timeout:36000, //seconds

85. method: 'POST',

86. success : function(form, action) {

87. Ext.Msg.alert('保存成功', action.result.data);

88. win.hide();

89. },

90. failure : function(form, action) {

91. Ext.Msg.alert('保存失败', action.result.data);

92. }

93. });

94. }

后台返回格式为 {success:true,data:'任务提交结果!共1个.成功1 失败0 !'}

没有加 timeout 属性时，添加小任务程序没有问题，批量添加时，会发现后台已经运行完毕，但是界面卡住。

以为是后台返回的数据格式不正确，或者抛出异常导致没有提供返回值给前端，后来排除了原因，发现应该是一个超时的问题，添加后解决。

timeout : Number

Timeout for form actions in seconds.

Defaults to: 30

http://blog.csdn.net/bingyupj/article/details/8290530

国美资管系统图标所在位置admin.css

日期的renderer：

renderer : function(value) {

if (value == null || value == 0) {

return "";

}

return new Date(value).format("Y-m-d H:i:s");

}

保留小数的renderer：

renderer : function(value) {

return Ext.util.Format.number(value, '0.0000');// 控制精度保留四位小数

}

每三为小数加分割符的renderer：

//千分位，保留两位小数

function getThousand(value) {

if (value == null || value == 0) {

return "0.00";

} else {

var radix=parseFloat(value).toFixed(2)+'';//保留两位小数

var thousand =radix.replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');//千分位格式化

return thousand;

}

extjs EditorGridPanel禁止某些单元格编辑

给EditorGridPanel加上listeners

[javascript] view plain copy

95. 'cellclick' : function(grid, rowIndex, columnIndex, e) {

96. var record = grid.getStore().getAt(rowIndex);

97. if(record.get('editable') == 'N' && columnIndex == 2）

98. return false;

99. }

设置editable==‘N’的记录的第三列不能编辑。

需配合clicksToEdit属性，为1时修改cellclick事件，2时为celldblclick

对editgrid的监听

this.gridPanel.on('afteredit', function(editor, e) {

editor.record.set('phasePlannedPrinciple', Ext.util.Format.number(

editor.record.data.phasePlannedPrinciple, '0.00')); // 设置代偿本金的保留小数是两位

editor.record.set('phasePlannedInterest', Ext.util.Format.number(

editor.record.data.phasePlannedInterest, '0.00')); // 设置代偿利息的保留小数是两位

editor.record.set('phasePlannedOverdueFine', Ext.util.Format.number(

editor.record.data.phasePlannedOverdueFine, '0.00')); // 设置代偿罚息的的保留小数是两位

editor.record.set('totalCompensation', Ext.util.Format.number(

Number(editor.record.data.phasePlannedPrinciple)

+ Number(editor.record.data.phasePlannedInterest)

+ Number(editor.record.data.phasePlannedOverdueFine),

'0.00')); // 设置代偿总额保留两位小数

});

this.gridPanel.on('beforeedit', function(editor, e, eOpts) {

if (editor.row == 1) {

// alert("123");

return false;// 不可编辑

} else {

return true;// 可编辑

}

});

对于extjs传入的特殊时间格式：

例如：2017-08-26T00:00:00

转换时要把转换格式设置成：

"yyyy-MM-dd'T'HH:mm:ss"

DateUtils.parseStringToDate(indTime, "yyyy-MM-dd'T'HH:mm:ss");

public static Date parseStringToDate(String date, String format) {

DateFormat df = new SimpleDateFormat(format);

Date nowDate = null;

try {

nowDate = df.parse(date);

} catch (ParseException e) {

log.error("无法解析" + date, e);

}

return nowDate;

}

对于extjs中对字符串判空的工具方法

100./判断对象是否为空

Ext.isEmpty(panel)

101.//当判断字符串时如果第二个参数不不同时结果也会不同

Ext.isEmpty(“”,true)//为tue表示允许为空

Ext.isEmpty(”“,false)//为false表示不允许为空

102.//第二个参数表示’是否允许字符串为空’

对列序号的设置

new Ext.grid.RowNumberer({header:'序号',width:50})

var a = new Ext.grid.ColumnModel({

columns : [e, new Ext.grid.RowNumberer({header:'序号',width:50}), {

header : "id",

dataIndex : "id",

hidden : true

}, {

header : "渠道简称",

dataIndex : "conChlShortName",

width : 80,

align : "left"

} ],

defaults : {

sortable : true,

menuDisabled : true,

width : 60,

autoScroll : true

}

});

Extjs保留小数

Ext.util.Format.round(value, precision);//四舍五入，precision指精确位数

extjs的grid的排序：

grid支持两种排序方法

一种是前端排序，不请求后台本页面列字段进行排序，在grid的列中设置属性sortable: true,

第二种排序是后台排序，请求后台对整个数据进行排序，在store中设置属性remoteSort: true,

第一种排序代码：

var grid = Ext.create('Ext.grid.Panel', { title: '任务计划管理列表', region: 'center', store: store, columns: [ { header: '任务名称', sortable: true, //设置这个属性进行排序 dataIndex: 'task_name' }] });

第二种后来排序代码：

var store = Ext.create('Ext.data.ArrayStore', { model: 'Task', autoLoad: true, pageSize: 20, // 设置服务器端映射。 proxy: { type: 'ajax', url: 'task/getTaskInfo', // 定义数据结构 reader: { type: 'json', totalProperty: 'totalProperty', root: 'root' } }, remoteSort: true //设置属性进行请求后台排序 })

后台java中会接收到几个固定的字符串

json格式的名为sort的字符串里面包括两个属性一个是property是要排序的字段名，另一个是direction里面会有两个值（ ASC 或DESC ）我是用google的开源解析json的工具包gson来对其进行解析，代码如下：

public static Map<String,String> getSort(String sort){ Gson gson = new Gson(); Map<String,String> map = new HashMap<String,String>(); if(sort == null || "".equals(sort)){ map.put("direction",""); map.put("property", ""); }else{ List<SortData> sortData = gson.fromJson(sort, new TypeToken<List<SortData>>(){}.getType()); map.put("direction", sortData.get(0).getDirection()); map.put("property", sortData.get(0).getProperty()); } return map; }

取得数据的代码片段如下：

if(sort != null){ Map<String,String> map = new HashMap<String,String>(); map = CommonUtils.getSort(sort); String property = map.get("property");//排序的字段名和前台mode中字段名一致 String direction=map.get("direction");//字符串（ ASC 或DESC ） }

然后请求后台数据库进行排序，在制造的时候前台的字段名尽量和数据库的字段名保持一致，这样方便了很多东西。

一起同store请求传过来的参数还有名为start的int型参数，名为limit的int型数据，他们是分页条件，start是开始记录数，limit是本页最大记录数。

猜你喜欢