Extjs Grid 编辑 新增 删除 保存

//创建edgrid.js

Ext.onReady(function(){

Ext.QuickTips.init();

// 格式化日期显示

function formatDate(value){

return value ? value.dateFormat('Y, M d') : '';

}

// 格式化性别显示,这是个 renderer, 渲染器

function formatSex(value) {

return value ? "男" : "女";

}

// 弄个缩写的别名

var fm = Ext.form;

// 列模型定义了表格所有列的信息,

// dataIndex 将特定的列映射到数据源(Data Store)中的数据列(在后面创建)

var cm = new Ext.grid.ColumnModel([

{

id:'id',

header: "编号",

dataIndex: 'id',

width: 50

},

{

id:'name',

header: "用户名",

dataIndex: 'name',

width: 250,

editor: new fm.TextField({

allowBlank: false// 不能为空

})

},

{

header: "地区",

dataIndex: 'area',

width: 100,

editor: new Ext.form.ComboBox({

typeAhead: true,

triggerAction: 'all',

transform:'area',// 对应的选择框的ID

lazyRender:true,

listClass: 'x-combo-list-small'

})

},

{

header: "电子邮件",

dataIndex: 'email',

width: 220,

align: 'left',

editor: new fm.TextField({

allowBlank: true

})

},

{

header: "年龄",

dataIndex: 'age',

width: 70,

align: 'right',

editor: new fm.NumberField({

allowBlank: true,

allowNegative: false,

maxValue: 100

})

},

{

header: "生日",

dataIndex: 'birthDay',

width: 95,

renderer: formatDate,

editor: new fm.DateField({

format: 'y/m/d',

minValue: '1970/01/01',//最小值

disabledDays: [0, 6],// 禁止选择的日期

disabledDaysText: '不许周末出生孩子'

})

},

{

header: "性别",

dataIndex: 'sex',

width: 95,

renderer: formatSex,

editor: new fm.Checkbox()

}

]);

// 默认情况下列是可排序的

cm.defaultSortable = true;

// 定义一个用户对象,这样便于我们动态的添加记录,虽然也可以设置成匿名内置对象

var User = Ext.data.Record.create([

// 下面的 "name" 匹配读到的标签名称, 除了 "birthDay",它被映射到标签 "birth"

{name: 'id', type: 'int' },

{name: 'name', type: 'string'},

{name: 'area'},

{name: 'email', type: 'string'},

{name: 'age', type: 'int'}, // automatic date conversions

{name: 'birthDay', mapping: 'birth', type: 'date', dateFormat: 'Y/m/d'},

{name: 'sex', type: 'bool'}

]);

// 创建 Data Store

var store = new Ext.data.Store({

// 使用 HTTP 加载

url: 'users.xml',

// 因为返回值是 XML, 所以我们创建一个解析器

reader: new Ext.data.XmlReader({

// 记录必须包含 "user" 标签

record: 'user'

}, User),

sortInfo:{field:'name', direction:'ASC'}// 排序信息

});

// 创建编辑器表格

var grid = new Ext.grid.EditorGridPanel({

store: store,

cm: cm,

renderTo: 'editor-grid',

width:800,

height:300,

autoExpandColumn:'name',

title:'功能管理',// 标题

frame:true,

clicksToEdit:1,//设置点击几次才可编辑

selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),//设置单行选中模式, 否则将无法删除数据

// 顶部工具栏按钮

tbar: [

{

text: '新增',

iconCls:'xz',//按钮图标的CSS名称

handler : function(){// 点击按钮执行的操作

var n = grid.getStore().getCount();// 获得总行数

var p = new User({

id: n + 1,

name: '新数据' + n,

area: '',

email: 'Benson@163.com',

age: 20,

birthDay: (new Date()).clearTime(),

sex: true

});

grid.stopEditing();// 停止编辑

store.insert(n, p);// 插入到最后一行

grid.startEditing(n, 1);// 开始编辑1单元格

}

},

{

text: '删除',

iconCls:'sc01',

handler : function(){

//var record = grid.getSelectionModel().getSelected();// 返回值为 Record 类型

var rows = grid.getSelectionModel().getSelections();// 返回值为 Record 数组

if(rows.length==0){

Ext.MessageBox.alert('警告', '最少选择一条信息，进行删除!');

}else{

Ext.MessageBox.confirm('提示框', '您确定要进行该操作？',function(btn){

if(btn=='yes'){

if(rows){

for (var i = 0; i < rows.length; i++) {

//alert(rows[i].get("id"));

store.remove(rows[i]);

//store.removeAll(); //删除所有数据

}

this.getEl().dom.action='./formservlet?operator=save';

this.getEl().dom.submit();

}

}

});

} // 弹出对话框警告

}

},

{

text: '保存',

iconCls: 'bc',

handler : function(){

var recordtoedit = grid.getSelectionModel().getSelected();// 返回值为 Record 类型

if(recordtoedit) {

Ext.Msg.alert('查看选中', "您现在选中的用户其名字为:" + recordtoedit.get("name"));// 取得用户名

// alert("您现在选中的用户其名字为:" + recordtoedit.get("name"));

}

}

},

{

text: '查询',

iconCls: 'cx',

handler : function(){

}

}

]

});

// 单元格编辑后事件处理

grid.on("afteredit", afterEdit, grid);

// 事件处理函数

function afterEdit(e) {

var record = e.record;// 被编辑的记录

// 显示等待对话框

Ext.Msg.wait("请等候", "修改中", "操作进行中...");

// 更新界面, 来真正删除数据

Ext.Msg.alert('您成功修改了用户信息', "被修改的用户是:" + e.record.get("name").value + "\n 修改的字段是:"

+ e.field);// 取得用户名

};

// 触发数据加载

store.load();

});

