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并提供编辑列时所要 ...
随机推荐
- sed编辑器基础
一. 更多的替换选项 ①替换标记 root@localhost sed]# cat data4.txt This is a test of the test script. This is the s ...
- C# 串口总结
一.串口初始化 定义: using System.IO.Ports; SerialPort myPort = new SerialPort() 初始化: //port初始化 public void _ ...
- spfa（模板）
#include<iostream> #include<cstdio> #include<cstring> using namespace std; int cnt ...
- CSS入门之盒模型（六分之四）
盒模型要点知识 务必注意看,这可是前端面试 必定会遇到 的问题. box-sizing 盒模型的主要CSS属性,除继承外有两个值: content-box 这里不再细说历史原因,只说其作用. cont ...
- 汇编学习（1）——win7 64位调出debug
一.安装方法: 1.下载一个dosbox和win7 32位debug.exe,安装dosbox,打开页面 2. 将debug.exe放入磁盘根目录,这里以D盘为例.在dosbox中输入mount ...
- (61)C# 可枚举类型和迭代器
一.可枚举类型 枚举器-Enumerator 是一个只读且只能在值序列向前移动的游标 枚举器需要实现下列接口之一 System.Collections.IEnumerator System.Coll ...
- 二级域名解析设置及Apache 子域名配置
域名管理解析项 如: cy.wanggangg.top 为wanggangg.top域名添加解析 主机记录设为 cy 记录值 为服务器ip地址 打开apache配置文件 新增如下:<Virtua ...
- 关于java使用json不能够使用报没有导包的问题，以及前后台交互json数据的使用
博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/12/02/%e5%85%b3%e4%ba%8ejava%e4%bd%bf%e7%94%a8 ...
- Django有办法打开HTTP长轮询连接吗？
保持连接打开,直到发生事件. 解决方案 看看Django / Comet(推送):所有邪恶中最少的?或者彗星在Python中的最新推荐? - COMET是“ajax long-polling”的另一个 ...
- 分布式-技术专区-Redis和MySQL缓存一致性问题
1.Redis 缓存和 MySQL 数据如何实现一致性 需求起因 缓存和数据库一致性解决方案 在高并发的业务场景下,数据库大多数情况都是用户并发访问最薄弱的环节.所以,就需要使用redis做一个缓冲操 ...