EXT JS,如何从网格中删除记录

时间:2019-07-15 15:45:45

标签: extjs

我有一个任务要在EXT JS中制作简单的应用程序。

我获得了公共api,应该用数据填充我的表。已使用REST PROXY,文件类型为JSON。

我有表,一切正常,现在我必须在本地从表中删除一些记录。

当我单击像垃圾桶这样的小图标时,删除过程应该发生。 我做了那个图标,当您按下它时,它会打开警报,询问您是否要删除该记录?

现在,如果单击“是”,它将删除记录并关闭窗口。 但是现在什么也没发生。

我已经定义,建模,存储,主控制器。 如何以删除已删除的本地语言的方式实现这种方法。

我尝试了不同的方法,但是没有任何效果。 当我单击“是”时,它只是关闭窗口。

如何通过为3个对象使用3个构造函数来解决此问题,并正确创建删除方法,以便可以在本地删除记录?

如果没有人对EXT框架有经验,那我真的会很坦率。

这给了我噩梦...

******This is main controller ::******


Ext.define('MyApp.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',

    onItemSelected: function (sender, record) {
        Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
    },

    OnEdit: function (sender, records, data, result,FullName ) {
        Ext.Msg.alert('Edit', 'Edit' + " " + ["0"].records);
    },


    OnDelete: function(sender, records) {
        Ext.Msg.confirm('Delete Changes', 'Do you want to delete' + " " + records)
    },

    AddRecord: function(sender, record) {
        Ext.Msg.form( )

    },

    onConfirm: function (choice,) {
        if (choice === 'yes') {
       store.remove(records);   
        }
    }
});

******这就是商店:*********************

Ext.define('MyApp.store.Personnel', {
    extend: 'Ext.data.Store',
    alias: 'store.personnel',
    autoLoad: true,
    pageSize: null,

    model: 'Personnel',

    proxy: {
    type: 'rest',
    url: 'https://reqres.in/api/users',
    method:{ 
    read: 'GET',
    },
    reader: {
        type: 'json',
        rootProperty:'data',

    }

   },
   listeners: {
    load: function( store, records,) {
      console.log(records);

    }
}
   });

******这是List.js ******

Ext.define('MyApp.view.main.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'mainlist',
    requires: [
        'MyApp.store.Personnel',

    ],

    title: 'Personnel',

    store: {
        type: 'personnel'
    },

    actions: {

        edit: {
            iconCls: 'x-fa fa-pencil-square',
            tooltip: 'Edit',
            handler: 'OnEdit'
        },

        delete: {
            iconCls: 'x-fa fa-trash-o',
            text: 'Delete',
            handler: 'OnDelete'
        }
    },

    columns: [
        { text: '', dataIndex: 'avatar', renderer: function (value) { return '<img src="' + value + '" width="32" height="32" borer="0" />'; } },
        { text: 'Name', dataIndex: 'FullName', flex: 1 },
        { text: "Active", dataIndex: 'active', xtype: 'checkcolumn' },
        {
            text: 'Action', dataIndex: 'action', xtype: 'actioncolumn', flex: 1,
            items: ['@edit', '@delete'],
        }
    ],
    tbar: [
        { xtype: 'button', text: 'Add Record', cls: 'x-btn-default-small', handler: 'AddRecord'}
    ],

    form: {

        fields:{  
            text: 'First Name',
            text: 'Last Name',
        },
    },
    listeners: {
        select: 'onItemSelected',
    }
});

我有这样的对象...我该如何更改???

(3) [constructor, constructor, constructor]
0: constructor {data: {…}, session: null, internalId: 4, id: 1, phantom: false, …}
1: constructor {data: {…}, session: null, internalId: 5, id: 2, phantom: false, …}
2: constructor {data: {…}, session: null, internalId: 6, id: 3, phantom: false, …}
length: 3

1 个答案:

答案 0 :(得分:0)

您的OnDelete函数没有存储,那么如何删除数据?您在Ext.Msg.confirm中遇到另一个问题。您没有指定功能

通过文档-确认(标题,消息,[fn],[范围]):Ext.window.MessageBox

尝试

OnDelete: function(sender, records) {
   Ext.Msg.confirm('Delete Changes', 'Do you want to delete', function(choice){
        if (choice === 'yes') {

            //declare store and remove records 

            store.remove(records);   
        }   
   });