Ext 可编辑的GridPanel
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第十章:Ext 可编辑的GridPanel</title> <link rel="stylesheet" href="src/ext/resources/css/ext-all.css"> <!--ext-base 必须在ext-all之前引入--> <script src="src/ext/ext-base.js"></script> <script src="src/ext/ext-all.js"></script> <!--<script src="src/ext/ext-lang-zh_CN.js"></script>--> </head> <body> <div id="e"> </div> <script> Ext.onReady(function () { // 定义用于表示订单的数组 var data = [ { id: 1, date: new Date(), name: '李世民', address: '中华人民共和国', bank: '中国人民银行', isFast: false, }, { id: 2, date: new Date(), name: '搜狗五笔', address: '北京天安门', bank: '中国建设银行', isFast: false, }, { id: 3, date: new Date(), name: '宋江', address: '中国古代某处', bank: '中国招商银行', isFast: true, }, { id: 4, date: new Date(), name: '李宝田', address: '湖南省红旗广场', bank: '中国工商银行', isFast: false, }, ]; // Proxy var proxy = new Ext.data.MemoryProxy(data); var Order = Ext.data.Record.create( [ { name: 'ID', type: 'int', mapping: 'id', }, // 编号 { name: 'DATE', type: 'date', mapping: 'date', }, // 下单日期 { name: 'NAME', type: 'string', mapping: 'name', }, // 收货人姓名 { name: 'ADDRESS', type: 'string', mapping: 'address', }, // 收货人地址 { name: 'BANK', type: 'string', mapping: 'bank', }, // 交易银行 { name: 'ISFAST', type: 'boolean', mapping: 'isFast', }, // 交易银行 ], ); // 定义Reader var reader = new Ext.data.JsonReader({}, Order); // 定义Store var store = new Ext.data.Store({ proxy: proxy, reader: reader, autoLoad: true, //立即加载 pruneModifiedRecords: true, // 每次Store加载后,清除所有修改过的记录信息; }); var banks = [ ['中国建设银行', '中国建设银行'], ['中国银行', '中国银行'], ['中国工商银行', '中国工商银行'], ['中国人民银行', '中国人民银行'], ]; // 创建一个Ext.grid.CheckboxSelectionModel对象 var checkBox = new Ext.grid.CheckboxSelectionModel(); // 定义列模型 var cm = new Ext.grid.ColumnModel([ checkBox, { header: '订单编号', dataIndex: 'ID', width: 60, editor: new Ext.grid.GridEditor(new Ext.form.NumberField()), }, { header: '下单日期', dataIndex: 'DATE', width: 140, renderer: Ext.util.Format.dateRenderer('Y-m-d'), editor: new Ext.grid.GridEditor(new Ext.form.DateField({format: 'Y-m-d'})), }, { header: '收货人姓名', dataIndex: 'NAME', width: 120, editor: new Ext.grid.GridEditor(new Ext.form.TextField()), }, { header: '收货人地址', dataIndex: 'ADDRESS', id: 'ADDRESS', editor: new Ext.grid.GridEditor(new Ext.form.TextField()), }, { header: '交易银行', dataIndex: 'BANK', width: 120, editor: new Ext.grid.GridEditor( new Ext.form.ComboBox({ store: new Ext.data.SimpleStore({ fields: ['value', 'text'], data: banks, }), displayField: 'text', valueField: 'value', mode: 'local', triggerAction: 'all', readOnly: false, emptyText: '请选择银行', })), }, { header: '快递', dataIndex: 'ISFAST', width: 70, renderer: function (v) { return v ? '快递' : '非快递'; }, editor: new Ext.grid.GridEditor(new Ext.form.Checkbox()), }, ]); // 定义可编辑EditorGridPanel var grid = new Ext.grid.EditorGridPanel({ store: store, cm: cm, sm : checkBox, autoExpandColumn: 'ADDRESS', // 指定某个列之id,grid就会在这一列自动扩展宽度 width: 800, autoHeight: true, renderTo: 'e', autoEncode: true, // 提交时是否自动编码 tbar: [{ text: '添加一行', icon: 'src/ext/resources/images/default/dd/drop-yes.gif', cls: 'x-btn-text-icon', handler: function () { var initValue = { ID: '', DATE: new Date(), NAME: '', ADDRESS: '', BANK: '', ISFAST: false, }; var order = new Order(initValue); grid.stopEditing(); grid.getStore().add(order); // 设置脏数据, order.dirty = true; // 只要一个字段值修改了,该行的所有值都设置成脏标记 order.modified = initValue; if (grid.getStore().modified.indexOf(order) == -1) { grid.getStore().modified.push(order); } }, }, { text: '删除一行', icon: 'src/ext/resources/images/default/dd/drop-no.gif', cls: 'x-btn-text-icon', handler: function () { var rsm = grid.getSelectionModel(); if (rsm.hasSelection()) { Ext.Msg.confirm('提示', '真的要删除选中的行吗?', function (btn) { if (btn == 'yes') { var view = grid.getView(); var store = grid.getStore(); for (var i = view.getRows().length - 1; i >= 0; i--) { if (rsm.isSelected(i)) { store.remove(store.getAt(i)); } } view.refresh() } }); } else { Ext.Msg.alert('错误', '请先选择删除的行,谢谢!'); } }, }, '-', { text: '保持', icon: 'src/ext/resources/images/default/dd/drop-add.gif', cls: 'x-btn-text-icon', handler: function () { var store = grid.getStore(); // 得到修改过的Recored的集合 var modified = store.modified.slice(0); // 将数据放到另一个数据中 var jsonArray = []; Ext.each(modified, function (m) { // 读取当前被修改的记录的地址 console.log(m.data.ADDRESS); jsonArray.push(m.data); }); var r = checkBlank(modified); if (!r) { return; } else { // 通过ajax请求将修改的记录发送到服务器,最终影数据库 Ext.Ajax.request({ method: 'post', // 最好不要用get请求 url: '../EditGirdServlet', params: { data: Ext.util.JSON.encode(jsonArray), }, success: function (response, config) { var json = Ext.util.JSON.decode(response.responseText); // grid.getStore.reload(); Ext.Msg.alert('提交成功', json.msg); }, }); } }, }], }); // 删除一行时,同步数据库 grid.getStore().on('remove', function (s, record, index) { // 因为Servlet只处理数组,所以先变成数组 var jsonArray = [record.data]; if (record.data.ID != '') { Ext.Ajax.request({ method: 'post', url: '../EditGirdServlet', params: { data: Ext.util.JSON.encode(jsonArray), action: 'delete', }, success: function (response, config) { var msg = Ext.util.JSON.decode(response.responseText); // grid.getStore().reload() Ext.Msg.alert('', msg.msg); }, }); } }); // 验证是否输入的数据是否有效 var checkBlank = function (modified) { var result = true; Ext.each(modified, function (record) { var keys = record.fields.keys; // 获取Record 的所有名称 Ext.each(keys, function (name) { // 根据名称获取对应的值 var value = record.data[name]; // 找出指定名称所在的列索引 var colIndex = cm.findColumnIndex(name); // var rowIndex = grid.getStore().indexOfId(record.id); // 根据行列索引找出组件编辑器 var editor = cm.getCellEditor(colIndex).field; // 验证值是否合法 var r = editor.validateValue(value); if (!r) { Ext.Msg.alert('验证', '对不起,您输入的数据非法'); result = false; return; } }); }); return result }; }); </script> </body> </html>