Question

如何将行添加到网格并在列中添加一些值然后将数据以json格式提交到EXTJS中的其余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插件用于网格。

store.sync（）将商店与其proxy同步。这要求代理将存储中的任何新的，更新的和删除的记录批处理在一起，以在每次操作完成时更新存储的记录内部表示。
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()
                }
            }]
        });
    }
});

Answer 2

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

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

2- Ext.data.Store-> [记录集]，它将消耗模型。

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

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

这是一个可行的示例FIDDLE

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

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

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

2 个答案: