Ext Js 3.2自定义编辑器
1：为了方便修改属性信息，我们可以自定义一些编辑器，如自定义一些日期，性别，时间编辑器等，自定义编辑器需要用到PropertyGrid的customEditors
代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>gridPanel</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var grid = new Ext.grid.PropertyGrid({
title: 'PropertyGrid实例',
width: 300,
height: 200,
frame: true,
source: {
"员工名称": '张三',
"出生日期": new Date(1978, 01, 02),
"性别": '男',
"是否已婚": true,
"年龄": 31
},
customEditors: {
"性别": new Ext.grid.GridEditor(new Ext.form.ComboBox({
editable: false,
displayField: 'sex',
mode: 'local',
triggerAction: 'all',
store: new Ext.data.SimpleStore({
fields: ['sex'],
data: [['男'], ['女']]
})
}))
},
//内置的日期编辑器有bug，自定义日期字段的编辑器可解决
"出生日期": new Ext.grid.GridEditor(new Ext.form.DateField({
format: 'Y年m月d日',
selectOnFocus: true,
allowBlank: false
}))
});
//内置的日期字段格式是m/j/Y，如果需要改变默认格式则需要通过取得表格的列模式来实现
grid.getColumnModel().dateFormat = 'Y年m月d日';
grid.render('cumGrid')
});
</script>
</head>
<body>
<div id="cumGrid"> </div>
</body>
</html>
2：效果图：
上述代码通过customEditors属性自定义了性别编辑器，出生日期编辑器