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

Posted 2021-05-06

如何向行添加行并在列中添加一些值，然后将数据以json格式提交到EXTJS中的其余api

Json数据如：

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

上面的一些事情我想在网格列中添加上面的数据并提交到EXTJS中的API

提前致谢 -：）

答案

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

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

1. store.sync（）使商店与其proxy同步。这要求代理将商店中任何新的，更新的和已删除的记录批处理在一起，在每个操作完成时更新商店的记录内部表示。
2. Ext.grid.plugin.RowEditing插件为网格注入行级编辑。编辑开始时，将显示适当行的小浮动对话框。每个可编辑列都将显示一个用于编辑的字段。有一个按钮可以保存或取消编辑的所有更改。

你可以查看工作FIDDLE

注意：我使用了虚拟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()
                }
            }]
        });
    }
});

另一答案

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

1- Ext.data.Model - > [Record]映射模型，并根据需要添加验证和逻辑。

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

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

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

这是一个有效的例子FIDDLE

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

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