//创建edgrid.jsp

<%@page contentType="text;html; charset=GBK"%>

<%@page import="com.luke.hm.tree.EJBContext"%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312">

<title>表格编辑器示例</title>

<link rel="stylesheet" type="text/css" href="<%= EJBContext.getRootPath()%>/ext/resources/css/ext-all.css" />

<!-- 图标样式 CSS 信息 -->

<link rel="stylesheet" type="text/css" href="<%= EJBContext.getRootPath()%>/menujscss/edgrid.css" />

<!-- GC -->

<!-- LIBS -->

<script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/adapter/ext/ext-base.js"></script>

<!-- ENDLIBS -->

<script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/ext-all.js"></script>

<!-- 中文提示信息支持 -->

<script type="text/javascript" src="<%= EJBContext.getRootPath()%>/ext/source/locale/ext-lang-zh_CN.js"></script>

<!-- 本页的功能代码 -->

<script type="text/javascript" src="edgrid.js"></script>

<!-- DWR JavaScript 类库 -->

<!--script type='text/javascript' src='/dwrtest/dwr/interface/JUserManager.js'></script-->

<!--script type='text/javascript' src='/dwrtest/dwr/engine.js'></script-->

</head>

<body>

<h1>

<select name="area" id="area" style="display: none;">

<option value="历城区">历城区</option>

<option value="历下区">历下区</option>

<option value="槐荫区">槐荫区</option>

</select>

<!-- 放置可编辑控件的 DIV -->

</h1>

<div id="editor-grid"></div>

</body>

</html>

//创建users.xml

<?xml version="1.0" encoding="GBK"?>

<users>

<user>

<id>1</id>

<name>XXX1</name>

<area>XXX2</area>

<email>XXX1@126.com</email>

<age>88</age>

<sex>true</sex>

<birth>1980/01/01</birth>

</user>

<user>

<id>2</id>

<name>Benson</name>

<area>山东济南</area>

<email>Benson@163.com</email>

<age>27</age>

<sex>true</sex>

<birth>1982/12/12</birth>

</user>

<user>

<id>3</id>

<name>Benson_GG</name>

<area>济南历下</area>

<email>aa@bb.com</email>

<age>28</age>

<sex>false</sex>

<birth>1982/12/11</birth>

</user>

</users>

//创建edgrid.css

/** 定义了一些工具栏按钮的 CSS 样式 */

.xz {

background-image:url(./xz.gif) !important;

}

.sc01 {

background-image:url(./sc.gif) !important;

}

.sc02 {

background-image:url(./sc.gif) !important;

}

.cx {

background-image:url(./cx.gif) !important;

}

.bc {

background-image:url(./bc.gif) !important;

}