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并提供编辑列时所要 ...
随机推荐
- 【dart学习】-- Dart之JSON
概述 现在很难想象移动应用程序不需要与后台交互或者存储结构化数据.现在开发,数据传输方式基本都是用JSON,在Flutter中是没有GSON/Jackson/Moshi这些库,因为这些库需要运行时反射 ...
- Django中object.all是什么东西
前言 先抛出一个问题.银行就相当于一个数据库,你去银行取钱存钱办卡销卡,是你告诉银行柜员方便还是你自己去操作电脑办卡取卡方便?(你还不一定会,假设自动存款机还没发明),object在数据库中就相当于银 ...
- 94、tensorflow实现语音识别0,1,2,3,4,5,6,7,8,9
''' Created on 2017年7月23日 @author: weizhen ''' #导入库 from __future__ import division,print_function,a ...
- Python单元测试示例
这是使用单元测试框架unittest进行的单元测试,并输出测试结果. 首先定义一个类,三个方法.第一个方法是判断两个字符串是否相等,第二个方法是判断结果为真:第三个方法也是判断两个字符串相等. 然后是 ...
- strlen、strcmp、strcat、strlen、memmove
#include <cassert> #include <iostream> using namespace std; /* strlen 返回字符串不包含结束符\0的长度 * ...
- jquery 找到指定父级指定子集
其中 closest() : jquery 1.3 新增 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素. 其中 find() : 搜索所有与指定表达式匹配的元素.这个函数是找出正在处理的元 ...
- javascript实现继承的六种方式
/*实现继承的六种方式*/ /*1.扩展原型对象的方法实现继承*/ function Foo1(){} //在Foo1函数上扩展一个fn1方法,由构造函数创建的对象都具有fn1这个方法 Foo1. ...
- 如何更规范化的编写JAVA 代码
如何更规范的编写JAVA代码 一.MyBatis 不要为了多个查询条件而写 1 = 1 当遇到多个查询条件,使用where 1=1 可以很方便的解决我们的问题,但是这样很可能会造成非常大的性能损失, ...
- linux下载文件到本地
使用XShell工具 1.首先虚拟机要联网 2.服务器要安装了rz,sz yum install lrzsz 运行rz,会将windows的文件传到linux服务器 运行sz filename,会 ...
- 破解Xshell6强制升级
一.背景今天打开xshell时,弹出提示,“要继续使用此程序,您必须应用最新的更新或使用新版本”(如下图) 这是让我强制升级啊,点了确定按钮却提示我已经是最新版了 反正点了半天xshell也没打开.后 ...