CODEWITHSUNDEEP
extjs4extjs4.1
Sharon Watinsan
Sharon Watinsan

Reputation: 9850

Remove a record from a Grid Locally

I have a Grid in a Window. When i click on a row of that window and click on the remove button, that row should get removed from the window. (I think i will have to remove it from Store and reload the grid, so the changes will be picked)

I am unable to get the click event and remove the row from the store. I have added the button for this but not able to get the Grid record and remove it from store and reloading it.

My code is as follows;

Ext.define('MyApp.view.Boy', {
    extend: 'Ext.window.Window',
    alias: 'widget.boy',
    height: 800,
    width: 900,
    layout: {
        type: 'absolute'
    },
    initComponent: function() {
        var me = this;
        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'gridpanel',
                    height: 500,
                    width: 800,
                    title: 'My Grid Panel',
                    store: 'School',
                    viewConfig: {
                    },
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'Id',
                            text: 'id'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'name'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    height: 40,
                    width: 150,
                    text: 'Remove',
                    listeners: {
                        click: {
                            fn: me.removebuttonclick,
                            scope: me
                        }
                    }
                }
            ]
        });

        me.callParent(arguments);
    },
    removebuttonclick: function(button, e, options) {
        console.log('removebuttonclick');
    }
});

Upvotes: 0

Views: 1650

Answers (1)

Alex
Alex

Reputation: 5724

Something like:

Ext.define('MyApp.view.Boy', {
    extend: 'Ext.window.Window',
    alias: 'widget.boy',
    height: 800,
    width: 900,
    layout: {
        type: 'absolute'
    },
    initComponent: function() {
        var me = this;
        var this.grid = Ext.widget({
                    xtype: 'gridpanel',
                    height: 500,
                    width: 800,
                    title: 'My Grid Panel',
                    store: 'School',
                    viewConfig: {
                    },
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'Id',
                            text: 'id'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'name'
                        }
                    ]
                });
        Ext.applyIf(me, {
            items: [
                this.grid, //oopsie
                {
                    xtype: 'button',
                    height: 40,
                    width: 150,
                    text: 'Remove',
                    listeners: {
                        click: {
                            fn: me.removebuttonclick,
                            scope: me
                        }
                    }
                }
            ]
        });

        me.callParent(arguments);
    },
    removebuttonclick: function(button, e, options) {
    var me = this;
    Ext.Array.each(this.grid.getSelectionModel().selected,function(record, index,selectedRows){
            me.grid.getStore().remove(record);
        });
    }
});

Upvotes: 1

Related Questions