<!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的更多相关文章

  1. 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)

    GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...

  2. Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel

    Ext.Net学习笔记18:Ext.Net 可编辑的GridPanel Ext.Net GridPanel 有两种编辑模式:编辑单元格和编辑行. 单元格编辑: 行编辑: 可以看出,单元格编辑的时候,只 ...

  3. [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  4. ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择 ...

  5. [Irving] Ext.Net动态添加GridPanel列绑定Checkbox值失败的解决办法

    var grid = X.GetCmp<GridPanel>(vm.GRID_QUOTATIONS_FEEITEM_RANGE_SHOW); grid.AddColumn(Html.X() ...

  6. [Ext.Net] 1.x GridPanel列数过多给Menu菜单加滚动条

    转自:http://www.ext.net.cn/thread-1944-1-2.html 当GirdPanel列数过多,查看列的显示隐藏时会出现下面下面情况,有部分超出了界面被遮罩住了   要解决这 ...

  7. EXT 设置编辑框为只读

    Ext.getCmp("processResult").setReadOnly(ture);   //processResult是属性的id,setReadOnly(ture)设置 ...

  8. Ext GridPanel

    Extjs GridPanel用法详解 创建GridPanel 要使用GridPanel,首先要定义Store,而在创建Store的时候必须要有Model,因此我们首先来定义Model: //1.定义 ...

  9. Javascript - ExtJs - GridPanel组件 - 编辑

    GridPanel组件 - 编辑 Ext.grid.plugin.Editing 如果要对表格使用列编辑器控件,则需要完成以下几步 1.将columns中需要编辑的列设为editor并提供编辑列时所要 ...

随机推荐

  1. 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 ...

  2. git代码提交步骤

    常用的步骤: 1)假如本地想关联git仓库,那么先git  init,git remote add origin [git地址] 2)假如是想直接从git仓库拉下来,那么git clone [git地 ...

  3. ASP.NET MVC 分页之 局部视图

    using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptograph ...

  4. (转)Android OpenGL ES(一)

    转:http://wiki.jikexueyuan.com/project/opengl-es-guide/pipeline.html OpenGL ES 主要用来开发 3D 图形应用的.OpenGL ...

  5. What is the difference between UserControl, WebControl, RenderedControl and CompositeControl?

    What is the difference between UserControl, WebControl, RenderedControl and CompositeControl? UserCo ...

  6. vue 自定义指令(directive)实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  7. MySQL高级学习笔记(六):MySql锁机制

    文章目录 概述 定义 生活购物 锁的分类 从对数据操作的类型(读\写)分 从对数据操作的粒度分 三锁 表锁(偏读) 特点 案例分析 建表SQL 加读锁 加写锁 结论 如何分析表锁定 行锁(偏写) 特点 ...

  8. java.lang.IllegalAccessException: Class XXXcan not access xxx with modifiers "private"

    field 或者 method 是 provate的 field.setAccessible(true); method.setAccessible(true); 有时候是因为 newinstance ...

  9. javascript函数调用的几种方式

    ​ function fn() { console.log(this.name); return "fn函数的返回值"; } /*1.方法调用*/ //方法调用,this指向win ...

  10. 力扣算法题—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 ...