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>
Ext 可编辑的GridPanel的更多相关文章
- 【Ext.Net学习笔记】06：Ext.Net GridPanel的用法（GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel）
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...
- Ext.Net学习笔记18：Ext.Net 可编辑的GridPanel
Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行. 单元格编辑: 行编辑: 可以看出,单元格编辑的时候,只 ...
- [转载]ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- ExtJs4 笔记（8） Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件
本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择 ...
- [Irving] Ext.Net动态添加GridPanel列绑定Checkbox值失败的解决办法
var grid = X.GetCmp<GridPanel>(vm.GRID_QUOTATIONS_FEEITEM_RANGE_SHOW); grid.AddColumn(Html.X() ...
- [Ext.Net] 1.x GridPanel列数过多给Menu菜单加滚动条
转自:http://www.ext.net.cn/thread-1944-1-2.html 当GirdPanel列数过多,查看列的显示隐藏时会出现下面下面情况,有部分超出了界面被遮罩住了 要解决这 ...
- EXT 设置编辑框为只读
Ext.getCmp("processResult").setReadOnly(ture); //processResult是属性的id,setReadOnly(ture)设置 ...
- Ext GridPanel
Extjs GridPanel用法详解 创建GridPanel 要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: //1.定义 ...
- Javascript - ExtJs - GridPanel组件 - 编辑
GridPanel组件 - 编辑 Ext.grid.plugin.Editing 如果要对表格使用列编辑器控件,则需要完成以下几步 1.将columns中需要编辑的列设为editor并提供编辑列时所要 ...
随机推荐
- Temporarily disable Ceph scrubbing to resolve high IO load
https://blog.dachary.org/2014/08/02/temporarily-disable-ceph-scrubbing-to-resolve-high-io-load/ In a ...
- mysql性能查看 命中率 慢查询
网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...
- delphi文件类型
1.DPR: Delphi Project文件,包含了Pascal代码.应用系统的工程文件2.PAS: Pascal文件,Pascal单元的源代码,可以是与窗体有关的单元或是独立的单元.3.DFM:D ...
- vue2 打包部署（vue-cli ）
1.一般打包 :直接 npm run build.(webpack的文件,根据不同的命令,执行不同的代码的) 注:这种打包的静态文件,只能放在web服务器中的根目录下才能运行. 2.在服务器中 非根目 ...
- Arrays（一）二次封装自己的数组
一.二次封装自己的数组 目标:设计int 类型数组, (1)可以根据用户传入的容量设置数组的长度,如果用户未设置容量,默认设置长度为10(考虑使用多态性) (2)判断数组是否为空 (3)获取数组的容量 ...
- selenium多表单操作与多窗口，以及警告框处理
知识是需要经常温习的,不然是很容易遗忘的. 以前自己操作IFRAME,多窗口的时候,觉得很简单.半年没有操作自动化了,知识又还了回去. 写博客有一个好处,可以把自己记住的知识点记录下来,这样,以后自己 ...
- [转载]真正的inotify+rsync实时同步 彻底告别同步慢
原文链接http://www.ttlsa.com/web/let-infotify-rsync-fast/ 背景我们公司在用inotify+rsync做实时同步,来解决分布式集群文件一致性的问题.但当 ...
- cesium清除选定事件
cesium清除选定事件 此处的案例不一定适合你的项目,但可以给你一个思路.清除选定,就是还原你选中之前的状态.比如你点击一个面高亮,面的颜色发生改变:并且会弹出一个divPoint框.此时的清除选定 ...
- java多线程学习笔记（三）
java多线程下的对象及变量的并发访问 上一节讲到,并发访问的时候,因为是多线程,变量如果不加锁的话,会出现“脏读”的现象,这个时候需要“临界区”的出现去解决多线程的安全的并发访问.(这个“脏读”的现 ...
- token的创建及解析
<dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifac ...