extjs-grid:自定义编辑器，以时间列为例

最新推荐文章于 2019-07-17 04:17:01 发布

最新推荐文章于 2019-07-17 04:17:01 发布 · 195 阅读

文章标签：

#EXT #HTML

AJAX—EXT2.0 专栏收录该内容

6 篇文章

订阅专栏

本文展示了一个使用ExtJS框架创建属性表格的具体示例。该示例通过定义一个包含特定属性（如StartTime）的表格，并允许用户编辑这些属性。代码中还包含了如何设置表格样式、编辑器以及监听事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>

<body>

<br>
<script>

Ext.onReady(function(){

//定义表格
var grid = new Ext.grid.PropertyGrid({
title:'属性表格',
renderTo: 'grid',
width:300,
autoHeight: true,
customEditors: {
'Start Time':new Ext.grid.GridEditor(new Ext.form.TimeField({selectOnFocus:true}))
},
source: {
'Start Time':'10:00 AM'
}

});

//可选的。用来控制VALUE是不是可修改的
grid.on("beforeedit",function(e) {
e.cancel = false;
return true;
});

});

</script>

<table border="1" align="center">
<tr>
<td><font color="red">PropertyGrid表格样式如下：</font></td>
</tr>
<tr>
<td><div id="grid" > </div></td>
</tr>
<tr>
<td><input type="submit" id="remove" value="提交内容"/></td>
</tr>

</table>
</body>
</html>