Extjs, delete button

0
votes

in this example : http://dev.sencha.com/deploy/dev/examples/grid/progress-bar-pager.html if i want to put an delete button, after the row is deleted from grid, how can i change or delete this record from myData? Because when i change the page, or click o refresh button my row/row's deleted appear again. is there a solution to change the data?

many thanks

3
extjs

3 Answers

4
votes

Something like:

var grid = ...; // Your grid.

var button = new Ext.Button({
    text: 'Delete row',
    handler: function() {
        var record = grid.getSelectionModel().getSelected();

        if (record !== undefined) {
            grid.store.remove(record);
        }
    }
});

If you wish your data to be deleted for real, the grid should use a remote store that loads and removes data from an actual data store. The following means local changes only:

proxy: new Ext.ux.data.PagingMemoryProxy(myData),

you could try removing that and put

url: 'http://localhost/path/to/get/data'

Refer to the documentation for more info: http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.Store

1
votes

If you look through the source of that example, it is loading the data from an array that is hard-coded:

Ext.onReady(function(){

        var myData = [
                ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
                ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
                ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
                // ...
                ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
                ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
        ];

myData is re-created from that static definition each time the page loads, so that's why changes do not persist between refreshes.

You need to write two server-side scripts (e.g. PHP scripts). One outputs data of non-deleted records in JSON or XML format. The other deletes record(s) from the database by ID.

Here is a tutorial that covers writing the "getter" PHP script and corresponding Ext JS code for displaying a grid of data on technology products: http://www.devarticles.com/c/a/JavaScript/EXT-JS-Passing-Live-Data/. This only covers the first script (the one to retrieve data from the database and output it in JSON format), but it should get you going. Look into overriding the remove callback of the store with a function that issues an AJAX request to the second script (the one that deletes record(s) from the database by ID).

0
votes

this is the solution myData.splice (1,1);