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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将空行添加到网格并填充列,然后在EXTJS中提交相关的知识,希望对你有一定的参考价值。

如何向行添加行并在列中添加一些值,然后将数据以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。

以上是关于如何将空行添加到网格并填充列,然后在EXTJS中提交的主要内容,如果未能解决你的问题,请参考以下文章

如何将复选框列添加到 Extjs Grid

Extjs 网格列标题,将下拉菜单项添加到特定列

ExtJS 将事件处理程序动态添加到列编辑器

ExtJS 6. 将列添加到网格

如何在加载之前检查所有数据加载将新行添加到网格中(ExtJS 3.2)

ExtJs Grid通过渲染器中的ajax填充列