从 DB extjs6 动态设置网格 ID
Set grid id dynamicly from DB extjs6
我有一个网格。
此网格从 postgres table 获取数据。
此 table 使用 4 个用户。
问题是如果用户 B 在 table 和 id:5 中创建一行，用户 A 将不知道。因此，当用户 A 创建一行时，他应该知道最后一个 ID 是什么，或者创建一行并取回行 ID。
当我在网格中按下 "Add" 按钮时，extjs 向服务器发送 "create" 命令，服务器返回 "success: true" 和 "id" 在 postgres 中新创建的行数table。
我想在我的网格中显示和使用这个 'id'。
例如，如果我添加一行，并从服务器获取“id: 19”，我必须在网格中创建 19 行。当我想编辑这一行时，etxjs 必须使用 [=20= 发送到服务器更新].
怎么做到的？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/extjs/ext-6.2.0/build/classic/theme-classic/resources/theme-classic-all.css" />
<script type="text/javascript" src="/extjs/ext-6.2.0/build/ext.js"></script>
<script type="text/javascript" src="/extjs/ext-6.2.0/build/ext-all.js"></script>
<script type="text/javascript">
Ext.require(['Ext.data.*', 'Ext.grid.*']);
// Создаем model
Ext.define('Users', {
extend: 'Ext.data.Model',
idProperty: 'id',
//idProperty: 'id',
fields: [{
name: 'id',
type: 'int',
mapping: 'id'
},
//{name: 'date', type: 'date', dateFormat: 'Y-m-d'}
// {
// name: 'time',
// type: 'date',
// dateFormat: 'H:i'
// },
]
});
// var occupationStore = Ext.create('Ext.data.Store', {
// fields: ['time'],
// data: [{
// time: 'CEO'
// },
// {
// time: 'Vicepresident'
// },
// {
// time: 'Marketing manager'
// },
// ]
// });
Ext.onReady(function() {
// Создаем store
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Users',
proxy: {
type: 'ajax',
url: 's.rakov.php',
api: {
create: 's.rakov.php?action=create',
read: 's.rakov.php?action=read',
update: 's.rakov.php?action=update',
destroy: 's.rakov.php?action=delete'
},
reader: {
type: 'json',
rootProperty: 'data'
},
writer: {
type: 'json',
encode: true,
rootProperty: 'dataUpdate',
allowSingle: false,
writeAllFields: true,
//root:'records'
},
actionMethods: {
create: 'GET',
read: 'GET',
update: 'GET',
destroy: 'GET'
}
},
listeners: {
write: function(store, operation) {
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
verb = 'Destroyed';
} else {
verb = name + 'd';
}
//Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
}
);
var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
//plugins: [rowEditing],
// Редактирование
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
listeners: {
edit: function() {
}
},
width: '99,3%',
height: 330,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'id',
width: '2%',
sortable: true,
dataIndex: 'id',
renderer: function(v, meta, rec) {
return rec.phantom ? '' : v;
}
},
{
header: 'Задача',
width: '30%',
// sortable: true,
dataIndex: 'task',
editor: {
completeOnEnter: false,
field: {
xtype: 'textfield',
//name: 'timeStart1',
//fieldLabel: 'Time In',
anchor: '100%',
allowBlank: false
}
}
},
{
header: 'Время начала',
width: 120,
// sortable: true,
dataIndex: 'time_start',
//format: 'H:i',
// Нужно для верного отображеия времени после редактирования в таблице
renderer: Ext.util.Format.dateRenderer('H:i'),
editor: {
completeOnEnter: false,
field: {
xtype: 'timefield',
format: 'H:i',
//name: 'timeStart1',
//fieldLabel: 'Time In',
minValue: '8:00',
maxValue: '20:00',
increment: 30,
anchor: '100%',
//allowBlank: false
}
}
},
{
header: 'Результат',
width: '30%',
// sortable: true,
dataIndex: 'task_result',
editor: {
completeOnEnter: false,
field: {
xtype: 'textfield',
//name: 'timeStart1',
//fieldLabel: 'Time In',
//anchor: '100%',
allowBlank: false
}
}
},
{
header: 'Время конца',
width: 120,
// sortable: true,
dataIndex: 'time_end',
//format: 'H:i',
// Нужно для верного отображеия времени после редактирования в таблице
renderer: Ext.util.Format.dateRenderer('H:i'),
editor: {
completeOnEnter: false,
field: {
xtype: 'timefield',
format: 'H:i',
//name: 'timeStart1',
//fieldLabel: 'Time In',
minValue: '8:00',
maxValue: '20:00',
increment: 30,
anchor: '100%',
allowBlank: false
}
}
},
{
header: 'Дата',
width: 70,
// sortable: true,
dataIndex: 'date',
renderer: Ext.util.Format.dateRenderer('d/m/Y'),
editor: {
completeOnEnter: false,
field: {
xtype: 'datefield',
dateFormat: 'd/m/Y',
allowBlank: false
}
}
},
{
header: 'Длительность',
width: 60,
// sortable: true,
dataIndex: 'time_duration'
},
// {
// header: 'Тип задачи',
// width: 120,
// // sortable: true,
// dataIndex: 'task_type',
// editor: {
// completeOnEnter: false,
// field: {
// xtype: 'combobox',
// //name: 'timeStart1',
// //fieldLabel: 'Time In',
// anchor: '100%',
// allowBlank: false
// }
// }
// }
],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function() {
// Создаем новую задачу
// Для корректной работы с БД нужно задать ID новой строки, равной +1 от последней ID из таблицы.
var rec = new Users();
//console.log (x);("rec data= " + rec.id + " -- " + rec.data.id);
var idArr = grid.store.data.items;
var idValue = [];
for (var i = 0; i < idArr.length; i++) {
idValue.push(idArr[i].id);
}
idValue.sort(function(a, b) {
return a - b;
});
var maxId = idValue[idValue.length - 1];
console.log(maxId);
//rec.id = maxId + 1;
//rec.data.id = maxId + 1;
rec.date = Ext.Date.format(new Date(), 'Y-m-d\T00:00:00');
rec.data.date = Ext.Date.format(new Date(), 'Y-m-d\T00:00:00');
rec.time_start = Ext.Date.format(new Date(), '2008-01-01\TH:i:s');
rec.data.time_start = Ext.Date.format(new Date(), '2008-01-01\TH:i:s');
store.insert(0, rec);
//store.add(rac);
//grid.getView().refresh();
// rowEditing.startEdit(rec, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: false,
handler: function() {
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (confirm('Вы действительно хотите удалить задачу №' + selection.id + " ?")) {
// Удлаяем
if (selection) {
store.remove(selection);
}
}
}
}]
}]
});
});
</script>
</head>
<body>
<div id="gridDiv"></div>
</body>
</html>
您必须在更新响应中向客户端提供新 ID。
我为你做了一个fiddle：https://fiddle.sencha.com/#view/editor&fiddle/226o
简而言之，当客户端向服务器发送带有正文的创建请求时，例如
{"updateData":[{"task":"Test", "id":"ext-task-46"},{"task":"Test 2", id: "ext-task-47"}]}
（updateData 是您作者的 rootProperty），服务器必须回答
{"success":true,"data":[{"task:"Test","id":5},{"task:"Test 2","id":6}]
或者更短，
{"success":true,"data":[{"id":5},{"id":6}]
（data 是你的 reader 的 rootProperty）。 id更新的提交和returned记录之间的匹配是按位置；并且所有其他字段也可以更新。
服务器因此可以return向客户端发送服务器对提交的记录强制执行的任何更改； .
我有一个网格。 此网格从 postgres table 获取数据。 此 table 使用 4 个用户。 问题是如果用户 B 在 table 和 id:5 中创建一行，用户 A 将不知道。因此，当用户 A 创建一行时，他应该知道最后一个 ID 是什么，或者创建一行并取回行 ID。
当我在网格中按下 "Add" 按钮时，extjs 向服务器发送 "create" 命令，服务器返回 "success: true" 和 "id" 在 postgres 中新创建的行数table。 我想在我的网格中显示和使用这个 'id'。 例如，如果我添加一行，并从服务器获取“id: 19”，我必须在网格中创建 19 行。当我想编辑这一行时，etxjs 必须使用 [=20= 发送到服务器更新]. 怎么做到的？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/extjs/ext-6.2.0/build/classic/theme-classic/resources/theme-classic-all.css" />
<script type="text/javascript" src="/extjs/ext-6.2.0/build/ext.js"></script>
<script type="text/javascript" src="/extjs/ext-6.2.0/build/ext-all.js"></script>
<script type="text/javascript">
Ext.require(['Ext.data.*', 'Ext.grid.*']);
// Создаем model
Ext.define('Users', {
extend: 'Ext.data.Model',
idProperty: 'id',
//idProperty: 'id',
fields: [{
name: 'id',
type: 'int',
mapping: 'id'
},
//{name: 'date', type: 'date', dateFormat: 'Y-m-d'}
// {
// name: 'time',
// type: 'date',
// dateFormat: 'H:i'
// },
]
});
// var occupationStore = Ext.create('Ext.data.Store', {
// fields: ['time'],
// data: [{
// time: 'CEO'
// },
// {
// time: 'Vicepresident'
// },
// {
// time: 'Marketing manager'
// },
// ]
// });
Ext.onReady(function() {
// Создаем store
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'Users',
proxy: {
type: 'ajax',
url: 's.rakov.php',
api: {
create: 's.rakov.php?action=create',
read: 's.rakov.php?action=read',
update: 's.rakov.php?action=update',
destroy: 's.rakov.php?action=delete'
},
reader: {
type: 'json',
rootProperty: 'data'
},
writer: {
type: 'json',
encode: true,
rootProperty: 'dataUpdate',
allowSingle: false,
writeAllFields: true,
//root:'records'
},
actionMethods: {
create: 'GET',
read: 'GET',
update: 'GET',
destroy: 'GET'
}
},
listeners: {
write: function(store, operation) {
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy') {
verb = 'Destroyed';
} else {
verb = name + 'd';
}
//Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));
}
}
}
);
var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
//plugins: [rowEditing],
// Редактирование
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
listeners: {
edit: function() {
}
},
width: '99,3%',
height: 330,
frame: true,
title: 'Users',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'id',
width: '2%',
sortable: true,
dataIndex: 'id',
renderer: function(v, meta, rec) {
return rec.phantom ? '' : v;
}
},
{
header: 'Задача',
width: '30%',
// sortable: true,
dataIndex: 'task',
editor: {
completeOnEnter: false,
field: {
xtype: 'textfield',
//name: 'timeStart1',
//fieldLabel: 'Time In',
anchor: '100%',
allowBlank: false
}
}
},
{
header: 'Время начала',
width: 120,
// sortable: true,
dataIndex: 'time_start',
//format: 'H:i',
// Нужно для верного отображеия времени после редактирования в таблице
renderer: Ext.util.Format.dateRenderer('H:i'),
editor: {
completeOnEnter: false,
field: {
xtype: 'timefield',
format: 'H:i',
//name: 'timeStart1',
//fieldLabel: 'Time In',
minValue: '8:00',
maxValue: '20:00',
increment: 30,
anchor: '100%',
//allowBlank: false
}
}
},
{
header: 'Результат',
width: '30%',
// sortable: true,
dataIndex: 'task_result',
editor: {
completeOnEnter: false,
field: {
xtype: 'textfield',
//name: 'timeStart1',
//fieldLabel: 'Time In',
//anchor: '100%',
allowBlank: false
}
}
},
{
header: 'Время конца',
width: 120,
// sortable: true,
dataIndex: 'time_end',
//format: 'H:i',
// Нужно для верного отображеия времени после редактирования в таблице
renderer: Ext.util.Format.dateRenderer('H:i'),
editor: {
completeOnEnter: false,
field: {
xtype: 'timefield',
format: 'H:i',
//name: 'timeStart1',
//fieldLabel: 'Time In',
minValue: '8:00',
maxValue: '20:00',
increment: 30,
anchor: '100%',
allowBlank: false
}
}
},
{
header: 'Дата',
width: 70,
// sortable: true,
dataIndex: 'date',
renderer: Ext.util.Format.dateRenderer('d/m/Y'),
editor: {
completeOnEnter: false,
field: {
xtype: 'datefield',
dateFormat: 'd/m/Y',
allowBlank: false
}
}
},
{
header: 'Длительность',
width: 60,
// sortable: true,
dataIndex: 'time_duration'
},
// {
// header: 'Тип задачи',
// width: 120,
// // sortable: true,
// dataIndex: 'task_type',
// editor: {
// completeOnEnter: false,
// field: {
// xtype: 'combobox',
// //name: 'timeStart1',
// //fieldLabel: 'Time In',
// anchor: '100%',
// allowBlank: false
// }
// }
// }
],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function() {
// Создаем новую задачу
// Для корректной работы с БД нужно задать ID новой строки, равной +1 от последней ID из таблицы.
var rec = new Users();
//console.log (x);("rec data= " + rec.id + " -- " + rec.data.id);
var idArr = grid.store.data.items;
var idValue = [];
for (var i = 0; i < idArr.length; i++) {
idValue.push(idArr[i].id);
}
idValue.sort(function(a, b) {
return a - b;
});
var maxId = idValue[idValue.length - 1];
console.log(maxId);
//rec.id = maxId + 1;
//rec.data.id = maxId + 1;
rec.date = Ext.Date.format(new Date(), 'Y-m-d\T00:00:00');
rec.data.date = Ext.Date.format(new Date(), 'Y-m-d\T00:00:00');
rec.time_start = Ext.Date.format(new Date(), '2008-01-01\TH:i:s');
rec.data.time_start = Ext.Date.format(new Date(), '2008-01-01\TH:i:s');
store.insert(0, rec);
//store.add(rac);
//grid.getView().refresh();
// rowEditing.startEdit(rec, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: false,
handler: function() {
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (confirm('Вы действительно хотите удалить задачу №' + selection.id + " ?")) {
// Удлаяем
if (selection) {
store.remove(selection);
}
}
}
}]
}]
});
});
</script>
</head>
<body>
<div id="gridDiv"></div>
</body>
</html>
您必须在更新响应中向客户端提供新 ID。
我为你做了一个fiddle：https://fiddle.sencha.com/#view/editor&fiddle/226o
简而言之，当客户端向服务器发送带有正文的创建请求时，例如
{"updateData":[{"task":"Test", "id":"ext-task-46"},{"task":"Test 2", id: "ext-task-47"}]}
（updateData 是您作者的 rootProperty），服务器必须回答
{"success":true,"data":[{"task:"Test","id":5},{"task:"Test 2","id":6}]
或者更短，
{"success":true,"data":[{"id":5},{"id":6}]
（data 是你的 reader 的 rootProperty）。 id更新的提交和returned记录之间的匹配是按位置；并且所有其他字段也可以更新。
服务器因此可以return向客户端发送服务器对提交的记录强制执行的任何更改；