本文展示了一个使用ExtJS框架创建属性表格的具体示例。该示例通过定义一个包含特定属性（如StartTime）的表格，并允许用户编辑这些属性。代码中还包含了如何设置表格样式、编辑器以及监听事件的方法。
<!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>
<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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
