Ext Js 3.2自定义编辑器

来源：互联网发布：windows phone刷机包编辑：程序博客网时间：2024/05/16 06:52

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属性自定义了性别编辑器，出生日期编辑器