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并提供编辑列时所要 ...
随机推荐
- Android 模糊搜索rawquery bind or column index out of range: handle 0x2fb180 报错
做模糊搜索时,出现了 bind or column index out of range: handle 0x2fb180 报错 public Cursor getTitle(String word ...
- git代码提交步骤
常用的步骤: 1)假如本地想关联git仓库,那么先git init,git remote add origin [git地址] 2)假如是想直接从git仓库拉下来,那么git clone [git地 ...
- ASP.NET MVC 分页之 局部视图
using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptograph ...
- （转）Android OpenGL ES（一）
转:http://wiki.jikexueyuan.com/project/opengl-es-guide/pipeline.html OpenGL ES 主要用来开发 3D 图形应用的.OpenGL ...
- What is the difference between UserControl, WebControl, RenderedControl and CompositeControl?
What is the difference between UserControl, WebControl, RenderedControl and CompositeControl? UserCo ...
- vue 自定义指令（directive）实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- MySQL高级学习笔记（六）：MySql锁机制
文章目录 概述 定义 生活购物 锁的分类 从对数据操作的类型(读\写)分 从对数据操作的粒度分 三锁 表锁(偏读) 特点 案例分析 建表SQL 加读锁 加写锁 结论 如何分析表锁定 行锁(偏写) 特点 ...
- java.lang.IllegalAccessException: Class XXXcan not access xxx with modifiers "private"
field 或者 method 是 provate的 field.setAccessible(true); method.setAccessible(true); 有时候是因为 newinstance ...
- javascript函数调用的几种方式
function fn() { console.log(this.name); return "fn函数的返回值"; } /*1.方法调用*/ //方法调用,this指向win ...
- 力扣算法题—143ReorderList
Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You may not mod ...