可编辑表格EditGridPanel

最新推荐文章于 2018-10-31 21:59:00 发布

炫街舞

最新推荐文章于 2018-10-31 21:59:00 发布

阅读量202

点赞数

分类专栏： Extjs 文章标签： EXT J# HTML

本文链接：https://blog.youkuaiyun.com/xuanjiewu/article/details/83837149

版权

Extjs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何利用ExtJS框架创建一个包含学生基本信息的可编辑表格，并详细展示了配置JsonStore数据存储、ColumnModel列模型及EditorGridPanel网格面板的具体过程。

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

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/test/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/test/extjs/ext-all.js"></script>
<script type="text/javascript" src="/test/extjs/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/test/extjs/resources/css/ext-all.css">
<script type="text/javascript">
Ext.onReady(function(){
var data = [
{id:1,name:'小王',sex:'男',email:'xiaowang@easyjf.com',bornDate:'1991-5-5'},
{id:1,name:'小李',sex:'男',email:'xiaoli@easyjf.com',bornDate:'1992-5-6'},
{id:1,name:'小兰',sex:'女',email:'xiaolan@easyjf.com',bornDate:'1990-2-3'}
];
var store = new Ext.data.JsonStore({
data:data,
fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]
});

var colM = new Ext.grid.ColumnModel([
{ header:"姓名",
dataIndex:"name",
sortable:true,
editor:new Ext.form.TextField()},
{ header:"性别",
dataIndex:"sex",
editor: new Ext.form.ComboBox({
transform:"sexList",
triggerAction:'all',
lazyRender:true
})},
{ header:"出生日期",
dataIndex:"bornDate",
width:120,
renderer:Ext.util.Format.dateRenderer('Y年m月d日'),
editor: new Ext.form.DateField({format:'Y年m月d日'}) },
{ header:"电子邮件",
dataIndex:"email",
sortabel:true,
editor: new Ext.form.TextField()}
]);

var grid = new Ext.grid.EditorGridPanel({
renderTo:"hello",
title:"学生基本信息管理",
height:200,
width:600,
cm:colM,
store:store,
autoExpandColumn:3,
clicksToEdit:2
});

});

</script>

</head>
<body>
<div id="hello" style="margin-left:50px; margin-top:10px; align:center;"></div>
<select id="sexList">
<option>男</option>
<option>女</option>
</select>
</body>

</html>