如何将空行添加到网格并填充列，然后在 EXTJS 中提交

Question

如何在网格中添加行并在列中添加一些值 然后将数据以 JSON 格式提交到 EXTJS 中的 REST API

Json 数据，例如：

[
{
"col1"  : "john",
"col2"  : "xyz",
"col3"  :  "01/05/2018"
},
{
"col1"  : "bush",
"col2"  : "xpao",
"col3"  : "01/08/2018"
},
.......
]

像上面这样的事情 我想在网格列中添加上述数据，并在 EXTJS 中提交给 API

提前致谢-:)

Answer 1

我想在网格列中添加上述数据并提交给API

为此，您需要使用网格的store.sync()和rowediting插件。

1. store.sync((将存储与其代理同步。这会要求代理将存储中的任何新记录、更新记录和已删除记录批处理在一起，并在每个操作完成时更新存储记录的内部表示形式。
2. Ext.grid.plugin.RowEditing插件在行级别为 Grid 注入编辑。编辑开始时，将为相应的行显示一个小的浮动对话框。每个可编辑列将显示一个要编辑的字段。有一个按钮可以保存或取消编辑的所有更改。

你可以检查工作小提琴

注意：我使用了虚拟 api 名称，您需要将实际 api 与存储代理一起使用来创建、读取、更新和删除记录。

代码片段

Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
fields: ['col1', 'col2', 'col3'],
autoLoad: true,
pageSize: 25,
remoteSort: true,
proxy: {
type: 'ajax',
method: 'POST',
api: {
read: 'data.json',
update: 'your_update_api',
create: 'your_create_api',
destroy: 'your_delete_api'
},
reader: {
type: 'json'
},
writer: {
type: 'json',
encode: true,
root:'data'
}
},
});
Ext.create('Ext.grid.Panel', {
title: 'Add Row Example',
store: 'gridStore',
height: 300,
border: true,
renderTo: Ext.getBody(),
tools: [{
xtype: 'button',
iconCls: 'fa fa-plus-circle',
tooltip: 'Add New Record',
handler: function () {
let store = this.up('grid').getStore();
store.insert(0, {
col1: '',
col2: '',
col3: ''
})
}
}],
columns: [{
text: 'col1',
dataIndex: 'col1',
flex: 1,
editor: {
xtype: 'textfield'
}
}, {
header: 'col2',
dataIndex: 'col2',
editor: {
xtype: 'textfield'
},
flex: 1
}, {
header: 'col3',
dataIndex: 'col3',
editor: {
xtype: 'datefield',
dateFormat: 'd/m/Y'
},
flex: 1
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})
],
bbar:['->',{
text:'Submit Changes',
handler:function(){
this.up('grid').getStore().sync()
}
}]
});
}
});

Answer 2

在现实生活中，您将需要以下组件：-

1- Ext.data.Model -> [记录] 来映射您的模型，并在需要时添加验证和逻辑。

2- Ext.data.Store -> 将使用模型的 [记录集]。

3-代理将处理Web服务的调用，代理可以添加到模型或商店中。

4-网格行编辑器或单元格行编辑器能够插入数据。

这是一个工作示例 小提琴

当您按添加数据时，将创建模型[记录]，您可以开始根据列中的编辑器属性编辑数据，此记录存储在网格存储中，因此您可以根据需要添加任意数量的记录。

按提交时，store.sync 负责读取代理 API 并将数据发送到服务，需要打开开发工具网络检查，以查看请求中以 json 形式发送的数据。